Cloudflare에 꽂혔더니 역대급 AI 에이전트 만들었음 ⭐

채널: nomadcoders
URL: https://www.youtube.com/watch?v=wQDHSDvgU54
날짜: 2026-07-13
태그: #Cloudflare #AIAgent #WebDev #CloudflareWorkers #AgentSDK

---

1계층: 핵심 주장 (Core Claims)

1. Cloudflare는 현재 AI 에이전트 구축을 위한 최고의 플랫폼으로 부상 중이다 — Workers AI, Agents SDK, 샌드박스, 브라우저 자동화, 이메일, 메모리, 실시간 WebSocket 싱크까지 에이전트에 필요한 모든 스택을 무료로 제공한다.

2. Cloudflare 에이전트는 단 50줄 미만의 코드로 실시간 채팅·메모리·툴 호출·웹 프론트엔드를 갖출 수 있다 — 인프라를 직접 구현할 필요 없이 선언적으로 기능을 추가할 수 있다.

3. 에이전트는 이제 자신을 스스로 확장할 수 있다 — AI가 필요한 툴이 없으면 직접 코드를 작성해 격리된 샌드박스에 로드하고 즉시 사용한다.

4. 상태(State) 자동 지속성 + 실시간 멀티탭 동기화가 무료로 제공된다 — SQLite DB에 자동 저장되고 모든 연결된 클라이언트가 즉각 동기화된다.

5. AI 에이전트 구축의 진짜 어려움은 이제 코드가 아니다 — Cloudflare가 인프라를 전부 처리해주므로, 유일한 과제는 "무엇을 만들 것인가"를 결정하는 것이다.

---

2계층: 주요 논점과 근거

2-1. 역대급 에이전트의 5가지 충격적 기능

기능 1: 클라우드 기반 공유 브라우저

• 에이전트가 내 컴퓨터가 아닌 클라우드 서버에서 실행되는 브라우저를 제어한다
• 사용자와 에이전트가 같은 Chrome 탭을 공유하며 동시에 클릭 가능
• 에이전트가 스크린샷을 찍어 현재 페이지 내용을 파악한다

기능 2: 이메일 수신 및 알림 설정

• 에이전트 이메일 주소(bot@nomadcloud.xyz)로 이메일을 보낼 수 있다
• "30초 후에 운동하라고 알려줘" 요청 → 에이전트가 리마인더 설정 → 30초 후 회신
• 에이전트가 이메일 인박스를 가진다 (onEmail 메서드 하나로 구현)

기능 3: 브라우저 사이드 툴 (하이브리드 실행)

• 에이전트는 서버에서 실행되는 툴과 사용자 브라우저에서 실행되는 툴을 동시에 가진다
• "내 위치가 어디야?" → 에이전트가 사용자 브라우저에 코드 실행 요청 → 브라우저 권한 허용 → 위치 반환
• 에이전트가 클라우드 서버와 사용자 브라우저에서 동시에 실행된다

기능 4: 자기 확장 툴 생성 (Self-Extending)

• 에이전트에게 없는 툴을 요청하면? → 에이전트가 스스로 코드를 작성해 새 툴을 만든다
• "섭씨를 화씨로 변환하는 툴 만들어" → 에이전트가 코드 작성 → 격리된 샌드박스에 로드 → 즉시 사용
• 에이전트가 자기 자신을 확장한다는 개념 자체가 패러다임 전환

기능 5: 멀티모달 인터페이스 (채팅·이메일·음성)

• 동일한 뇌(AI 모델)·동일한 메모리·동일한 툴을 사용하면서
• 채팅, 이메일, 음성 세 가지 인터페이스 모두 지원
• "안녕" 하고 말하면 에이전트가 말로 대답 (Voice 인터페이스)

2-2. Cloudflare 에이전트 아키텍처

[클라이언트 (React)]
  useAgent(agentName)  →  WebSocket 실시간 연결 (자동 재연결 포함)
  useAgentChat()       →  채팅 messages + sendMessage 제공

[서버 (Cloudflare Worker)]
  class MyAgent extends AIChatAgent {
    onChatMessage(msg) {
      return streamText({ model, messages });
    }
  }

• 에이전트 = Cloudflare Worker 안의 클래스 (상속으로 기능 확장)
• 프론트엔드 useAgent 훅 하나로 WebSocket 영구 연결 완성
• useAgentChat 훅으로 채팅 메시지 목록 + 전송 기능 자동 제공

2-3. 모델 호스팅 (Cloudflare Workers AI)

• Cloudflare 자체 모델 호스팅 서비스
• 지원 모델: Llama, Mistral, Gemma, Qwen, DeepSeek 등 수십 종
• OpenAI, Anthropic도 AI SDK를 통해 동일 코드로 교체 가능

2-4. 상태 관리 & 실시간 동기화

• 에이전트마다 SQLite DB 자동 할당 (무료)
• initialState로 상태 모양 정의 → JS 객체로 관리
• @appCallable 데코레이터로 프론트엔드에서 직접 메서드 호출
• 상태 변경 시 모든 연결된 탭이 즉시 동기화 (직접 sync 코드 작성 불필요)

---

3계층: 세부 사례와 예시

코드 예시: 에이전트 기본 구조 (50줄 미만)

// 서버 (Cloudflare Worker)
import { AIChatAgent } from "@cloudflare/agents-sdk";

export class MyAgent extends AIChatAgent {
  // 메시지 수신 시 호출
  async onChatMessage(message) {
    return streamText({
      model: this.env.AI,  // Cloudflare Workers AI
      messages: this.messages,  // 대화 히스토리 자동 제공
    });
  }
}

// 프론트엔드 (React)
import { useAgent, useAgentChat } from "@cloudflare/agents-sdk/react";

function App() {
  const agent = useAgent({ name: "MyAgent" });  // WebSocket 연결 자동
  const { messages, sendMessage } = useAgentChat(agent);  // 채팅 기능

  return (
    <div>
      {messages.map(m => <div>{m.content}</div>)}
      <form onSubmit={e => sendMessage(input)}>
        <input value={input} onChange={...} />
      </form>
    </div>
  );
}

툴 정의 예시

const weatherTool = {
  name: "getWeather",
  description: "현재 날씨를 가져온다",
  inputSchema: { city: "string" },
  execute: async ({ city }) => { /* 날씨 API 호출 */ }
};
// streamText에 tools 배열로 전달

상태 관리 예시

initialState = { counter: 0 };

@appCallable
increment() {
  this.setState({ counter: this.state.counter + 1 });
  // → 모든 연결 탭에 즉시 반영
}

한 줄 기능들

// 나중에 스케줄 실행
this.schedule("2027-01-01", "wakeUp");

// 이메일 수신
onEmail(email) { /* 인박스 생성 완료 */ }

// 서브 에이전트 생성
const worker = this.spawnAgent("SubAgent");

Claw Clone 코스 12가지 기능

1. 실시간 채팅 with 메모리
2. 서브 에이전트 & 워크플로우
3. 음성 인터페이스
4. 브라우저 자동화
5. PDF 읽기/쓰기
6. 스케줄링
7. 이메일 수신
8. MCP (Claude/ChatGPT가 에이전트 호출)
9. 툴이 툴을 작성하는 자기 확장
10. 격리 샌드박스
11. 파일 시스템 (클라우드)
12. 웹 기반 완전 동작

---

4계층: 실행 가능한 인사이트 및 시사점

즉시 적용 가능한 것들

1. Cloudflare Agents SDK 탐색 시작 — @cloudflare/agents-sdk npm 패키지. AIChatAgent 클래스를 상속하는 것만으로 WebSocket, 히스토리, 상태 지속성이 무료 제공된다.

2. 기존 프로젝트에 에이전트 추가 — useAgent + useAgentChat 훅을 React 앱에 추가하는 것만으로 에이전트 채팅 기능을 붙일 수 있다. 백엔드 인프라 작업 최소화.

3. Workers AI로 멀티모델 전략 — 하나의 코드베이스로 Llama/DeepSeek(무료/저렴) ↔ GPT-4o/Claude(고품질) 전환 가능. 비용에 따라 모델 교체.

4. 자기 확장 툴 패턴 — 에이전트가 실행 중 새 툴을 작성하고 로드하는 패턴. 미리 모든 툴을 정의하지 않아도 되는 동적 에이전트 설계 가능.

5. 상태 동기화 활용 — setState만 사용하면 실시간 멀티유저 동기화가 자동. Supabase realtime, Firebase 없이도 collaborative 기능 구현 가능.

전략적 시사점

• AI 에이전트 플랫폼 레이스에서 Cloudflare가 선두권 진입 — AWS Lambda/GCP Functions와 달리 에이전트 특화 기능(상태, WebSocket, 샌드박스, 이메일)을 원스톱으로 제공
• "인프라는 이미 해결됐다"는 패러다임 전환 — 개발자의 경쟁력은 이제 무엇을 만들지 아이디어를 가졌느냐에 달려 있다
• MCP 통합이 에이전트 생태계를 연결 — Claude, ChatGPT가 내 에이전트를 호출할 수 있게 되면 에이전트 서비스화/상품화 가능
• 월 몇 센트로 운영 가능한 에이전트 — Cloudflare Workers는 극히 저렴. 클라이언트에게 판매하거나 SaaS 제품으로 출시하기 좋은 경제성

다음 액션

• [ ] Cloudflare Agents 공식 문서 정독: https://developers.cloudflare.com/agents/
• [ ] @cloudflare/agents-sdk 설치 후 50줄 에이전트 만들어보기
• [ ] Workers AI 무료 티어로 Llama 모델 테스트
• [ ] Claw Clone 코스 수강 검토 (링크: 영상 설명란)
• [ ] 자기 확장 툴 패턴(자동 툴 생성) 프로토타입 실험