@v0-sdk/react

npm install @v0-sdk/react
# or
pnpm add @v0-sdk/react
# or
yarn add @v0-sdk/react

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

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

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

function Chat() {
  return (
    <StreamingMessage
      message={streamingData}
      theme="elegant"
      className="my-message"
      onComplete={(result) => {
        // Handle completion
      }}
      onError={(error) => {
        // Handle errors
      }}
    />
  )
}

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

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

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

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

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

function TaskProgress() {
  return (
    <TaskSection
      tasks={taskList}
      showProgress
      interactive
      onTaskComplete={(task) => {
        // Handle task completion
      }}
    />
  )
}

// Elegant - Sophisticated design
<StreamingMessage message={data} theme="elegant" />

// Minimal - Clean, distraction-free
<StreamingMessage message={data} theme="minimal" />

// Neobrutalism - Bold, high-contrast
<StreamingMessage message={data} theme="neobrutalism" />

// Terminal - Developer-focused
<StreamingMessage message={data} theme="terminal" />

const customTheme = {
  primary: '#3b82f6',
  background: '#f8fafc',
  text: '#1e293b',
  accent: '#06b6d4',
  border: '#e2e8f0',
}

<StreamingMessage
  message={data}
  theme={customTheme}
/>

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

function ChatApp() {
  const { messages, sendMessage, isLoading, error, clearMessages } =
    useStreamingChat({
      apiKey: process.env.V0_API_KEY,
      onMessage: (message) => {
        console.log('New message:', message)
      },
    })

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

      <button onClick={() => sendMessage('Hello!')}>Send Message</button>
    </div>
  )
}

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

function CustomCodeBlock({ code, language }) {
  const { highlightedCode, isLoading } = useCodeHighlight({
    code,
    language,
    theme: 'github-dark',
  })

  if (isLoading) return <div>Loading...</div>

  return <pre dangerouslySetInnerHTML={{ __html: highlightedCode }} />
}

:root {
  --v0-primary: #3b82f6;
  --v0-background: #ffffff;
  --v0-text: #1e293b;
  --v0-border: #e2e8f0;
  --v0-accent: #06b6d4;
}

.dark {
  --v0-primary: #60a5fa;
  --v0-background: #0f172a;
  --v0-text: #f1f5f9;
  --v0-border: #334155;
  --v0-accent: #22d3ee;
}

<StreamingMessage
  message={data}
  className="rounded-lg border border-gray-200 p-4 shadow-sm"
/>

import type {
  StreamingMessageProps,
  CodeBlockProps,
  ThinkingSectionProps,
  ChatMessage,
  StreamingState,
} from '@v0-sdk/react'

interface CustomChatProps {
  messages: ChatMessage[]
  onSendMessage: (message: string) => void
}

const CustomChat: React.FC<CustomChatProps> = ({ messages, onSendMessage }) => {
  // Component implementation
}