다음 10억 달러 에이전트 만들기 🚀

AI Jason 구독자 167,000명

요약

이 영상은 특정 산업에 특화된 AI 에이전트 ‘cursor for X’ 구축 과정을 실습 중심으로 설명한다. Vercel AI SDK의 core와 UI 모듈을 활용해 모델 연결, 스트리밍, 구조화된 출력, 도구 연동 등 에이전트 핵심 로직을 구현하고, Next.js와 Chassеn으로 채팅 인터페이스와 결과물 플레이그라운드를 구성한다. 특히 createDataStreamResponse로 하위 툴의 장기 실행 데이터를 실시간으로 프론트엔드에 전송하는 기법과 상태 관리, Superbase 연계를 통한 퍼시스턴스 설계까지 다룬다. 솔로프러너가 AI 스타트업을 빠르게 만드는 데 필요한 실전 가이드를 제공한다.

주요 키워드

AI Agent cursor for X Vercel AI SDK Streaming Structured Output createDataStreamResponse Zod TypeScript Next.js Supabase

하이라이트

🔑 2025년에는 특정 산업을 겨냥한 수직형 AI 에이전트(cursor for X)가 핵심 가치 창출 영역이 될 것이다.
⚡️ ‘cursor for X’ 패턴은 코드 에디터, 스프레드시트, 디자인, 영상 편집 등 다양한 툴에 적용 가능하다.
🌟 Vercel AI SDK core로 손쉽게 모델 교체, 텍스트·객체 스트리밍, 도구 연동 기반 에이전트를 구현할 수 있다.
📌 zod 스키마를 활용해 구조화된 JSON 출력을 스트리밍으로 처리하는 방법을 소개한다.
🚀 AI SDK UI를 이용해 Next.js와 Chassеn으로 채팅 인터페이스와 결과 뷰를 빠르게 구성할 수 있다.
🎯 createDataStreamResponse를 활용해 하위 에이전트나 긴 실행 툴의 스트림을 프론트엔드로 전달하는 기법을 설명한다.
💡 상태관리(state)와 Supabase 연계를 통해 플레이그라운드 내 실시간 협업과 데이터 퍼시스턴스를 구축한다.
🔎 AI Builder Club과 SaaS Launch Kit 등 실전 스타트업 가이드 리소스를 함께 제공한다.

용어 설명

cursor for X

특정 수직 영역(예: 코드, 디자인, 영상 등)에 특화된 작업을 자동화·완성하는 AI 에이전트 패턴

AI Agent

여러 도구와 상호작용하며 특정 작업을 자율적으로 수행하는 인공지능 프로그램

Vercel AI SDK

Vercel에서 제공하는 오픈소스 TypeScript 패키지로, LLM 모델 연결·스트리밍·UI 컴포넌트를 지원한다

Streaming

LLM 응답을 청크 단위로 실시간 전달해 지연을 최소화하고 사용자 경험을 개선하는 기법

Structured Output

zod 등 스키마 검증 라이브러리로 JSON 형태의 출력을 명확히 정의하고 검증하는 기술

createDataStreamResponse

여러 스트림을 합치고 커스텀 데이터 이벤트를 푸시해 프론트엔드로 전송하는 Vercel 전용 함수

Zod

TypeScript 환경에서 데이터 구조를 검증하고 타입을 안전하게 정의해 주는 라이브러리

Next.js

React 기반의 서버사이드 렌더링 및 라우팅을 지원하는 프레임워크

Chassеn

Next.js 프로젝트에서 손쉽게 UI 컴포넌트를 구축할 수 있는 라이브러리

Supabase

데이터베이스, 인증, 실시간 기능을 제공하는 오픈소스 백엔드 플랫폼

2025년 AI 시장의 최대 트렌드는 특정 산업을 겨냥한 수직형 에이전트(cursor for X)라고 설명한다. AI 코딩 에이전트가 첫 시장 적합성을 입증했고, 곧 스프레드시트·디자인·영상 편집 등 수많은 수직형 에이전트가 등장할 것이라 전망한다.

[00:03] 2025년 AI 에이전트 시장에서 가장 주목할 점은 수직적 에이전틱 소프트웨어가 핵심 가치 창출 영역이 될 것이라는 점이다. AI 코딩이 첫 번째 성공 사례로 시장 적합성을 달성했으며, 앞으로 24개월 동안 다양한 분야별 에이전트들이 등장할 것으로 전망된다.

[00:32] 슬라이스용 커서의 필요성이 제기되자 즉시 프로토타입 개발이 시작되었고, 스프레드시트, 디자인, 비디오 편집 등 다양한 분야의 커서형 도구들이 개발될 것이다. 이들은 전체 워크플로우를 간소화하고 특정 지식 작업과 깊이 통합되는 시스템이 될 것이다.

‘cursor for X’ 패턴의 핵심은 다양한 도구와 연동해 특정 업무를 완성하는 에이전트를 만드는 것. 예시로 코드 작성·파일 생성·커맨드 실행·Git 조작까지 가능한 개발용 에이전트를 들며, 스프레드시트·디자인·영상 편집 에이전트 사례를 소개한다.

[01:00] 커서형 에이전틱 소프트웨어를 구축하는 일반적인 패턴은 다양한 도구와 어시스턴스에 접근할 수 있는 에이전트를 만드는 것이다. 커서의 경우 코드 작성, 파일 생성, 명령줄 실행, Git 푸시, 문서 검색 등의 기능을 제공한다.

[01:22] 에이전트와 함께 특별한 플레이그라운드나 캔버스가 필요하다. 이는 사용자가 에이전트의 작업 결과를 검토하고 추적하며 협업할 수 있게 해준다. 커서의 코드 에디터처럼 왼쪽의 모든 컨텍스트가 에이전트 채팅으로 자동 전달되어 맥락을 유지한다.

Vercel AI SDK는 core(LLM 연결·도구 연동)와 UI(스트리밍 결과 렌더링) 두 모듈로 구성된다. 다양한 모델 공급자를 코드 변경 없이 교체할 수 있고, 에이전트·도구·스트리밍 출력을 간단히 설정할 수 있다.

[01:48] 커서 윈드서프, 구글 스티치(UI 생성 플랫폼), 클라바(비디오 편집용 커서) 등 다양한 사례들이 있다. 모두 왼쪽에 AI 상호작용 채팅, 오른쪽에 결과 검토를 위한 최적화된 UX를 제공하는 구조를 가지고 있다.

[02:06] X용 커서를 구축할 기회는 무궁무진하다. 글쓰기용 커서, 비디오 편집용 커서, PRD 계획용 커서 등 다양한 분야의 도구들이 가능하다. AI 스타트업을 구축하려는 1인 기업가들을 위한 그렉 아이젠버그의 무료 리소스도 소개한다.

[02:36] Greg Eisenberg와의 팟캐스트 경험을 언급하며, 그의 솔로프레너를 위한 제품 아이디어와 AI 에이전트를 활용한 5단계 프레임워크를 소개합니다.

[02:44] 에이전트를 사용해 개발자, 마케터, PM을 대체하고 AI로 완전한 스타트업을 혼자서 구축하는 방법론을 설명합니다.

TypeScript 프로젝트 초기화 후 entropic(OpenAI 등) 모델 패키지 설치. generateText와 streamText 기능을 사용해 텍스트 응답을 실시간으로 스트리밍하고, 지연을 줄이는 방법을 시연한다.

[02:52] 제품 아이디어 연구부터 MVP 범위 설정, 그리고 Manus, Lindy, Cursor 같은 도구들을 활용한 빠른 시장 출시 전략을 다룹니다.

[03:05] PDF 리소스의 내용이 에이전트 소프트웨어 구축과 완벽하게 일치한다며, 솔로프레너들에게 이 무료 리소스 활용을 권장합니다.

[03:19] 본격적으로 X 플랫폼용 Cursor를 구축하는 방법을 시작하며, Vercel AI SDK를 사용할 것임을 소개합니다.

[03:36] Vercel AI SDK가 오픈소스 패키지로서 TypeScript로 AI 소프트웨어를 구축할 수 있게 해주며, Perplexity, V0 등 유명 회사들이 이를 사용한다고 설명합니다.

[03:44] Vercel AI SDK의 두 가지 주요 구성 요소인 Core와 UI를 소개하며, Core는 대형 언어 모델 설정을, UI는 프론트엔드 스트리밍을 담당한다고 설명합니다.

[03:52] AI SDK Core의 장점으로 다양한 언어 모델 제공업체 간 쉬운 교체 가능성과 에이전트 구축, 도구 연결 기능을 강조합니다.

[04:06] AI SDK UI를 통해 텍스트, JSON, 툴 호출 등 다양한 형태의 결과를 프론트엔드로 효율적으로 스트리밍할 수 있다고 설명합니다.

zod 기반 스키마를 정의해 JSON 구조 출력(Structured Output)을 스트리밍으로 처리한다. tool API를 추가하고 maxSteps 옵션만으로 에이전트 루프(도구 호출·결과 합산)를 손쉽게 구성하는 방법을 다룬다.

[04:21] PRD와 학습 콘텐츠 생성을 도와주는 Cursor 형태의 소프트웨어 구축을 목표로 하며, AI SDK Core부터 시작한다고 안내합니다.

[04:50] Vercel SDK의 다양한 기능들(텍스트 생성, 객체 생성, 툴 코드)을 소개하며, 실제 시연을 위해 새 프로젝트 설정을 시작합니다.

[05:09] AI SDK 설치와 기본 설정 방법을 설명합니다. Vercel AI SDK를 설치하고 main.ts 파일을 생성하여 Anthropic을 import하는 과정을 보여줍니다.

[05:23] 다양한 모델 제공업체 지원에 대해 설명합니다. Anthropic이나 OpenAI 등 원하는 제공업체의 패키지를 별도로 설치하기만 하면 됩니다.

[05:41] generateText 함수를 사용한 기본적인 텍스트 생성 방법을 시연합니다. 모델과 프롬프트를 전달하여 텍스트를 생성하는 answerQuestion 함수를 구현합니다.

[06:05] 환경 설정과 실행 방법을 안내합니다. .env 파일에 API 키를 추가하고 ts-node를 사용해 TypeScript 파일을 실행하는 방법을 설명합니다.

[06:38] 스트리밍 기능 구현 방법을 보여줍니다. generateText를 streamText로 변경하고 for 루프를 사용해 실시간으로 결과를 출력하는 방법을 설명합니다.

Chassеn UI 라이브러리로 Next.js 프로젝트를 생성하고, 페이지 컴포넌트에서 useChat 훅을 임포트해 프론트엔드 채팅 인터페이스를 세팅한다. API 엔드포인트와 연동해 에이전트 요청을 보낸다.

[07:05] 시스템 프롬프트 사용법과 구조화된 출력의 장점을 설명합니다. Python 대비 AI SDK의 구조화된 출력 스트리밍이 얼마나 쉬운지 강조합니다.

[07:27] streamObject 기능과 Zod 스키마 사용법을 소개합니다. TypeScript에서 Pydantic과 같은 역할을 하는 Zod를 설치하고 스키마를 정의하는 방법을 설명합니다.

[07:57] AI SDK의 구조화된 출력 기능을 설명하며, JSON 형태로 데이터를 생성하고 스트리밍하는 방법을 보여줍니다. 부분 객체 문자열과 부분 JSON을 통해 실시간으로 결과를 스트리밍할 수 있다고 설명합니다.

[08:19] AI SDK로 에이전트를 구축하는 간단한 방법을 소개합니다. 도구를 추가 속성으로 전달하고 weather 도구를 정의하는 과정을 보여주며, max steps 설정만으로 에이전트 런타임을 구현할 수 있다고 설명합니다.

[09:16] AI Builder Club의 심화 과정을 홍보하며, Next.js와 Chadcn UI를 사용한 웹 애플리케이션 구축으로 전환합니다. 프로젝트 설정과 초기 환경 구성을 진행합니다.

Next.js API 라우트(chat/route.ts)에서 streamText를 호출해 모델 응답과 도구 호출 이벤트를 스트리밍으로 반환. invocation 상태에 따라 프론트엔드에서 로딩·완료 UI를 표시하는 구조를 설명한다.

[09:49] 사용자가 에이전트와 채팅하고 결과를 캔버스에 표시하는 시스템 구조를 설명합니다. 웹 애플리케이션의 프론트엔드와 백엔드 구조를 소개하며, API 엔드포인트 설정을 통한 에이전트 백엔드 구현을 예고합니다.

[10:40] 백엔드 구조 설명과 프론트엔드에서 AI SDK UI 부분을 사용해 stream text 결과를 받아와 화면에 표시하는 방법을 소개합니다.

[10:50] API 엔드포인트 생성을 위한 폴더 구조를 설명하며, API 폴더 내에 chat 폴더를 만들고 route.ts 파일을 생성하는 표준적인 방법을 제시합니다.

[11:00] stream text의 반환 데이터 구조를 상세히 설명하며, raw content와 두 개의 invocation, 그리고 각각의 상태(partial, call, result)가 가지는 의미를 설명합니다.

[11:20] 데이터 구조 검증을 위한 인터페이스 생성과 에이전트에게 제공할 두 가지 도구(위치 가져오기, 날씨 가져오기)를 위한 모의 함수 생성 방법을 보여줍니다.

[11:45] TypeScript를 사용한 실제 API 엔드포인트 정의 방법과 JSON에서 특정 속성을 추출하는 문법, 그리고 stream text 호출 시 필요한 매개변수들을 설명합니다.

[12:10] 채팅 API 엔드포인트 완성 후 홈페이지에서 프론트엔드 구현을 시작하며, use client 지시어와 AI SDK react의 use chat 컴포넌트 사용법을 설명합니다.

하위 에이전트나 긴 실행 툴(generate PRD) 스트림을 전송하기 위해 createDataStreamResponse를 사용한다. dataStreamWriter로 텍스트 델타와 메타데이터를 전송하고, merge 기능으로 부모 에이전트 스트림과 합치는 방법을 보여준다.

[12:40] use chat 컴포넌트를 통해 최대 5단계 실행하는 자율 에이전트 설정과 반환받는 데이터들(message, input, setInput, handleSubmit)의 역할을 설명합니다.

[13:17] 펜 기능으로 에이전트에게 메시지를 보내고, 프론트엔드에서 입력 값을 설정하여 사용자 상호작용을 처리하는 방법을 설명합니다.

[13:39] 터미널에서 npm dev 실행하여 채팅 인터페이스를 테스트하고, 실제로 에이전트가 메시지에 응답하고 날씨 도구를 호출하는 모습을 보여줍니다.

[14:01] 기본적인 채팅 인터페이스 구축 예시를 보여주며, 도구 호출을 더 잘 렌더링하는 방법을 설명합니다. 도구 호출 상태에 따라 로딩 상태나 완료 결과를 다르게 표시합니다.

채팅 패널과 결과 뷰를 좌우 분할하고, 공유 state(현재 PRD 문서·메시지)를 정의해 실시간 스트리밍 데이터를 렌더링한다. Superbase 연계를 통해 결과를 DB에 저장하고 지속성을 유지하는 구조를 구상한다.

[14:40] 단순한 기능을 넘어서 에이전트가 하위 에이전트나 대형 언어 모델을 호출하는 경우, 실행 시간이 오래 걸릴 수 있어 결과를 스트리밍해야 하는 필요성을 설명합니다.

[15:16] Vercel AI SDK의 create data stream response 함수를 사용하여 여러 스트림을 병합하고 사용자 정의 데이터를 프론트엔드로 푸시하는 방법을 설명합니다.

[15:40] generate PRD 도구 실행 시 data stream writer를 사용하여 PDF 스트림의 각 청크를 처리하는 구체적인 구현 방법을 보여줍니다.

[15:55] 스트림 데이터 처리 방법을 설명하며, text delta를 감지해서 새로운 텍스트를 data stream writer로 전송하고, 메타데이터 추가의 중요성을 강조합니다.

[16:10] 텍스트 청크들을 결합하여 최종 PRD 콘텐츠를 생성하고, result를 데이터 스트림으로 병합하여 두 스트림을 연결하는 과정을 설명합니다.

[16:29] 프론트엔드로 데이터를 보내는 방법과 사용자 정의 데이터를 result의 data 속성에서 가져오는 방법, PRD display 함수를 통한 데이터 필터링과 그룹화 과정을 설명합니다.

[16:58] to-do 앱 PRD 생성 데모를 통해 툴 코어 응답을 프론트엔드로 스트리밍하는 실제 예시를 보여줍니다.

[17:16] 플레이그라운드/캔버스 구축의 필요성을 설명하며, 사용자가 에이전트 결과를 검토하고 협업할 수 있는 공간으로 간단한 텍스트 에디터를 제안합니다.

[17:26] 에이전트 채팅과 플레이그라운드 간의 데이터 통신 방법과 데이터베이스에 안전하게 데이터를 저장하는 방법에 대해 설명합니다.

[17:48] 상태(state) 개념을 소개하며, 단기 메모리로서 컴포넌트 간 데이터 공유의 중요성과 스트리밍 성능 향상을 위한 필요성을 설명합니다.

project/[id] 페이지에 chatPanel.tsx와 contentPanel.tsx를 생성해 코드 모듈화. useEffect 훅을 통해 message·data 변경 시 자동으로 state를 업데이트해 양쪽 패널 UI를 동기화한다.

[18:05] 애플리케이션 유지보수성을 위해 단일 page.tsx 파일에서 여러 컴포넌트로 코드를 재구성하는 리팩토링 계획을 제시합니다.

[18:27] 프로젝트를 분할 패널 레이아웃으로 재구조화하여 왼쪽에는 채팅 패널, 오른쪽에는 콘텐츠 패널을 배치하고 두 패널 간 상태 공유를 구현합니다.

[18:45] Cursor를 활용해 Next.js 프로젝트/[프로젝트 ID] 페이지 구조를 만들고, 채팅 패널과 콘텐츠 패널 컴포넌트를 생성합니다.

AI Builder Club 30일 챌린지, SaaS Launch Kit, GitHub 레포지토리 등 실전 스타트업 리소스를 안내하며 연속 강좌 참여를 독려한다.

[19:18] 새로운 애플리케이션 UI가 완성되어 projectData라는 공유 상태를 통해 채팅 패널에서 받은 스트리밍 데이터를 콘텐츠 패널로 전달할 수 있게 됩니다.

[19:50] useEffect를 활용한 상태 관리 시스템으로 메시지나 데이터 변경시 자동으로 UI가 업데이트되며, PRD 문서의 모든 청크를 통합하여 콘텐츠 패널에 표시합니다.

[20:43] 완성된 분할 뷰에서 투두 앱 PRD 생성을 요청하면 오른쪽 패널에서 실시간 스트리밍되며, 타임스탬프 기반으로 V1, V2 버전이 자동 생성됩니다.

[21:04] Vercel AI를 활용해 채팅과 플레이그라운드 기능을 모두 갖춘 에이전트 시스템 구축 방법을 완성했으며, AI Builder Club에서 더 자세한 단계별 가이드를 제공합니다.

[00:03] 여러분만의 커서를 어떻게 만들 수 있는지 보여드리겠습니다

[00:05] X용 에이전틱 소프트웨어로 여러분이 익숙한

[00:07] 특정 수직 영역에서 구체적인 작업을

[00:09] 완료할 수 있는 시스템 말이죠

[00:10] 2025년에 가장 흥미로운 것 중 하나는

[00:12] 수직적 에이전틱 소프트웨어가

[00:15] 가치를 창출하는 핵심이 될 거라는 점입니다

[00:16] AI 코딩은 실제 시장 적합성을 달성한

[00:19] 최초의 에이전트 활용 사례입니다

[00:21] 모든 AI 코딩 도구에서 엄청난 성장률을 보았지만

[00:24] 제가 믿는 것은 앞으로

[00:26] 다양한 수직 영역의 에이전트들이

[00:27] 향후 24개월 동안 구축될 것이라는 점입니다

[00:29] 여러분의 역량으로 슬라이스용 커서가

[00:32] 존재해야 한다고 말하고 있지만 아직 없죠

[00:34] 그러자 즉시 사람들이

[00:35] 프로토타입을 만들기 시작했습니다

[00:37] 이런 슬라이스용 커서 부분 말이죠

[00:39] 스프레드시트용 커서, 디자인용 커서,

[00:41] 비디오 편집용 커서도 있을 겁니다

[00:43] 전체 엔드투엔드 프로세스를 간소화하고

[00:46] 다양한 수직 에이전트들이 구축될 것입니다

[00:48] 특정 유형의 지식 작업과 깊이 통합되는

[00:49] 시스템들 말이죠

[00:52] 그래서 오늘 여러분께

[00:54] 이런 X용 커서

[00:55] 에이전틱 소프트웨어를 실제로 어떻게 구축할 수 있는지

[00:58] 보여드리고 싶습니다

[01:00] 커서나 젠가 소프트웨어를 어떻게 구축할까요?

[01:02] 가장 일반적이고 채택된 패턴은

[01:04] 다양한 도구와 어시스턴스에 접근할 수 있는

[01:06] 에이전트를 구축해야 한다는 것입니다

[01:08] 특정한 가치 있는

[01:09] 작업과 워크플로우를 완료할 수 있도록 말이죠

[01:11] 커서의 예를 들면 코드를 작성하고

[01:13] 새 파일을 생성하고 명령줄을 실행하고

[01:15] 심지어 Git 푸시나 최신 문서 검색까지

[01:17] 할 수 있습니다

[01:19] 이것이 여러분이 구축해야 할 에이전트이고

[01:21] 다른 한편으로는

[01:22] 특별한 플레이그라운드나 캔버스가 필요합니다

[01:25] 사용자가 에이전트가 전달한 작업의

[01:27] 진행 상황을 검토하고 추적할 수 있도록

[01:29] 그리고 에이전트와 협업할 수 있도록 도와주는 것이죠

[01:31] 다시 커서를 예로 들면 이 플레이그라운드 캔버스는

[01:34] 사용자가 결과를 볼 수 있는 코드 에디터입니다

[01:36] 결과를 보고 원한다면

[01:38] 변경사항을 가할 수도 있고

[01:40] 왼쪽의 모든 컨텍스트가

[01:42] 에이전트 채팅으로 자동으로 전달됩니다

[01:44] 따라서 에이전트는 항상

[01:46] 사용자가 여기서 보고 있는 것에 대한 맥락을 가지게 되고

[01:48] 커서 윈드서프부터 구글 스티치

[01:50] UI 생성 플랫폼이나

[01:52] 비디오 편집용 커서를 만드는

[01:54] 클라바 같은 소프트웨어까지 많은 예시들이 있습니다

[01:56] 여전히 왼쪽에는

[01:58] 사용자가 AI와 상호작용할 수 있는 채팅 경험이 있고

[02:00] 오른쪽에는 사용자가 결과를 검토할 수 있는

[02:02] 최적의 UX를 디자인할 수 있습니다

[02:04] 저는 개인적으로

[02:06] X용 커서를 구축할 기회가

[02:08] 정말 많다고 믿습니다

[02:11] 글쓰기용 커서, 비디오 편집용 커서,

[02:13] 심지어 PRD 계획용 커서까지 있을 수 있습니다

[02:15] 그래서 오늘은 이런 X용 커서

[02:17] 시스템을 어떻게 구축하는지 보여드리겠습니다

[02:19] 하지만 본격적으로 들어가기 전에

[02:21] AI 스타트업을 빠르고 예산 내에서

[02:23] 구축하는 것에 진지한 1인 기업가라면

[02:26] 확인해야 할 엄청나게 좋은 무료 리소스가 있습니다

[02:28] 그렉 아이젠버그의

[02:29] '500달러 미만으로 3시간 만에 AI 스타트업 구축하기'

[02:31] 라는 자료입니다. 그렉 아이젠버그를 모르신다면

[02:34] 제가 작년에 그와 함께한 팟캐스트에서

[02:36] 작년에 그와 함께 팟캐스트를 진행하면서 제 AI 코딩 워크플로우를 선보였는데

[02:38] 그는 항상 솔로프레너로서 어떤 제품을 만들어야 할지에 대한 훌륭한 아이디어를 가지고 있었습니다

[02:40] 이 무료 리소스에서 그는 실제로 에이전트를 사용해서

[02:42] 개발자, 마케터, PM을 대체하는

[02:44] 5단계 프레임워크를 단계별로 안내해드립니다

[02:47] 말 그대로 AI로 완전한 스타트업을 혼자서 구축하는 것이죠

[02:49] 그는 올바른 제품 아이디어를 찾기 위해 연구하고

[02:52] 찾는 플랫폼과 장소들에 대해 이야기하며

[02:54] MVP, 즉 최소 실행 가능한 제품의 범위를 정하는

[02:56] 그만의 구체적인 프로세스를 공유합니다

[02:58] Manus, Lindy, 그리고 Cursor 같은 도구들을 사용해서

[03:00] 아이디어를 가능한 한 빠르게 시장에 출시하는 방법과

[03:02] 바이브 마케팅을 하는 비밀 노하우까지 말이죠

[03:05] 이 PDF의 모든 내용은 제가 보여드릴 에이전트 소프트웨어

[03:07] 구축 방법과 완벽하게 일치합니다

[03:09] AI 에이전트로 제품을 빠르게 구축하고

[03:12] 스마트하게 출시하려는 솔로프레너라면

[03:13] 반드시 이 무료 리소스를 확인해보세요

[03:16] 아래 설명란에 링크를 넣어두었으니

[03:18] 이 훌륭한 리소스를 무료로 받아보세요

[03:19] 이제 더 이상 지체하지 말고

[03:21] X 플랫폼용 Cursor를 구축하는 방법을 알아보겠습니다

[03:23] 전체 에이전트 시스템을 Vercel AI SDK로 구축할 예정입니다

[03:25] Vercel AI SDK를 모르신다면

[03:26] 이는 Vercel에서 만든 오픈소스 패키지로

[03:29] TypeScript로 백엔드와 프론트엔드를 포함한

[03:31] AI 소프트웨어를 구축할 수 있게 해줍니다

[03:33] Perplexity, V0 같은 많은 회사들이

[03:35] AI SDK를 기반으로 구축되었습니다

[03:36] 따라서 프로덕션 환경에서 사용할 수 있고 설정도 매우 간단합니다

[03:39] TypeScript에 익숙하지 않으셔도 걱정하지 마세요

[03:42] 단계별로 안내해드리겠습니다

[03:44] Vercel AI SDK는 두 가지 주요 부분으로 구성됩니다

[03:46] 하나는 AI 코어 또는 대형 언어 모델을 설정할 수 있는 Core이고

[03:47] 다른 하나는 결과를 프론트엔드로 매우 쉽게 스트리밍할 수 있는 UI입니다

[03:50] AI SDK Core를 사용하면 다양한 대형 언어 모델

[03:52] 제공업체에 연결할 수 있습니다

[03:54] 전통적으로 각 제공업체는 고유한 구문을 가지고 있지만

[03:55] AI SDK Core를 사용하면 코드베이스의

[03:57] 기본 로직을 변경하지 않고도 다양한 모델을 교체할 수 있습니다

[03:59] 이를 통해 다양한 모델을 훨씬 쉽게 실험할 수 있고

[04:02] 에이전트를 구축하고 다양한 도구와

[04:04] MCP를 연결하는 방법도 제공합니다

[04:06] AI SDK Core 외에도 AI SDK UI도 있습니다

[04:08] 이를 통해 텍스트든 JSON과 같은 구조화된 출력이든

[04:10] 툴 호출이든 상관없이

[04:11] 프론트엔드로 결과를 매우 효율적으로 스트리밍할 수 있습니다

[04:13] 따라서 프로덕션 레벨의 에이전트 애플리케이션을 구축할 수 있습니다

[04:15] 두 부분 모두 다루겠습니다

[04:17] 마지막에는 PRD와 학습 콘텐츠 생성을 도와주는

[04:19] Cursor 형태의 소프트웨어를 구축할 수 있게 될 것입니다

[04:21] 먼저 AI SDK Core를 살펴보겠습니다

[04:24] Vercel SDK는 텍스트 생성, 구조화된 출력인

[04:25] 객체 생성, 그리고 툴 코드 등

[04:27] 몇 가지 다른 기능을 제공하므로 에이전트로 매우 쉽게 변환할 수 있습니다

[04:30] 이를 시연하기 위해 Cursor에서 새 폴더를 열고

[04:33] pnpm init을 실행해서 먼저 TypeScript 프로젝트를 설정한 다음

[04:35] AI SDK를 설치하겠습니다

[04:37] pnpm install ai만 하면 됩니다

[04:39] 이렇게 하면 Vercel AI SDK가 추가되고

[04:41] main.ts 파일을 생성할 수 있습니다

[04:42] 사용하려면

[04:44] 다음과 같이 하면 됩니다

[04:46] Cursor 형태의 소프트웨어를 구축하는데

[04:47] PRD와 학습 콘텐츠 생성을 도와줄 것입니다

[04:50] 먼저 AI SDK Core를 다루겠습니다

[04:52] Vercel SDK는 텍스트 생성, 객체 생성 등

[04:54] 구조화된 출력과 툴 코드를 위한

[04:56] 몇 가지 다른 기능을 제공합니다

[04:58] 이를 에이전트로 매우 쉽게 변환할 수 있습니다

[05:00] 이를 시연하기 위해 Cursor에서 새 폴더를 열고

[05:02] pnpm init을 실행해서 TypeScript 프로젝트를 설정한 다음

[05:04] AI SDK를 설치하겠습니다

[05:07] pnpm install ai만 하면 됩니다

[05:09] AI SDK를 설치합니다. 단순히 pnpm install ai만 하면 됩니다.

[05:12] 이렇게 하면 Vercel AI SDK가 추가되고

[05:14] main.ts 파일을 만들 수 있습니다. 사용하려면

[05:17] AI SDK에서 Anthropic을 import하면 됩니다.

[05:20] 앞서 언급했듯이

[05:23] Vercel SDK는 다양한 모델 제공업체를 호출할 수 있습니다.

[05:25] 필요한 것은 단지

[05:26] 각기 다른 모델 제공업체마다 별도의 패키지를 설치하는 것뿐입니다.

[05:28] Anthropic을 사용한다면

[05:30] 터미널을 열고 pnpm install

[05:33] @ai-sdk/anthropic을 실행합니다.

[05:35] 하지만 OpenAI를 사용하고 싶다면

[05:37] 이것을 OpenAI로 변경하기만 하고

[05:39] 해당 패키지에서 import하면 됩니다.

[05:41] 그러면 여기에 모델 이름을 전달해서

[05:43] Anthropic 모델을 정의할 수 있습니다.

[05:45] 다음으로, AI 패키지에서 generateText를 import하고

[05:47] 프롬프트를 전달받는 answerQuestion 함수를 만들겠습니다.

[05:49] 이 함수 안에서

[05:51] generateText 함수를 호출하고

[05:53] 모델과 프롬프트를 전달합니다. 이것은

[05:55] text 속성이 포함된 객체를 반환하고

[05:57] 이것은 문자열입니다. 따라서

[06:00] text를 반환하고

[06:01] 마지막에 이 함수를 호출할 수 있습니다.

[06:03] 이게 거의 전부입니다.

[06:05] 빠르게 .env 파일을 만들고

[06:07] 여기에 Anthropic API 키를 추가하겠습니다.

[06:10] TypeScript에서 이 .env 파일을 import하고

[06:12] npm install dotenv도 실행하겠습니다.

[06:16] 이제 이 스크립트를 테스트 실행할 수 있습니다.

[06:18] ts-node main.ts를 실행하면

[06:22] 이 함수를 실행할 때

[06:23] 여기에 결과가 표시되는 것을 볼 수 있습니다.

[06:25] ts-node를 설치하지 않았다면

[06:27] 이것은 기본적으로 TypeScript 파일을

[06:29] JavaScript로 컴파일한 다음 JavaScript를 실행하는 패키지입니다.

[06:31] pnpm install @types/node typescript를 실행하면 됩니다.

[06:33] 이것이 AI SDK를 사용해서

[06:35] 텍스트를 생성하는 방법입니다. 앞서 언급했듯이

[06:38] 스트리밍을 매우 쉽게 할 수 있습니다.

[06:40] 따라서 이 generateText를

[06:42] streamText로 변경하기만 하면 되고

[06:44] text 대신 textStream을 사용하게 됩니다.

[06:47] 그러면 for 루프를 사용해서

[06:49] console.log로 결과를 출력할 수 있습니다.

[06:51] textStream은 계속해서

[06:54] 결과를 스트림으로 반환합니다. 이것을 실행하면

[06:56] 실제로 결과를

[06:58] 스트림으로 출력하는 것을 볼 수 있습니다.

[07:00] 따라서 지연 시간을 줄이고 훨씬 더 나은 UX를 제공할 수 있습니다.

[07:02] 이것이 기본적으로 AI SDK 코어입니다.

[07:05] 매우 간단합니다. 여기에 시스템 프롬프트도 전달할 수 있습니다.

[07:07] 예를 들어 '항상 모든 대문자로 반환하라'고 하면

[07:10] 다시 실행했을 때 다르게 동작할 것입니다.

[07:12] 한편, 정말 멋진 점 중 하나는

[07:14] 구조화된 출력을 할 수 있을 뿐만 아니라

[07:16] 구조화된 출력을 스트림할 수 있다는 것입니다.

[07:18] 이것은 Python으로 하기에는 꽤 어렵거나

[07:20] Python에서 쉬운 방법을 잘 모르겠지만

[07:23] Vercel AI SDK로는

[07:24] 매우 쉽습니다. 이것을

[07:27] streamObject로 변경할 수 있습니다.

[07:29] 우리가 해야 할 일은 단지

[07:31] schema라는 추가 속성을 전달하는 것뿐입니다.

[07:33] 만약 당신이

[07:35] Python에 익숙하다면 아마

[07:37] Pydantic 같은 것을 사용했을 텐데

[07:39] TypeScript에서는 Zod를 사용하게 됩니다.

[07:42] 터미널을 열고 pnpm install zod를 실행합니다.

[07:45] Zod는 기본적으로 TypeScript의 Pydantic입니다.

[07:49] z.object로 title은 z.string으로 하고

[07:51] title, author, date, content가 포함된

[07:53] 특정 스키마를 전달할 수 있습니다.

[07:55] 그리고 description도 추가할 수 있습니다. author에는

[07:57] 작성자는 항상 JSON으로 설명하면 되고, 구조화된 출력 개념에 익숙하다면

[08:00] 여기 설명과 제목이

[08:02] 기본적으로 에이전트가

[08:03] 이러한 데이터를 생성하는 방법을 이해하는 데 도움이 되고

[08:05] 텍스트 문자열 대신

[08:07] 부분 객체 문자열이라는 것을 포함합니다

[08:09] 기본적으로 부분 JSON이죠. 이것을 다시 실행하면

[08:11] JSON을 반환하고 여기서 결과를 스트리밍합니다

[08:16] 이렇게 구조화된 출력을 스트리밍할 수 있지만

[08:18] 그보다 더 중요한 것은

[08:19] AI SDK로 에이전트를 구축하는 것이 얼마나 쉬운지 보여드릴게요

[08:21] 이것을 string text로 바꾸고

[08:23] 도구를 추가 속성으로 전달할 수 있습니다

[08:25] AI SDK에서 다시 도구를 가져와서

[08:27] weather라는 도구를 정의할 수 있습니다

[08:30] 설명, 입력인 매개변수, 그리고 실행해야 할 함수를 제공하고

[08:33] 텍스트를 메시지뿐만 아니라

[08:35] 두 개의 호출을 포함한 응답으로 교체합니다

[08:37] 이것을 실행하면 어시스턴트가 도구를 호출한 메시지가 있고

[08:40] 도구도 실행되었음을 볼 수 있습니다

[08:43] 정말 멋진 점은

[08:45] max steps 속성을 전달하여 이것을 에이전트로 바꿀 수 있다는 것입니다

[08:47] max step을 10으로 설정하고 다시 실행하면

[08:50] 이번에는 실제로 for 루프를 실행합니다

[08:52] 두 개의 호출을 생성하고 도구를 호출한 다음

[08:54] 최종 메시지를 생성합니다

[08:56] 실제로 자체 에이전트 런타임을 구축할 필요가 없습니다

[08:58] 이 max steps만 전달하면 됩니다

[09:01] 이것이 AI SDK 코어의 기본입니다

[09:04] 더 깊이 배우고 싶다면

[09:05] AI 빌더 클럽에 프로덕션 준비된 대규모 언어 모델 애플리케이션을

[09:08] 구축하는 방법에 대한 전체 섹션이 있습니다

[09:10] 단계별로 심화 과정을 통해

[09:12] AI SDK를 사용하여 이러한 일반적인 소프트웨어를

[09:14] 효과적으로 구축하는 고급 팁들을 알려드립니다

[09:16] 관심이 있으시면 아래 설명에 링크를 넣어두었습니다

[09:19] 이제 AI SDK UI를 사용하여

[09:20] 이 채팅 에이전트로 웹 애플리케이션을

[09:22] 빠르게 구축하는 방법도 보여드리겠습니다

[09:24] 다시 Cursor를 열고

[09:26] 이번에는 Next.js 프로젝트를 설정해보겠습니다

[09:27] UI 라이브러리로 Chadcn을 사용하겠습니다

[09:29] npm dlx chadcn latest init을 실행할 수 있습니다

[09:32] Next.js를 선택하고 이름은 cursor

[09:34] 원하는 색상을 선택할 수 있고

[09:35] cursor cursor for x로 하겠습니다

[09:37] 특정 폴더에서 Cursor가 열립니다

[09:40] 이제 Next.js 앱이 설정된 것을 볼 수 있습니다

[09:42] 홈페이지는 이 page.tsx에 있습니다

[09:44] npm run dev를 실행하면

[09:46] 여기에 표시되는 페이지가 로드된 것을 볼 수 있습니다

[09:49] 이제 사용자가 에이전트와 채팅할 수 있는 시스템을 구축하고 싶다고 해봅시다

[09:53] 에이전트가 일부 작업을 수행하고

[09:55] 오른쪽 캔버스에 결과를 표시할 수 있도록 말이죠

[09:58] 구조는 모든 웹 애플리케이션에서

[10:00] 사용자를 위한 UI를 렌더링하는 프론트엔드와

[10:03] 실제 기능인 백엔드가 있습니다

[10:05] 먼저 API 엔드포인트를 설정할 것입니다

[10:07] stream text를 사용하여 에이전트 백엔드를 생성합니다

[10:09] 여기에 표시되는 것이 바로 이 page.tsx입니다

[10:13] 이 페이지가 로드된 것을 볼 수 있습니다

[10:16] 이제 사용자가 에이전트와 채팅할 수 있는

[10:17] 시스템을 구축하고 싶다고 해봅시다

[10:19] 에이전트가 일부 작업을 수행하고

[10:21] 오른쪽 캔버스에 결과를 표시할 것입니다

[10:23] 구조는 모든 웹 애플리케이션에서

[10:25] 사용자가 보는 UI를 렌더링하는 프론트엔드와

[10:27] 실제 기능인 백엔드가 있다는 것입니다

[10:29] 먼저 API 엔드포인트를 설정하여

[10:31] stream text를 사용해 에이전트 백엔드를 생성할 것입니다

[10:33] 여기 표시되는 것이 바로 이 page.tsx입니다

[10:35] 이 페이지가 로드된 것을 볼 수 있습니다

[10:38] 사용자가 에이전트와 채팅할 수 있는 시스템을 구축해봅시다

[10:40] 앞서 보여드린 것과 유사한 백엔드입니다

[10:41] 그리고 프론트엔드에서는

[10:43] AI SDK의 UI 부분을 어떻게 사용해서

[10:45] stream text에서 결과를 받아와

[10:48] 프론트엔드에 표시하는지 보여드리겠습니다

[10:50] 먼저 API 엔드포인트를 생성해야 합니다

[10:52] 일반적인 구조는 API 폴더를 만들고

[10:54] 그 안에 chat이라는 폴더를 만들어

[10:56] 그 안에 route.ts 파일을 생성하는 것입니다

[10:58] openai, zod, stream text 및 데이터 구조를 import합니다

[11:00] 앞서 보신 반환 값은 다음과 같습니다

[11:03] raw content와 두 개의 invocation을 포함합니다

[11:06] 두 invocation은 두 번의 호출을 보여주며

[11:08] 각각 다른 상태를 가집니다

[11:10] partial tool call은 여전히 tool call 입력을 생성 중임을 의미하고

[11:13] call은 tool call이 완료되어

[11:14] 실제로 함수를 실행 중임을 의미합니다

[11:16] result는 실제로 결과를 받아온 상태입니다

[11:18] 이를 사용해 함수에 대해 다양한 UI를 표시할 수 있습니다

[11:20] 여기서는 단순히 데이터 구조를 정의하는

[11:22] 인터페이스를 생성했습니다

[11:24] 이를 사용해 함수를 검증하고

[11:26] 올바른 데이터 구조가 전달되는지 확인할 수 있습니다

[11:29] 그리고 에이전트에게 두 가지 도구를 제공한다고 해봅시다

[11:30] 하나는 위치 가져오기, 다른 하나는 날씨 가져오기입니다

[11:32] 여기서는 시연을 위해

[11:34] 두 개의 모의 함수를 생성하겠습니다

[11:36] 위도와 경도를 정의하고

[11:38] 이는 TypeScript에서 타입을 정의하는 문법입니다

[11:40] 위도로 숫자가 실제로 전달되는지

[11:42] 자동으로 검증할 수 있습니다

[11:43] 날씨 가져오기도 마찬가지입니다

[11:45] 그다음 function post를 사용해

[11:47] 실제 엔드포인트를 정의할 수 있습니다

[11:49] 이 API 엔드포인트를 호출할 때

[11:51] 메시지를 전달할 것입니다

[11:52] 이는 TypeScript에서 JSON에서

[11:54] 특정 속성을 가져오는 문법입니다

[11:57] 이는 데이터를 가져와서

[11:59] 데이터 내의 특정 속성을 가져오는 것과 같습니다

[12:01] 그다음 모델, 시스템 프롬프트,

[12:02] 메시지, 그리고 도구를 전달하여

[12:05] stream text를 호출할 수 있습니다

[12:07] 이는 앞서 보여드린 것과 유사합니다

[12:09] 그리고 결과를 data stream result로 반환합니다

[12:11] 여기서 메시지에 대한 타입 검사를 추가하는 것을 깜빡했네요

[12:13] 이것이 채팅을 위한 API 엔드포인트입니다

[12:15] 그다음 홈페이지로 가서

[12:18] 이것을 교체해보겠습니다

[12:20] 먼저 use client를 사용해

[12:21] 이것이 프론트엔드 클라이언트 컴포넌트임을 나타내겠습니다

[12:24] TypeScript는 기본적으로 항상 서버 사이드이기 때문입니다

[12:26] 그다음 AI SDK react에서

[12:29] use chat을 import합니다

[12:31] 이 use chat은 API를 전달하여

[12:33] 결과를 스트리밍할 수 있게 해주는 컴포넌트입니다

[12:36] 즉, 채팅 API 엔드포인트로

[12:38] 요청을 보낸다는 의미입니다

[12:39] 그리고 max step을 5로 설정하면

[12:41] 최대 5단계를 실행하는 자율 에이전트가 됩니다

[12:44] 그리고 몇 가지를 반환받습니다

[12:48] message는 실제 메시지 히스토리로

[12:49] 프론트엔드에서 렌더링하는 데 사용할 데이터를 포함합니다

[12:52] input과 setInput은

[12:54] use chat이 반환하는 상태로

[12:57] 현재 채팅 입력에 어떤 값이 들어있는지를 나타냅니다

[13:00] 그리고 handleSubmit은

[13:02] 사용자가 엔터를 눌렀을 때

[13:05] 에이전트에게 새로운 메시지를 보내는 기능입니다

[13:06] 그다음 여기서 프론트엔드를 작성할 수 있습니다

[13:08] input의 값이

[13:10] 현재 채팅 입력에 있는 값의 타입을 나타냅니다

[13:13] 그리고

[13:14] use chat이 반환하는 상태입니다

[13:17] 펜은 기본적으로 에이전트에게 새로운 메시지를 보냅니다.

[13:19] 그러면 여기에 프론트엔드를 작성할 수 있습니다.

[13:22] 입력 값은 이 채팅의 입력이고

[13:25] 입력이 변경될 때마다 여기서 입력을 설정합니다.

[13:27] 사용자가 엔터를 누르면

[13:30] 에이전트를 트리거하고

[13:32] 최신 메시지를 전달합니다.

[13:34] 마지막으로 이 메시지 맵은

[13:36] 에이전트의 모든 메시지를 표시합니다.

[13:39] 이제 터미널을 열고

[13:41] npm dev를 실행해 보겠습니다.

[13:44] 터미널을 열면 UI에서

[13:46] 아무것도 볼 수 없지만

[13:48] 왼쪽 위 모서리에 이 입력이 보입니다.

[13:50] 안녕하세요를 입력하면

[13:52] 결과가 여기에 표시되는 것을 볼 수 있습니다.

[13:55] 날씨 확인을 요청하면

[13:57] 도구를 호출하고 결과를 반환합니다.

[13:59] 이것이 채팅 인터페이스를 구축하는 예시입니다.

[14:01] 물론 인터페이스가 정말 못생겼지만

[14:03] 이것은 쉬운 부분입니다.

[14:05] 도구 호출도 더 잘 렌더링할 수 있습니다.

[14:07] 빠른 버전으로 Cursor에게

[14:09] 메시지에 도구 호출이 있으면

[14:12] 이 도구 호출을

[14:14] 이 도구 호출 렌더 안에 표시하도록 했습니다.

[14:16] 각 도구 호출은 도구 이름,

[14:18] 도구 호출 ID, 상태, 인수를 가지며

[14:20] 입력과 결과도 포함됩니다.

[14:22] 상태가 부분 호출이나 호출이면

[14:25] 로딩 상태와 도구 이름

[14:28] 그리고 입력을 표시합니다.

[14:30] 하지만 이미 완료되었다면

[14:32] 입력과 결과를 표시합니다.

[14:34] 이제 꽤 좋은 채팅 에이전트 경험을 얻게 됩니다.

[14:36] 대화하고 작업을 완료하고

[14:38] 결과를 반환할 수 있습니다.

[14:40] 하지만 이들은 단순한 기능입니다.

[14:42] 종종 에이전트가

[14:44] 다른 하위 에이전트를 호출하거나

[14:47] 실제로 대형 언어 모델을 호출하는

[14:48] 도구를 사용하게 됩니다.

[14:50] 실행하는 데 시간이 걸릴 수 있습니다.

[14:52] 이런 경우에는 실제로

[14:54] 도구가 실행되는 동안

[14:56] 결과를 프론트엔드로 스트리밍하고 싶을 것입니다.

[14:58] 어떻게 할 수 있을까요?

[15:00] Vercel AI SDK는

[15:01] 기본적으로 이를 지원하지 않습니다.

[15:03] 약간의 업데이트가 필요하고

[15:05] 다음과 같이 할 수 있습니다.

[15:08] 여기서 다른 대형 언어 모델을

[15:09] 호출하는 generate prd 함수를 만들 수 있습니다.

[15:12] 에이전트가 이 도구를 호출하면

[15:14] 이 스트림 텍스트는 어디로도 가지 않습니다.

[15:16] 필요한 것은 이 create data

[15:18] stream response 함수입니다.

[15:20] Vercel AI SDK에서 제공하는 것으로

[15:22] 여러 다른 스트림을 병합하고

[15:24] 사용자 정의 데이터를

[15:26] 프론트엔드로 푸시할 수 있게 해줍니다.

[15:28] 이 엔드포인트에서는

[15:30] stream text를 직접 호출하는 대신

[15:32] 이 create data stream response를 반환합니다.

[15:34] 이 함수 안에서는

[15:36] execute 함수를 가지게 됩니다.

[15:38] 더 많은 데이터를 보낼 수 있게 해주는

[15:40] data stream writer가 있습니다.

[15:42] generate PRD라는 도구가 있다고 하면

[15:44] 이 generate PRD 실행에서

[15:46] 앞서 정의한 generate PRD 함수를 호출하겠습니다.

[15:49] 이는 stream text 객체를 반환해야 합니다.

[15:51] 그런 다음 for 루프를 사용해

[15:53] PDF 스트림의 각 청크에 대해

[15:55] text delta와 같다면 새로운 텍스트를 받고 있다는 뜻이므로

[15:57] data stream writer.write로 데이터를 전송하여

[15:59] 새로운 text delta를 데이터 스트림으로 보내겠습니다

[16:01] 이렇게 하면 기본적으로 진행하면서 새로운 텍스트 데이터를 전송하는데

[16:04] 여기에 메타데이터를 더 추가하는 것을 권장합니다

[16:06] 그래야 이 데이터가 무엇에 관한 것인지 알 수 있거든요

[16:07] 그리고 모든 텍스트 청크를 합쳐서

[16:10] 최종 PRD 콘텐츠를 얻을 것입니다

[16:12] 마지막에는 result를 데이터 스트림으로 병합하는데

[16:14] 이 데이터 스트림 라이터를 사용해서 말이에요

[16:16] result는 부모 에이전트의 원본 스트림 텍스트이고

[16:19] merge into data stream은

[16:21] 두 데이터 스트림을 연결해줍니다

[16:24] 이것으로 기본적으로 어떤 데이터든

[16:26] 프론트엔드로 다시 보낼 수 있습니다

[16:29] 하지만 이런 데이터들은 메시지의 일부로 표시되지 않습니다

[16:31] result에서 data라는 새로운 속성을 가져와야 해요

[16:33] 여기에 엔드포인트에서 보낸

[16:35] 사용자 정의 데이터가 포함됩니다

[16:37] 우리의 경우 PRD display라는

[16:39] 새 함수를 만들 수 있습니다

[16:41] 여기서 PRD content 타입으로 모든 데이터를 필터링하고

[16:43] 서로 다른 툴 호출 ID를 기반으로

[16:45] 모든 콘텐츠를 그룹화할 것입니다

[16:47] 마지막에 모든 데이터 청크를 합쳐서

[16:49] 전체 콘텐츠를 표시하고

[16:51] 프론트엔드에서 렌더링하는 로직도 있습니다

[16:54] 간단한 데모를 보여드리겠습니다

[16:56] to-do 앱용 PRD 생성이라는 작업을 주면

[16:58] 이 툴을 기록하지만 여기에는

[17:00] 중첩된 호출의 결과를 스트리밍할 모의 데이터를 넣었습니다

[17:03] 이것이 툴 코어 응답을 프론트엔드로

[17:05] 스트리밍하는 방법의 예시입니다

[17:07] 에이전트 부분이 잘 작동하고 데이터를 스트리밍하므로

[17:10] 다음으로 플레이그라운드나 캔버스를 구축해서

[17:12] 사용자가 에이전트의 결과를 검토하고

[17:14] 에이전트와 협업할 공간을 만들어야 합니다

[17:16] 오른쪽에 플레이그라운드를 구현하려면

[17:18] 플레이그라운드용 UI 컴포넌트를 만들어야 합니다

[17:20] 우리의 경우 PRD 작성을 돕는

[17:22] 간단한 텍스트 에디터를 만들 수 있습니다

[17:24] 하지만 UI 자체 외에도

[17:26] 에이전트 채팅이 플레이그라운드로

[17:28] 데이터를 전달할 방법이 필요합니다

[17:29] 그래야 에이전트가 PRD 문서 같은 것을

[17:31] 생성하려고 할 때

[17:33] 안전하게 데이터베이스에 데이터를 생성할 수 있어요

[17:35] 다음에 페이지를 열면

[17:37] 이미 플레이그라운드에 표시되어 있겠죠

[17:39] 하지만 장기적인 지속적 데이터베이스와 별개로

[17:41] 상태라고 하는 것도 필요합니다

[17:44] 상태는 일종의 단기 메모리로서

[17:46] 서로 다른 컴포넌트 간이나 컴포넌트 내에서 공유됩니다

[17:48] 예를 들어, 지금 우리에게는

[17:50] current PRD doc이라는 상태와

[17:52] set current PRD doc이 있을 것입니다

[17:54] 이런 상태들은 컴포넌트들 간에 공유될 수 있어요

[17:56] 상태가 필요한 이유는

[17:57] 진행하면서 결과를 스트리밍하고 싶기 때문에

[18:00] 훨씬 빠르기 때문입니다

[18:01] 하지만 동시에 그것을 데이터베이스의

[18:03] PRD 문서와 대화 메시지에도 저장할 것입니다

[18:05] 이를 구현하려면 애플리케이션을 더 유지보수하기 쉽게 만들기 위해

[18:07] 모든 로직을 하나의 page.tsx 파일에 넣는 대신

[18:09] 먼저 이 페이지를 서로 다른

[18:11] 컴포넌트로 재구성하겠습니다

[18:13] 동시에 데이터베이스의 PRD 문서와

[18:15] 대화 메시지에도 저장할 것입니다

[18:18] 이를 구현하려면

[18:20] 애플리케이션을 더 유지보수하기 쉽게 만들기 위해

[18:21] 모든 로직을 하나의 page.tsx 파일에 넣는 대신

[18:23] 먼저 이 페이지를 서로 다른 컴포넌트로 재구성하겠습니다

[18:26] 컴포넌트로 재구성하겠습니다

[18:27] 컴포넌트들로 나누겠습니다. 분할된 패널 레이아웃을 가진

[18:29] 프로젝트 페이지가 있고, 현재 채팅 UI를

[18:32] 이 채팅 패널로 바꾸고 콘텐츠 패널을

[18:34] 오른쪽에 배치한 다음

[18:36] 두 패널 간에 공유할 상태를 구현하고

[18:38] 마지막에는 백엔드 설정을 위해

[18:40] Supabase에 연결하겠습니다.

[18:42] 이 UI 재구조화는 요구사항이

[18:43] 이미 꽤 명확합니다.

[18:45] 제가 할 일은 Cursor에게

[18:47] 요청하는 것입니다. 프롬프트를 작성하겠습니다.

[18:48] 이제 UI 재구조화를 해봅시다.

[18:50] 프로젝트/[프로젝트 ID] 페이지를 만들고 싶습니다.

[18:53] 이는 Next.js의 문법으로

[18:55] URL이 프로젝트/아이디 형태가 되고

[18:58] 프로젝트 ID 페이지 안에는 분할 뷰가 있어서

[19:02] 왼쪽은 채팅, 오른쪽은

[19:04] 생성된 PRD 문서를 보여주는

[19:06] 콘텐츠 패널이고, 채팅 패널 컴포넌트와

[19:08] 콘텐츠 패널 컴포넌트를 만들고

[19:10] 마지막에는 채팅 패널과

[19:12] 콘텐츠 패널 간에 공유되는 상태를 만들어서

[19:14] 데이터 결과를 콘텐츠 패널로

[19:16] 스트리밍할 수 있도록 하겠습니다.

[19:18] 트리거하겠습니다. 이제 두 개의 서로 다른

[19:20] 컴포넌트를 가진 새로운 애플리케이션 UI가 있습니다.

[19:22] 왼쪽은 채팅, 오른쪽은

[19:24] 문서이고, 이 [프로젝트 ID] 폴더가

[19:26] 생성되었고 여기에는 projectData라는

[19:30] 공유 상태가 있습니다. 상태는

[19:31] 단기 데이터베이스나 단기 메모리로

[19:34] 생각할 수 있습니다. 상태가 변경될 때마다

[19:36] UI가 다시 렌더링되도록 트리거됩니다.

[19:38] 보통 쌍으로 제공되어

[19:40] 상태 데이터와 상태 데이터를 설정하는

[19:42] 함수를 정의합니다. 여기서는

[19:44] setMessageData 함수와 함께

[19:46] projectData를 정의하고

[19:48] 로딩 상태도 있습니다. 그런 다음 이 setData를

[19:50] 채팅 패널에 전달해서 채팅 패널이

[19:53] API 엔드포인트로부터 추가적인 스트리밍 데이터를

[19:55] 받을 때 콘텐츠 패널에서

[19:57] 렌더링에 사용할 projectData를

[19:59] 설정할 수 있습니다.

[20:01] 이제 채팅 패널 안으로 들어가면

[20:03] 도구 응답 메시지를 렌더링하는

[20:05] 함수들이 여전히 있고

[20:07] 실제 채팅 패널 함수는 프로젝트 ID와

[20:09] setProjectData 함수를 받습니다.

[20:11] 그리고 이 useEffect를 사용합니다.

[20:13] useEffect는 일종의 이벤트 리스너로

[20:16] 생각할 수 있습니다. 여기에 넣은

[20:18] 데이터들을 항상 모니터링합니다.

[20:20] 메시지 길이나 데이터 길이가 변경되거나

[20:22] 로딩 상태가 변경될 때마다

[20:25] 여기서 정의한 함수 목록을

[20:27] 트리거합니다. 기본적으로

[20:28] 메시지나 데이터가 변경될 때마다

[20:30] projectData를 다시 설정하고

[20:32] 나머지는 이전과 비슷합니다.

[20:34] 콘텐츠 패널 안에서는

[20:36] PRD 표시를 만들어서

[20:38] PRD 문서의 모든 청크를 하나로 합치고

[20:41] 이 콘텐츠 패널에 표시합니다.

[20:43] 이제 분할 뷰가 있습니다.

[20:45] 투두 앱에 대한 PRD를

[20:47] 생성해달라고 요청할 수 있습니다.

[20:49] 그러면 오른쪽에서

[20:51] 데이터 스트리밍이 시작됩니다.

[20:53] 해당 콘텐츠를 볼 수 있고

[20:55] 타임스탬프를 기반으로 V1, V2를 자동 생성합니다.

[20:57] 차트와 함께 다시 생성해달라고 요청하면

[21:00] 이제 V2로 전환되어 여기에

[21:02] 데이터 목록을 보여줍니다.

[21:04] 이렇게 Vercel AI를 사용해서

[21:07] 채팅 경험과 플레이그라운드를 모두 갖춘

[21:09] 에이전트 시스템을 만들 수 있습니다.

[21:10] 더 자세히 알고 싶다면 AI Builder Club의

[21:12] '프로덕션 런치 언어 모델

[21:14] 애플리케이션 구축' 섹션이 있습니다.

[21:16] 그리고 방금 추가한 Vercel AI SDK

[21:18] 섹션이 있는데, 제가 방금

[21:20] 보여드린 시스템을 구축하는 방법을

[21:22] 단계별로 자세히 설명합니다.

[21:24] GitHub 리포지토리도 첨부하겠습니다.

[21:26] 이를 Supabase 백엔드에 연결하고

[21:27] 사용자 OS와 사용량 기반 가격 책정을

[21:29] 설정하는 방법에 대해서는 다른 영상에서 다루겠습니다.

[21:32] 관심이 있으시면 아래 설명란의

[21:34] 링크를 클릭해서 AI Builder Club에

[21:35] 가입하세요. 여러분이 X용 Cursor

[21:37] 애플리케이션을 만들 수 있도록

[21:38] 30일 챌린지를 진행할 예정입니다.

[21:40] 한 달 동안 매주

[21:42] 이런 시스템을 구축하는 방법의

[21:43] 특정 부분들을 안내해드리겠습니다.

[21:46] 한편, 인증과 사용량 기반

[21:48] 드라이브가 내장된

[21:50] 새 버전의 SaaS 런치 키트도 만들었습니다.

[21:52] 따라서 에이전트 구축 자체에만

[21:53] 집중하실 수 있습니다.

[21:55] 이 영상이 도움이 되셨기를 바랍니다.

[21:57] 이런 유형의 콘텐츠를 더 보고 싶으시면

[21:59] 아래에 댓글을 남겨주세요. 감사합니다. 다음에 뵙겠습니다.