e2:"ExplicitChatIdProvider" e3:I[903690,["$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69"],"$e2"] e4:I[838238,["$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69"],"SWRDataProvider"] e7:I[239654,["$2"],"IconMark"] e5:T2ff0,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarProvider, } from "@/components/ui/sidebar" import { Code } from "lucide-react" export default function DocsPage() { return (

v0 for VS Code

Overview

The v0 VS Code extension brings the power of v0's AI-assisted coding directly into your editor. This extension allows you to chat with v0, generate code, and seamlessly integrate AI-powered features into your development workflow.

Features

Chat Interface

Dual Modes: Switch between "Build" mode for code generation and "Ask" mode for questions
File Mentions: Reference files using @filename syntax for context-aware responses
Image Attachments: Attach images to provide visual context for your requests
Conversation History: Access your previous conversations with v0

Code Generation

Full-Stack Support: Generate complete components, pages, and functionality
Automatic Installation: Dependencies detected in generated code can be automatically installed
Code Formatting: Generated code can be automatically formatted with Prettier
Git Integration: Changes can be automatically committed to your repository

Project Templates

Quick Start: Begin with pre-built templates for common project types
Template Library: Choose from Next.js, AI chatbots, e-commerce, and more

Commands

v0: Send Message ( Cmd+Shift+V): Quick chat with v0 without opening the sidebar
v0: Set v0 API Key: Configure your API key
v0: Set Max Steps: Configure maximum continuation steps for AI responses
v0: Toggle Auto Commit: Enable/disable automatic Git commits
v0: Toggle Auto Format: Enable/disable automatic code formatting
v0: Toggle Auto Install Packages: Enable/disable automatic package installation
v0: Create v0.json Configuration: Create project-specific configuration

Configuration

The extension can be configured globally through VS Code settings or locally through a{" "} v0.json file in your project root:

                {`{
  "autoInstallPackages": true,
  "autoFormat": true,
  "autoCommit": false,
  "maxSteps": 5,
  "defaultMode": "build",
  "exclude": ["**/node_modules/**", "**/.git/**"],
  "include": []
}`}

Configuration Options

autoInstallPackages: Automatically install dependencies detected in generated code
autoFormat: Automatically format generated code with Prettier
autoCommit: Automatically commit changes to Git after code generation
maxSteps: Maximum number of continuation steps for AI responses
defaultMode: Default chat mode ("build" or "ask")
exclude: Patterns for files to exclude from context
include: Patterns for files to specifically include in context

Usage Tips

File Context: Use @filename to reference specific files in your prompts
Specific Requests: Be detailed in your requests for more accurate code generation
Project Structure: Initialize your project with a template for best results
Continuation: For complex generations, v0 will automatically continue if needed
Feedback Loop: Iterate on generated code by asking for specific modifications

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "v0 VS Code Extension Documentation", description: "Official documentation for the v0 VS Code extension. Learn how to use AI-assisted coding, generate code, and integrate v0 into your development workflow.", generator: "v0.app", keywords: ["v0", "VS Code", "extension", "AI", "code generation", "documentation", "Vercel"], authors: [{ name: "Vercel" }], creator: "Vercel", publisher: "Vercel", icons: { icon: "/icon.svg", }, openGraph: { title: "v0 VS Code Extension Documentation", description: "Official documentation for the v0 VS Code extension. Learn how to use AI-assisted coding, generate code, and integrate v0 into your development workflow.", type: "website", siteName: "v0 Documentation", }, twitter: { card: "summary_large_image", title: "v0 VS Code Extension Documentation", description: "Official documentation for the v0 VS Code extension. Learn how to use AI-assisted coding, generate code, and integrate v0 into your development workflow.", }, } export const viewport: Viewport = { themeColor: "#000000", width: "device-width", initialScale: 1, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } }dc:["$","$Le3",null,{"chatId":"haBF46hAQCX","children":["$","$Le4",null,{"data":{"@\"active-block\",\"haBF46hAQCX\",":{"id":"b_IsQN8YRhFk1","messageId":"9Miq5vXbA0lJh3IOLRO3R4itLYeGgsHv","source":"$e5","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Adding metadata","taskNameComplete":"Added metadata"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"haBF46hAQCX\",":false},"children":"$Le6"}]}] 2c:[["$","title","0",{"children":"V0 VS Code Extension - Apps & Games Templates - v0 by Vercel"}],["$","meta","1",{"name":"description","content":"Seamlessly integrate AI-powered code generation into your VS Code workflow. Chat with v0 to generate full-stack code, reference files and images for context, and automatically install and format dependencies."}],["$","link","2",{"rel":"manifest","href":"/manifest.json","crossOrigin":"$undefined"}],["$","link","3",{"rel":"canonical","href":"https://v0.app/templates/v0-vs-code-extension-MWutk9m33UT"}],["$","meta","4",{"property":"og:title","content":"V0 VS Code Extension - Apps & Games Templates - v0 by Vercel"}],["$","meta","5",{"property":"og:description","content":"Seamlessly integrate AI-powered code generation into your VS Code workflow. Chat with v0 to generate full-stack code, reference files and images for context, and automatically install and format dependencies."}],["$","meta","6",{"property":"og:image","content":"https://v0.app/chat/api/og/t/MWutk9m33UT"}],["$","meta","7",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","8",{"name":"twitter:title","content":"V0 VS Code Extension - Apps & Games Templates - v0 by Vercel"}],["$","meta","9",{"name":"twitter:description","content":"Seamlessly integrate AI-powered code generation into your VS Code workflow. Chat with v0 to generate full-stack code, reference files and images for context, and automatically install and format dependencies."}],["$","meta","10",{"name":"twitter:image","content":"https://v0.app/chat/api/og/t/MWutk9m33UT"}],["$","link","11",{"rel":"icon","href":"/assets/icon-light-32x32.png","media":"(prefers-color-scheme: light)","sizes":"32x32","type":"image/png"}],["$","link","12",{"rel":"icon","href":"/assets/icon-dark-32x32.png","media":"(prefers-color-scheme: dark)","sizes":"32x32","type":"image/png"}],["$","link","13",{"rel":"icon","href":"/assets/icon.svg","sizes":"32x32","type":"image/svg+xml"}],["$","link","14",{"rel":"apple-touch-icon","href":"/assets/apple-icon.png","type":"image/png"}],["$","$Le7","15",{}]] 73:null

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This

More from ctate

More Templates Like This