---
title: "UI with v0"
description: "Learn how Vercel v0 accelerates UI development for AI features. Generate React components (using Shadcn UI & Tailwind) directly from text prompts."
canonical_url: "https://vercel.com/academy/ai-sdk/ui-with-v0"
md_url: "https://vercel.com/academy/ai-sdk/ui-with-v0.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-03-10T17:04:46.204Z"
content_type: "lesson"
course: "ai-sdk"
course_title: "Builders Guide to the AI SDK"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# UI with v0

# \[Bonus] Supercharge UI with Vercel v0

You've learned how to interact with LLMs using the AI SDK. That's great, but your users need an excellent UI. This is where v0 comes in. v0 turns text prompts into well structured, fully styled React components in seconds. From basic prototypes to full-featured applications deployed to the web, v0 quickly brings your UI vision into reality.

Go from text prompt to polished UI components without CSS hell. Get slick interfaces for your AI features without design skills.

\*\*Note: Project Context\*\*

This uses [v0.app](https://v0.app) as an external tool. The same project setup
from earlier applies when integrating your fancy new components.

## What is Vercel v0?

v0 is a powerful application building agent that takes your natural language prompts and converts them into fully functioning deployable applications. Feed it a prompt, get back production-ready React code. It's trained on best practices for React, Tailwind and shadcn/ui.

\*\*Note: About shadcn/ui\*\*

You've been using shadcn/ui components like `Card` and `Button` in previous lessons. It's a popular component library that provides copy-and-paste React components built with Radix UI and Tailwind CSS. v0 generates components using this same system, so everything integrates seamlessly. Learn more at [ui.shadcn.com](https://ui.shadcn.com/).

v0 removes a lot of the initial pixel-pushing and CSS debugging, letting you focus on functionality.

## Generate a Component with v0

Let's build a card component to show that structured appointment data from the last lesson.

Head to [v0.app](https://v0.app) and try this prompt:

> Create a React card component using Tailwind CSS and shadcn/ui Card components. It should accept props: title (string), date (string), time (string, nullable), location (string, nullable). Display title prominently. Show date/time and location below, each with a simple icon (calendar, clock, map pin). Handle null values gracefully with placeholder text like 'Not specified'.

[Open in v0]()

## Iterating on Prompts

Small tweaks in prompts can mean big UI changes and much quicker turn around from idea to deployment:

**Weak Prompt:**

```
Create an appointment card.
```

**Strong Prompt:**

```
Create a calendar appointment card using shadcn/ui Card component, with a blue background, white text, rounded corners, and slight hover effect.  Use this schema:  export const appointmentSchema = z.object({
  title: z.string(),
  // Use nullable() for fields that might not be present
  startTime: z.string().nullable(),
  endTime: z.string().nullable(),
  attendees: z.array(z.string()).nullable(),
  location: z.string().nullable(),
  // Date is required
  date: z.string(),
})

```

Giving v0 specific details will result in more refined output that is closer to what we want. Otherwise we make the LLM guess, and the results reflect that.

**Give it a try yourself:**

Try this prompt at [v0.app](https://v0.app):

> Create a React card component using Tailwind CSS and shadcn/ui Card components. Props: title, date, time, location. Show title and details with icons.

[Open in v0]()

## Build and Integrate Your Own Component

Let's create a component specifically for displaying the structured data from our extraction lesson, then integrate it into your project.

### Step 1: Generate Your Component with v0

Use this prompt at [v0.app](https://v0.app):

> Create a SummaryCard React component using shadcn/ui Card components and Tailwind CSS.
>
> Props interface:
>
> - headline: string (main title, prominent display)
> - context: string (background info, smaller text)
> - discussionPoints: string (key topics, formatted as a list)
> - takeaways: string (action items, formatted as bullets)
>
> Design requirements:
>
> - Clean card layout with subtle border and shadow
> - Headline should be large and bold
> - Use icons from lucide-react for each section (MessageSquare for context, List for discussion, CheckCircle for takeaways)
> - Responsive design that works on mobile
> - Light background with good contrast

[Open in v0]()

### Step 2: Copy the Generated Component

After v0 generates your component:

1. **Copy the entire component code** from v0
2. **Note any dependencies** listed (usually shadcn components and icons)

### Step 3: Set Up Dependencies

Check what shadcn components you need and install them:

```bash
# Common components you might need (overwrite existing if prompted)
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add badge

# Install lucide-react
pnpm add lucide-react
```

\*\*Note: Overwriting Components\*\*

If prompted about existing components, choose **Yes** to overwrite. This ensures you have the latest versions that work best with v0-generated code.

### Step 4: Create the Component File

Create `components/SummaryCard.tsx` and paste your v0-generated code:

```typescript title="components/SummaryCard.tsx"
// TODO: Paste your v0-generated component code here
// Make sure to include all imports at the top

interface SummaryCardProps {
  headline: string;
  context: string;
  discussionPoints: string;
  takeaways: string;
}

export function SummaryCard({ headline, context, discussionPoints, takeaways }: SummaryCardProps) {
  // TODO: Paste the component JSX from v0 here
  return (
    <div>Your v0 component goes here</div>
  );
}
```

### Step 5: Test Integration

Replace the existing SummaryCard in your summarization page with your new v0-generated component:

```typescript title="app/(3-summarization)/summarization/page.tsx"
// Update the import to use your new component
import { SummaryCard } from '@/components/SummaryCard';

// The rest of your code remains the same
```

### Step 6: Verify It Works

1. **Run your dev server**: `pnpm dev`
2. **Navigate to**: `http://localhost:3000/summarization`
3. **Click "Summarize"** and see your custom v0 component in action!

\*\*Note: What You've Accomplished\*\*

You've now experienced the full v0 workflow:

1. **Prompt Engineering**: Crafted a specific prompt with requirements
2. **Component Generation**: Let v0 create professional React code
3. **Integration**: Added the component to your existing AI-powered app
4. **Testing**: Verified it works with real AI-generated data

This is exactly how you'd use v0 in production - quickly generate UI components and integrate them with your AI SDK features!

## Integrating v0 Code

The code v0 creates is ready to ship. You can often just cut and paste into your app. Here's how to use it:

1. **Copy Code:** Grab everything including imports
2. **Install Dependencies:** Often this means shadcn components, which are added like this:

```bash
# Example if Card
pnpm dlx shadcn@latest add card
```

3. **Create Component File:** Drop it in `components/GeneratedCard.tsx`
4. **Import & Use:** Pass your data to the new component

\*\*Warning: Common Gotchas\*\*

- **Missing Components:** Run shadcn CLI for any components in imports
- **Style Conflicts:** Global CSS might break things
- **Type Mismatches:** Tweak the props interface if needed

**Example Generated Code (Simplified, your code will vary):**

```typescript
// components/GeneratedCard.tsx
import { CalendarIcon, ClockIcon, MapPinIcon } from 'lucide-react' // Ensure lucide-react is installed

interface GeneratedCardProps {
	title: string
	date: string
	time?: string | null
	location?: string | null
}

export function GeneratedCard({ title, date, time, location }: GeneratedCardProps) {
	return (
		<Card>
			<CardHeader>
				<CardTitle>{title}</CardTitle>
			</CardHeader>
			<CardContent className="space-y-2 text-sm">
				<div className="flex items-center gap-2">
					<CalendarIcon className="size-4 text-muted-foreground" />
					<span>{date}</span>
					{time && (
						<>
							<ClockIcon className="size-4 text-muted-foreground ml-2" />
							<span>{time}</span>
						</>
					)}
					{!time && <span className="text-muted-foreground">(Time not specified)</span>}
				</div>
				<div className="flex items-center gap-2">
					<MapPinIcon className="size-4 text-muted-foreground" />
					<span>
						{location || <span className="text-muted-foreground">Location not specified</span>}
					</span>
				</div>
			</CardContent>
		</Card>
	)
}
```

Using it:

```typescript
// Example usage in a page component

export default function MyPage() {
	const appointmentData = {
		// Example data
		title: 'AI Sync Meeting',
		date: '2025-11-15',
		time: '14:00',
		location: 'Virtual',
	}

	return (
		<div>
			<h1>Upcoming Appointment</h1>
			<GeneratedCard {...appointmentData} />
		</div>
	)
}
```

With v0, you can:

- Create beautiful UIs for your AI outputs
- Iterate on design through text instead of CSS

## Key Takeaways

- **UI-as-Prompts:** Tell v0 what you want, get polished React components
- **Ship Faster:** Cut UI dev time by 80%+, focus on AI SDK for low-level heavy lifting
- **Dead Simple:** Copy, paste, add dependencies, import, done
- **Perfect for AI Results:** Quickly create cards/displays for your AI data

It's the speed combo: AI SDK handles the brains, v0 handles the looks. Cuts the UI boilerplate you are required to create by hand dramatically.

## Preview: What's Coming in Conversational AI

You've learned invisible AI techniques that work behind the scenes. Now it's time to build direct human-AI interaction that puts users in control!

**🚀 From Invisible to Interactive:**
The classification, summarization, and extraction patterns you've learned will power your conversational interfaces:

- **Smart routing**: Use classification to determine which tools a chatbot should call
- **Context summaries**: Automatically summarize long conversations for better AI memory
- **Form filling**: Extract structured data from natural language in chat interfaces

**💬 Professional Chat Interfaces:**

- Build streaming chatbots with `useChat` and `streamText`
- Transform basic UIs into professional interfaces with AI SDK Elements
- Handle tool calling so your AI can fetch real-time data and perform actions

**🛠️ Advanced AI Capabilities:**

- **System prompts**: Give your AI consistent personality and behavior
- **Tool integration**: Connect your chatbot to APIs, databases, and external services
- **Multi-step conversations**: Enable complex workflows with multiple tool calls
- **Generative UI**: Render dynamic React components based on AI responses

**🎯 The Complete Picture:**
By the end, you'll combine invisible AI (working behind the scenes) with conversational AI (direct interaction) to create powerful, user-friendly applications that feel magical to use.

## Now You're Ready to Build Something More Complex

You've seen the power of Invisible AI techniques. Now it's time for more direct human-AI interaction.

In the next section you will build a full-featured chat interface using the `useChat` hook from the AI SDK, complete with streaming responses, customizable behavior, tool-use, and dynamic UI components. This is the basic loop that you see in tools like Cursor, Claude, ChatGPT, and many other applications that bring the massive power of AI to users' fingertips.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)
