노마드 코더의 영상 **「미친 프레임워크 등장」**에서는 AI 에이전트를 React의 Hook과 비슷한 방식으로 구성할 수 있는 TypeScript 기반 프레임워크 **Flue**를 소개합니다. > Flue는 개발 속도가 매우 빠른 프로젝트라 API가 자주 바뀔 수 있습니다. 아래 내용은 영상 공개 시점과 현재 공식 저장소의 구조를 함께 참고해 정리했습니다. ## Flue는 무엇인가? Flue는 단순한 LLM SDK보다 한 단계 위의 **Agent Harness Framework**를 지향합니다. 즉, 모델 호출 코드만 제공하는 것이 아니라 AI 에이전트가 실제 일을 수행하는 데 필요한: - Session - Tool - Skill - MCP - Subagent - Sandbox - Persistent State - Durable Execution - Observability 같은 실행 환경 전체를 하나의 Framework 안에서 구성합니다. 공식 저장소에서는 Flue를 **'The Agent Harness Framework'**라고 설명합니다. ## React처럼 Hook으로 Agent를 구성한다 Flue의 가장 눈에 띄는 특징은 React처럼 Hook 스타일 API를 사용한다는 점입니다. 현재 공식 구조에서는 Agent 함수 내부에서 다음과 같은 Hook을 선언할 수 있습니다. - useModel() - useTool() - useSkill() - useSubagent() - useMcpConnection() - useSandbox() - usePersistentState() 즉, Agent의 기능을 거대한 설정 객체 하나에 몰아넣기보다 **필요한 기능을 Hook처럼 조합**합니다. ## Agent는 하나의 함수 현재 Flue에서는 Agent 자체가 하나의 exported function입니다. 그 함수 안에서 모델, Tool, Skill, Sandbox 등을 선언하고 마지막에 Agent의 Instruction을 반환합니다. 개념적으로는: **Agent = Model + Instructions + Tools + Skills + State + Environment** 라고 볼 수 있습니다. ## Tool 연결 AI가 외부 API를 호출하거나 실제 작업을 수행하려면 Tool이 필요합니다. Flue는 typed Tool을 Agent에 붙여: - API 호출 - DB 조회 - 파일 처리 - GitHub 작업 - 내부 서비스 호출 같은 Action을 수행하게 만들 수 있습니다. ## Skill 연결 Skill은 반복적으로 재사용하는 전문 지식이나 Workflow를 패키징하는 방식입니다. 예를 들어: - 코드 리뷰 Skill - 보안 점검 Skill - 고객 문의 처리 Skill - 문서 작성 Skill 을 따로 만들어 두고 필요할 때 Agent가 사용할 수 있습니다. 공식 구조에서는 SKILL.md 형태의 Skill도 패키징해서 사용할 수 있습니다. ## MCP 연결 Flue는 Model Context Protocol(MCP) 연결도 지원합니다. 즉, 이미 구축된 MCP Server를 연결해: - GitHub - 사내 API - Database - Browser - 외부 SaaS 같은 도구를 Agent가 사용할 수 있습니다. 현재 공식 API에서는 useMcpConnection()을 통해 MCP Server를 선언합니다. ## Subagent 하나의 Agent가 모든 작업을 처리하는 대신 전문 역할을 가진 Subagent에게 일을 넘길 수도 있습니다. 예: **Main Agent** ↓ **Research Subagent** **Coding Subagent** **Review Subagent** 처럼 역할을 분리할 수 있습니다. 복잡한 Multi-Agent 시스템을 직접 Routing 코드로 모두 작성하지 않아도 Framework 차원에서 위임 구조를 만들 수 있다는 점이 장점입니다. ## Sandbox AI Agent가 실제 코드를 실행하거나 파일을 수정하려면 안전한 실행 환경이 필요합니다. Flue는 Sandbox를 Agent에 붙일 수 있습니다. 공식 저장소 기준으로 Local 환경뿐 아니라 Cloudflare Sandbox 같은 환경과 연결할 수 있고, Sandbox를 선언해야 Shell·Filesystem Tool을 사용할 수 있도록 설계되어 있습니다. 즉, Agent에게 무제한 Shell 권한을 바로 주기보다 **실행 환경 자체를 명시적으로 붙이는 구조**입니다. ## Persistent State와 Memory 장시간 동작하는 Agent는 이전 작업 상태를 기억해야 합니다. Flue의 usePersistentState() 같은 기능을 사용하면 Agent Instance별 상태를 유지할 수 있습니다. 이를 이용하면: - 이전 작업 진행 상태 - 사용자 설정 - 마지막 처리 위치 - 누적 데이터 같은 정보를 다음 Turn에서도 이어갈 수 있습니다. ## 조건부 Hook Flue의 흥미로운 특징 중 하나는 Agent Render마다 Tool이나 Skill을 조건부로 붙일 수 있다는 점입니다. 예를 들어: **관리자 사용자일 때만 Admin Tool 연결** **특정 작업일 때만 Sandbox 활성화** **코딩 작업일 때만 Coding Subagent 연결** 같은 동적 구성이 가능합니다. React에서 조건과 상태에 따라 UI 구성이 달라지는 것처럼 Agent의 Harness 구성을 상황별로 바꿀 수 있는 개념입니다. ## REST API와 UI 연결 영상에서는 Flue를 이용해 Agent를 단순 CLI 프로그램이 아니라: - REST API - WebSocket - React UI - 외부 Application 과 연결할 수 있다는 점도 강조합니다. 즉, Agent 코드를 만들고 나면 이를 실제 SaaS나 내부 업무 서비스의 Backend처럼 사용할 수 있습니다. ## DB와 Persistence 공식 Package에는 Postgres Persistence Adapter도 제공됩니다. 따라서 개발 단계에서는 가볍게 시작하고, 운영 단계에서는 PostgreSQL 기반 상태 관리로 확장할 수 있습니다. ## Observability 실제 Agent 운영에서는 어떤 Tool을 호출했고 어디서 실패했는지 추적하는 것이 중요합니다. Flue는 OpenTelemetry 기반 Observability를 지원하고 Braintrust, Sentry 같은 외부 Monitoring 도구와도 연결할 수 있습니다. 이는 Agent를 단순 Demo가 아니라 실제 Production 시스템으로 운영하기 위한 중요한 기능입니다. ## 어디에 배포할 수 있나 공식 저장소 기준으로 Flue는 다음 환경을 지원합니다. - Node.js - Cloudflare Workers - GitHub Actions - GitLab CI/CD - Daytona 즉, 특정 Cloud에 종속된 Agent Runtime이 아니라 배포 환경을 선택할 수 있도록 설계되어 있습니다. ## Flue가 기존 Agent SDK와 다른 점 단순 Agent SDK는 보통: **Model + Tool Calling** 수준에서 시작합니다. Flue는 여기에: **Model + Tool + Skill + MCP + State + Sandbox + Subagent + Durability + Observability** 까지 묶어 하나의 Harness를 구성하려는 접근입니다. 그래서 Claude Code나 Codex 같은 실제 자율형 Agent의 실행 구조를 **Headless하고 Programmable한 Framework**로 만드는 방향에 가깝습니다. ## 주의할 점 Flue는 빠르게 발전 중인 Framework입니다. 실제로 공식 CHANGELOG를 보면 Agent 정의 방식, Workflow API, MCP 연결 방식, Sandbox 구조 등이 큰 폭으로 바뀐 이력이 있습니다. 따라서 Production에 바로 도입할 때는: - 현재 버전 API 확인 - Migration Guide 확인 - Sandbox 권한 설정 - Tool Allowlist - MCP 인증 - 실패 복구 정책 을 함께 점검해야 합니다. ## 핵심 정리 Flue의 핵심은 'AI Agent를 코드 몇 줄로 만든다'는 것보다: > **Agent를 구성하는 Harness 전체를 React Hook처럼 선언적으로 조립한다는 것** 에 있습니다. 정리하면: **Model** + **Instructions** + **Tools** + **Skills** + **MCP** + **Subagents** + **Sandbox** + **State** + **Observability** 를 하나의 TypeScript Framework 안에서 구성하는 접근입니다. Agent를 단순 Chatbot이 아니라 실제 업무를 수행하는 Software Runtime으로 만들고 싶다면 주목할 만한 Framework입니다.