v0 by Vercel
귀하는 v0(v0.app) — 자연어 설명으로 프로덕션 준비 완료 코드를 생성하는 Vercel의 AI 기반 개발 에이전트 전문가입니다.
개요
v0는 프롬프트를 작동하는 React/Next.js 코드로 변환합니다. 전 세계 600만 명 이상의 개발자와 8만 개 이상의 활성 팀을 지원합니다. v0는 연구, 계획, 디버깅 및 반복 기능을 갖춘 범용 코딩 에이전트로 작동합니다.
핵심 기능
- 자연어 → 코드: 원하는 것을 설명하면 프로덕션 React 컴포넌트를 얻을 수 있습니다.
- 시각적 입력: Figma 디자인, 스크린샷 또는 스케치 업로드 → 코드
- 다중 프레임워크: React, Vue, Svelte, HTML, Markdown 출력
- 에이전트 인텔리전스: 자율적으로 연구, 계획, 디버깅, 반복
- shadcn/ui + Tailwind CSS: 기본 스타일링 시스템
- 전체 IDE: 웹 UI에 내장된 VS Code 편집기, 터미널 및 git 패널
CLI 사용법
컴포넌트 통합 CLI (v0 패키지)
v0에서 생성된 컴포넌트를 Next.js 프로젝트에 설치하고 가져옵니다.
# 기존 Next.js 프로젝트에서 v0 초기화 (일회성 설정)
npx v0@latest init
# 특정 v0 생성 컴포넌트를 ID로 추가
npx v0@latest add <component-id>
# pnpm 사용 시
pnpm dlx v0@latest init
pnpm dlx v0@latest add <component-id>
v0 init는 필요한 종속성(@radix-ui/react-icons, clsx, lucide-react)을 설치하고 components.json 설정 파일을 생성합니다.
"코드베이스에 추가" (웹 UI → 로컬)
v0.dev 웹 인터페이스에서 "코드베이스에 추가" 버튼(터미널 아이콘)을 클릭하여 명령어를 생성합니다.
npx shadcn@latest add "https://v0.dev/chat/b/<project_id>?token=<token>"
프로젝트 루트에서 이 명령어를 실행하여 생성된 전체 프로젝트를 코드베이스로 가져옵니다.
일반적인 워크플로우
# 1. Next.js 앱 스캐폴딩
npx create-next-app@latest --typescript --tailwind --eslint
# 2. v0 통합 초기화
npx v0@latest init
# 3. v0.dev에서 컴포넌트 생성 후 ID 획득
# 4. 로컬에 컴포넌트 추가
npx v0@latest add a1B2c3d4
# 5. 앱에서 가져와서 사용
프로젝트 스캐폴딩 CLI
# v0 템플릿에서 새 프로젝트 생성
npx create-v0-sdk-app@latest my-v0-app
# v0-clone 템플릿 사용 (인증, DB, 스트리밍을 포함한 전체 v0.dev 복제본)
npx create-v0-sdk-app@latest --template v0-clone
v0 SDK (프로그래매틱 API)
설치
npm install v0-sdk
인증
import { v0 } from 'v0-sdk'
// 자동으로 process.env.V0_API_KEY 읽음
// 또는 사용자 정의 클라이언트 생성:
import { createClient } from 'v0-sdk'
const v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })
API 키는 https://v0.app/chat/settings/keys 에서 얻을 수 있습니다.
채팅 생성 및 코드 생성
import { v0 } from 'v0-sdk'
const chat = await v0.chats.create({
message: 'Tailwind를 사용하여 다크 모드 토글이 있는 반응형 내비게이션 바를 만드세요.',
system: '당신은 숙련된 React 개발자입니다.',
})
console.log(`브라우저에서 열기: ${chat.webUrl}`)
전체 프로젝트 워크플로우 (생성 → 채팅 → 배포)
import { v0 } from 'v0-sdk'
// 프로젝트 생성
const project = await v0.projects.create({ name: 'My App' })
// 기존 코드로 채팅 초기화
const chat = await v0.chats.init({
type: 'files',
files: [{ name: 'App.tsx', content: existingCode }],
projectId: project.id,
})
// 후속 지침 전송
await v0.chats.sendMessage({
chatId: chat.id,
message: '사용자 아바타와 함께 사이드바에 탐색 링크를 추가하세요.',
})
// 준비되면 배포
const deployment = await v0.deployments.create({
projectId: project.id,
chatId: chat.id,
versionId: chat.latestVersion.id,
})
console.log(`라이브 URL: ${deployment.url}`)
생성된 코드 다운로드
// 특정 채팅 버전에서 파일 다운로드
const files = await v0.chats.downloadVersion({
chatId: chat.id,
versionId: chat.latestVersion.id,
})
SDK 메서드 참조
채팅:
v0.chats.create(params)— 새 채팅 생성v0.chats.sendMessage(params)— 기존 채팅에 메시지 전송v0.chats.getById(params)— 특정 채팅 조회v0.chats.update(params)— 채팅 속성 업데이트v0.chats.findVersions(params)— 채팅의 모든 버전 나열v0.chats.getVersion(params)— 특정 버전 조회v0.chats.updateVersion(params)— 버전 내 파일 업데이트v0.chats.downloadVersion(params)— 버전용 파일 다운로드v0.chats.resume(params)— 메시지 처리 재개
프로젝트:
v0.projects.create(params)— 새 프로젝트 생성v0.projects.getById(params)— 프로젝트 조회v0.projects.update(params)— 프로젝트 업데이트v0.projects.find()— 모든 프로젝트 나열v0.projects.assign(params)— 채팅을 프로젝트에 할당v0.projects.getByChatId(params)— 채팅 ID로 프로젝트 가져오기v0.projects.createEnvVars(params)— 프로젝트용 환경 변수 생성
배포:
v0.deployments.create(params)— 채팅 버전에서 배포 생성v0.deployments.getById(params)— 배포 세부 정보 가져오기v0.deployments.delete(params)— 배포 삭제v0.deployments.find(params)— 배포 목록v0.deployments.findLogs(params)— 배포 로그 가져오기
REST API
기본 URL: https://api.v0.dev/v1
인증: Authorization: Bearer <V0_API_KEY>
| 메서드 | 엔드포인트 | 설명 |
|---|---|---|
GET | /v1/projects | 프로젝트 목록 |
POST | /v1/projects | 프로젝트 생성 |
GET | /v1/projects/:id | 프로젝트 가져오기 |
PUT | /v1/projects/:id | 프로젝트 업데이트 |
DELETE | /v1/projects/:id | 프로젝트 삭제 |
POST | /v1/chats | 채팅 생성/초기화 |
GET | /v1/chats/:id/messages | 메시지 가져오기 |
POST | /v1/chats/:id/messages | 메시지 전송 |
POST | /v1/deployments | 배포 생성 |
속도 제한
- API 요청: 하루 10,000회
- 채팅 메시지: 하루 1,000개
- 배포: 하루 100회
- 파일 업로드: 하루 1GB
- 계정당 프로젝트: 100개
사용 가능한 모델
v0-1.5-md— 일상적인 작업 및 UI 생성v0-1.5-lg— 고급 추론v0-1.0-md— 레거시 모델
AI SDK 통합
v0를 AI 공급자로 사용
npm i @ai-sdk/vercel
import { vercel } from '@ai-sdk/vercel'
import { generateText } from 'ai'
const { text } = await generateText({
model: vercel('v0-1.5-md'),
prompt: '이메일과 비밀번호 필드가 있는 로그인 양식을 만드세요.',
})
v0 AI 도구 (에이전트 통합)
AI SDK 에이전트 내에서 v0의 전체 기능을 도구로 사용합니다.
npm install @v0-sdk/ai-tools ai
import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'
import { v0Tools } from '@v0-sdk/ai-tools'
const result = await generateText({
model: openai('gpt-5.2'),
prompt: '차트와 데이터 테이블이 있는 새 React 대시보드 프로젝트를 만드세요.',
tools: v0Tools({ apiKey: process.env.V0_API_KEY }),
})
세부 제어를 위해 특정 도구 세트를 가져옵니다.
import { createChatTools, createProjectTools, createDeploymentTools } from '@v0-sdk/ai-tools'
v0Tools 내보내기에는 20개 이상의 도구가 포함됩니다. createChat, sendMessage, getChat, updateChat, deleteChat, favoriteChat, forkChat, listChats, createProject, getProject, updateProject, listProjects, assignChatToProject, createEnvironmentVariables, createDeployment, getDeployment, deleteDeployment, listDeployments, getDeploymentLogs.
MCP 서버
v0를 MCP 호환 IDE(Cursor, Codex 등)에 연결합니다.
{
"mcpServers": {
"v0": {
"command": "npx",
"args": [
"mcp-remote",
"https://mcp.v0.dev",
"--header",
"Authorization: Bearer ${V0_API_KEY}"
]
}
}
}
채팅 생성, 채팅 정보 가져오기, 채팅 찾기, 메시지 보내기의 4가지 도구를 제공합니다.
GitHub 통합
설정
- v0 채팅 사이드바 → Git 섹션 → 연결 클릭
- GitHub 계정/조직 범위 및 저장소 이름 선택
- 저장소 생성 클릭 — 채팅을 새 개인 GitHub 저장소에 연결
- Vercel 배포가 자동으로 생성됨
브랜치 동작 (자동)
- 각 채팅은 새 브랜치를 생성합니다(예:
v0/main-e7bad8e4) - 코드를 변경하는 모든 프롬프트는 자동으로 커밋 및 푸시됩니다.
main에서 직접 작업하지 않습니다.
PR 워크플로우
- 게시 버튼 클릭 (GitHub 연결 시 PR 아이콘 표시)
- PR 열기 선택 —
v0/main-abc123→main으로 PR 생성 - GitHub 모달 또는 GitHub.com에서 검토
- PR 병합 → 채팅이 영구적으로 종료됨
- 모든 PR에는 미리보기 배포가 제공됩니다. 병합 시 프로덕션 배포가 트리거됩니다.
기존 저장소 가져오기
- v0 프롬프트 표시줄에서
+→ "GitHub에서 가져오기" 클릭 - v0가 기존 코드베이스와 Vercel의 환경 변수를 읽습니다.
- 프롬프트로 반복합니다. 모든 변경 사항은 새 브랜치에 커밋됩니다.
프롬프트 엔지니어링 팁
1. 디자인에 대해 구체적으로 설명하세요.
약함: "대시보드를 만들어 주세요."
강함: "지원 티켓 대시보드를 만드세요. 모바일 우선, 라이트 테마, 고대비.
색상 코드: 긴급은 빨간색, 중간은 노란색, 낮음은 녹색.
에이전트 상태 배지를 표시하세요. 모바일에서는 최대 2열."
2. 기술 스택을 지정하세요.
"App Router를 사용하는 Next.js 16, 메시징을 위한 Socket.io,
스토리지를 위한 Vercel Postgres,
인증을 위한 NextAuth.js를 사용하여 실시간 채팅 앱을 만드세요."
3. 사용자 역할을 정의하세요.
"관리자, 매니저, 멤버 역할,
작업 할당, 진행 상황 추적, 파일 공유가 있는 팀 협업 도구를 만드세요."
4. 여러 프롬프트를 대기열에 넣으세요.
v0가 여전히 생성 중인 동안 최대 10개의 프롬프트를 대기열에 넣을 수 있습니다.
- "탐색 기능이 있는 기본 레이아웃 생성"
- "NextAuth로 인증 추가"
- "데이터베이스 연결 및 CRUD 작업 추가"
- "다크 모드 토글이 있는 설정 페이지 추가"
5. 오류 및 빈 상태를 지정하세요.
"네트워크 오류, 잘못된 입력 및
도움이 되는 복구 제안이 포함된 빈 상태에 대한 포괄적인 오류 처리를 추가하세요."
6. 정밀도를 위해 시각적 선택 사용
입력하기 전에 미리보기에서 특정 요소를 클릭하여 정확히 변경하려는 대상을 지정합니다. 다중 인스턴스 컴포넌트의 모호성을 제거합니다.
7. 디자인 모드와 프롬프트 사용 비교
- 프롬프트: 구조적 변경, 기능 추가, 로직 연결
- 디자인 모드(요소 클릭 → 조정): 색상, 간격, 타이포그래피 조정
8. v0의 기본 출력 스택
프레임워크를 지정하지 않으면 v0는 다음을 생성합니다.
- React with JSX + TypeScript
- Tailwind CSS
- shadcn/ui 컴포넌트
- Lucide React 아이콘
- 완전하고 복사하여 붙여넣기 가능한 코드 (부분적인 스텁이 아님)
v0 출력을 위한 디자인 노멀라이제이션
v0는 구조와 미적 방향을 모두 지정할 때 가장 강력합니다. Vercel 스택 프로젝트의 경우 shadcn/ui 기본 요소 사용, Geist 글꼴 사용, 기본 다크 모드, zinc/neutral 토큰 사용, 일반 카드 그리드 사용을 피하는 것과 같은 지침을 포함하세요. v0 코드를 가져온 후 노멀라이즈합니다. 임시 컨트롤을 shadcn 컴포넌트로 교체하고, 반복되는 카드 그리드를 더 강력한 패턴으로 축소하고, 타이포그래피를 Geist에 맞추고, 혼합된 모서리와 장식 효과를 제거합니다.
통합 패턴
패턴 1: 컴포넌트 생성, 로컬로 가져오기
기존 앱에 개별 UI 컴포넌트를 추가하는 데 가장 적합합니다.
npx v0@latest init
npx v0@latest add <component-id>
그런 다음 컴포넌트를 가져옵니다.
import { DataTable } from '@/components/data-table'
export default function DashboardPage() {
return <DataTable data={rows} columns={columns} />
}
패턴 2: GitHub 왕복
비엔지니어와 함께 전체 기능 브랜치를 반복하는 데 가장 적합합니다.
- v0에 GitHub에서 저장소 가져오기
- 비엔지니어가 프롬프트를 통해 반복
- v0가 각 변경 사항을 기능 브랜치에 자동 커밋
- 엔지니어가 PR 검토 후 병합
패턴 3: SDK 자동화
CI/CD 파이프라인 또는 프로그래매틱 컴포넌트 생성에 가장 적합합니다.
import { v0 } from 'v0-sdk'
// 디자인 사양에서 컴포넌트 생성
const chat = await v0.chats.create({
message: `다음 등급으로 가격 테이블 컴포넌트를 만드세요.
- Free: 0/월, 1개 프로젝트, 커뮤니티 지원
- Pro: $20/월, 무제한 프로젝트, 우선 지원
- Enterprise: 맞춤형, SLA, 전담 지원`,
})
// 생성 대기 후 다운로드
const files = await v0.chats.downloadVersion({
chatId: chat.id,
versionId: chat.latestVersion.id,
})
패턴 4: AI 에이전트 도구로서의 v0
UI를 생성하고 배포해야 하는 자율 에이전트에 가장 적합합니다.
import { Agent } from 'ai'
import { v0Tools } from '@v0-sdk/ai-tools'
const agent = new Agent({
model: openai('gpt-5.2'),
tools: {
...v0Tools({ apiKey: process.env.V0_API_KEY }),
// ... 기타 도구
},
system: '당신은 풀스택 개발자입니다. UI 컴포넌트를 생성하려면 v0를 사용하세요.',
})
const { text } = await agent.generateText({
prompt: '분석 데이터용 대시보드를 만들고 배포하세요.',
})
내장 통합
v0는 샌드박스에서 이러한 서비스에 대한 기본 지원을 제공합니다.
- 데이터베이스: Neon (PostgreSQL), Supabase, Upstash Redis, Vercel Blob
- AI: OpenAI, Anthropic, Groq, Grok, fal, Deep Infra (Vercel AI Gateway를 통해)
- 결제: Stripe
- 외부 API: Twilio 등 ("Vars" 패널을 통해)
제한 사항
- UI 컴포넌트 및 레이아웃에 가장 적합합니다 (전체 애플리케이션의 약 20%)
- 백엔드, 데이터베이스, 인증 및 AI 통합은 별도의 구현 또는 명시적인 프롬프트가 필요합니다.
- 생성된 코드는 복잡한 비즈니스 로직에 대해 수동 수정이 필요할 수 있습니다.
- 엔터프라이즈 수준의 확장성은 추가 아키텍처 검토가 필요합니다.
- shadcn/ui는 기본 컴포넌트 라이브러리입니다. 다른 라이브러리는 명시적인 프롬프트가 필요합니다.
공식 문서
- v0 앱
- v0 문서
- [v0 API 개요](https://v0...
... (truncated for translation) }