React Components Example

Explore different design themes and interactive components for rendering real-time AI responses. This showcase demonstrates the full capabilities of @v0-sdk/react components.

Features

• Multiple Design Themes: Elegant, Minimal, Neobrutalism, Terminal styles
• Streaming Responses: Real-time rendering of AI-generated content
• Interactive Components: Code blocks, thinking sections, task management
• Modern UI: Built with Next.js 15, React 19, and Tailwind CSS
• Responsive Design: Works across different screen sizes and devices

Design Themes

Elegant Theme

A sophisticated design with smooth animations and elegant typography.

Minimal Theme

Clean, distraction-free interface focusing on content clarity.

Neobrutalism Theme

Bold, high-contrast design with sharp edges and vibrant colors.

Terminal Theme

Developer-focused interface mimicking terminal aesthetics.

Streaming Theme

Optimized for real-time streaming content with live updates.

Key Components

StreamingMessage Component

import { StreamingMessage } from '@v0-sdk/react'

function ChatInterface() {
  return (
    <StreamingMessage
      message={streamingData}
      theme="elegant"
      onComplete={(result) => {
        console.log('Streaming complete:', result)
      }}
    />
  )
}

Code Block Component

import { CodeBlock } from '@v0-sdk/react'

function CodeDisplay() {
  return (
    <CodeBlock
      code={generatedCode}
      language="typescript"
      showLineNumbers
      copyable
    />
  )
}

Thinking Section Component

import { ThinkingSection } from '@v0-sdk/react'

function AIThinking() {
  return (
    <ThinkingSection thoughts={aiThoughts} isVisible={showThinking} animated />
  )
}

Getting Started

Prerequisites

• Node.js 22+
• pnpm (recommended) or npm
• v0 API key from v0.dev/chat/settings/keys

Installation

1. Navigate to the react example directory:

   cd examples/v0-sdk-react-example

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   export V0_API_KEY=your_api_key_here

4. Run the development server:

   pnpm dev

5. Open http://localhost:3000 in your browser

Usage Patterns

Basic Streaming

import { useStreamingChat } from '@v0-sdk/react'

function ChatApp() {
  const { messages, sendMessage, isLoading } = useStreamingChat({
    apiKey: process.env.V0_API_KEY,
  })

  return (
    <div>
      {messages.map((message, index) => (
        <StreamingMessage key={index} message={message} />
      ))}
    </div>
  )
}

Theme Customization

import { ThemeProvider } from '@v0-sdk/react'

function App() {
  return (
    <ThemeProvider theme="neobrutalism">
      <ChatInterface />
    </ThemeProvider>
  )
}

Custom Styling

import { StreamingMessage } from '@v0-sdk/react'

function CustomChat() {
  return (
    <StreamingMessage
      message={data}
      className="custom-message"
      theme={{
        primary: '#3b82f6',
        background: '#f8fafc',
        text: '#1e293b',
        accent: '#06b6d4',
      }}
    />
  )
}

Technologies Used

• Frontend Framework: Next.js 15 with App Router
• React Version: React 19
• Styling: Tailwind CSS with custom design systems
• UI Components: Custom components optimized for AI content
• Animations: Framer Motion for smooth interactions
• Code Highlighting: Syntax highlighting for code blocks

Environment Variables

Source Code

View the complete source code on GitHub: v0-sdk/examples/v0-sdk-react-example