### Installation

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/copy-button.mdx

Instructions for installing the Copy Button component.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/copy-button.json
```

### Manual
1. Add the `Button` component to your project.
2. Copy and paste the following code into your project:
   - `components/ui/copy-button.tsx`
   - `hooks/use-copy-to-clipboard.ts`
3. Update the import paths to match your project setup.
```

--------------------------------

### Installation

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/file-preview.mdx

Instructions for installing the FilePreview component using CLI or manual steps.

```APIDOC
## Installation

### CLI Installation
```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/file-preview.json
```

### Manual Installation
1. Install the required dependencies:
   ```bash
   npm install framer-motion@11
   ```
2. Copy and paste the component code into your project.
3. Update the import paths to match your project setup.
```

--------------------------------

### Install Copy Button via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/copy-button.mdx

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/copy-button.json
```

--------------------------------

### Install FilePreview Manually

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/file-preview.mdx

Install the required framer-motion dependency before manually adding the component code.

```bash
npm install framer-motion@11
```

--------------------------------

### Usage Example

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/copy-button.mdx

Example of how to use the Copy Button component in your application.

```APIDOC
## Usage

```tsx
import { CopyButton } from "@/components/ui/copy-button"

export function Demo() {
  return (
    <CopyButton
      content="Text to be copied"
      copyMessage="Copied to clipboard!"
    />
  )
}
```
```

--------------------------------

### Install MessageInput via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Use the shadcn CLI to automatically add the component to your project.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-input.json
```

--------------------------------

### Install Manual Dependencies

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Install the required peer dependencies for the component manually.

```bash
npm install framer-motion@11 remeda@2
```

--------------------------------

### Install Audio Visualizer via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/audio-visualizer.mdx

Use this command to add the AudioVisualizer component to your project using the CLI.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/audio-visualizer.json
```

--------------------------------

### Next.js API Route for Chat Handling

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

This example demonstrates setting up a Next.js API route to handle chat requests. It utilizes the Vercel AI SDK for streaming responses and includes tool support for weather lookups and calculations. Ensure necessary SDK packages are installed.

```typescript
// app/api/chat/route.ts
import { groq } from "@ai-sdk/groq"
import { openai } from "@ai-sdk/openai"
import { convertToCoreMessages, streamText, tool } from "ai"
import { z } from "zod"

export const maxDuration = 30

export async function POST(req: Request) {
  const { messages } = await req.json()

  const result = streamText({
    model: openai("gpt-4o"), // or groq("llama-3.3-70b-versatile")
    messages: [
      {
        role: "system",
        content: "You are a helpful AI assistant.",
      },
      ...convertToCoreMessages(messages),
    ],
    maxSteps: 3,
    tools: {
      weather: tool({
        description: "Look up the weather in a given location",
        parameters: z.object({
          location: z.string().describe("The location to get the weather for"),
        }),
        execute: async ({ location }) => {
          // Implement weather lookup
          return { temperature: 72, condition: "sunny", location }
        },
      }),
      calculator: tool({
        description: "Perform mathematical calculations",
        parameters: z.object({
          expression: z.string().describe("The math expression to evaluate"),
        }),
        execute: async ({ expression }) => {
          // Safe math evaluation
          return { result: eval(expression) }
        },
      }),
    },
  })

  return result.toDataStreamResponse({
    sendReasoning: true,
  })
}
```

--------------------------------

### Install FilePreview via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/file-preview.mdx

Use the shadcn CLI to automatically add the FilePreview component to your project.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/file-preview.json
```

--------------------------------

### Install Markdown Renderer Dependencies

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/markdown-renderer.mdx

Install the necessary npm packages for the Markdown Renderer component. Ensure you also have the CopyButton component installed.

```bash
npm install react-markdown remark-gfm shiki
```

--------------------------------

### Install Chatbot Components with shadcn CLI

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Use the shadcn CLI to install the main Chat component or individual components like ChatMessage, MessageInput, and MarkdownRenderer.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat-message.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-input.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-list.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/prompt-suggestions.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/markdown-renderer.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/copy-button.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/file-preview.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/typing-indicator.json
```

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/audio-visualizer.json
```

--------------------------------

### Install ChatMessage via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/chat-message.mdx

Use the shadcn CLI to add the ChatMessage component to your project.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat-message.json
```

--------------------------------

### Install Prompt Suggestions via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/prompt-suggestions.mdx

Use this command to add the PromptSuggestions component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/prompt-suggestions.json
```

--------------------------------

### Install MessageList via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-list.mdx

Use this command to add the MessageList component and its dependencies to your project using the shadcn CLI.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-list.json
```

--------------------------------

### Install Markdown Renderer via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/markdown-renderer.mdx

Use this command to add the Markdown Renderer component to your project using the shadcn CLI.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/markdown-renderer.json
```

--------------------------------

### Install Chat Component via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/chat.mdx

Use this command to add the Chat component and its dependencies to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat.json
```

--------------------------------

### Install Typing Indicator via CLI

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/typing-indicator.mdx

Use this command to add the Typing Indicator component to your project using the shadcn CLI.

```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/typing-indicator.json
```

--------------------------------

### Basic Chat Interface Usage

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/chat.mdx

Demonstrates the basic integration of the Chat component using the `useChat` hook from 'ai/react'. Ensure 'ai/react' is installed.

```tsx
"use client"

import { useChat } from "ai/react"

import { Chat } from "@/components/ui/chat"

export function ChatDemo() {
  const { messages, input, handleInputChange, handleSubmit, status, stop } = 
    useChat()

  const isLoading = status === "submitted" || status === "streaming"

  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
    />
  )
}
```

--------------------------------

### CopyButton Component Usage

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Demonstrates how to use the CopyButton component for copying text to the clipboard, with examples for basic usage and within a code block.

```tsx
import { CopyButton } from "@/components/ui/copy-button"

export function CopyButtonDemo() {
  return (
    <div className="space-y-4">
      {/* Basic copy button */}
      <CopyButton
        content="npm install shadcn-chatbot-kit"
        copyMessage="Command copied!"
      />

      {/* Copy button in a code block */}
      <div className="relative rounded-lg bg-zinc-950 p-4">
        <pre className="text-sm text-zinc-100">
          <code>npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat.json</code>
        </pre>
        <CopyButton
          content="npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat.json"
          copyMessage="Copied to clipboard!"
          className="absolute right-2 top-2"
        />
      </div>
    </div>
  )
}
```

--------------------------------

### Custom Chat Interface Implementation

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/chat.mdx

Builds a custom chat interface using individual components like `ChatContainer`, `ChatForm`, `ChatMessages`, `MessageInput`, `MessageList`, and `PromptSuggestions`. Requires manual setup of state management.

```tsx
"use client"

import { useChat } from "ai/react"

import { ChatContainer, ChatForm, ChatMessages, PromptSuggestions } from "@/components/ui/chat"
import { MessageInput } from "@/components/ui/message-input"
import { MessageList } from "@/components/ui/message-list"
import { PromptSuggestions } from "@/components/ui/prompt-suggestions"

export function CustomChat() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    append,
    status,
    stop,
  } = useChat()

  const isLoading = status === 'submitted' || status === 'streaming'
  const lastMessage = messages.at(-1)
  const isEmpty = messages.length === 0
  const isTyping = lastMessage?.role === "user"

  return (
    <ChatContainer>
      {isEmpty ? (
        <PromptSuggestions
          append={append}
          suggestions={["What is the capital of France?", "Tell me a joke"]}
        />
      ) : null}

      {!isEmpty ? (
        <ChatMessages>
          <MessageList messages={messages} isTyping={isTyping} />
        </ChatMessages>
      ) : null}

      <ChatForm
        className="mt-auto"
        isPending={isLoading || isTyping}
        handleSubmit={handleSubmit}
      >
        {({ files, setFiles }) => (
          <MessageInput
            value={input}
            onChange={handleInputChange}
            allowAttachments
            files={files}
            setFiles={setFiles}
            stop={stop}
            isGenerating={isLoading}
          />
        )}
      </ChatForm>
    </ChatContainer>
  )
}
```

--------------------------------

### Implement PromptSuggestions

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Renders clickable suggestions to help users initiate chat interactions.

```tsx
import { PromptSuggestions } from "@/components/ui/prompt-suggestions"

export function SuggestionsDemo() {
  const handleAppend = (message: { role: "user"; content: string }) => {
    console.log("User selected prompt:", message.content)
    // In a real app, this would append the message to the chat
  }

  return (
    <PromptSuggestions
      label="Try these prompts ✨"
      append={handleAppend}
      suggestions={[
        "Explain quantum computing in simple terms",
        "Write a poem about the ocean",
        "What's the recipe for chocolate chip cookies?",
        "Help me debug this JavaScript code",
      ]}
    />
  )
}
```

--------------------------------

### Implement MessageInput variants

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Demonstrates basic input, advanced input with file attachments and interruption, and voice transcription integration.

```tsx
import { useState } from "react"
import { MessageInput } from "@/components/ui/message-input"

// Basic message input
export function BasicInput() {
  const [value, setValue] = useState("")

  return (
    <MessageInput
      value={value}
      onChange={(e) => setValue(e.target.value)}
      isGenerating={false}
      placeholder="Type a message..."
    />
  )
}

// Input with file attachments and stop generation
export function AdvancedInput() {
  const [value, setValue] = useState("")
  const [files, setFiles] = useState<File[] | null>(null)
  const [isGenerating, setIsGenerating] = useState(false)

  const handleStop = () => {
    setIsGenerating(false)
    console.log("Generation stopped")
  }

  return (
    <MessageInput
      value={value}
      onChange={(e) => setValue(e.target.value)}
      isGenerating={isGenerating}
      stop={handleStop}
      allowAttachments={true}
      files={files}
      setFiles={setFiles}
      submitOnEnter={true}
      enableInterrupt={true}
      placeholder="Ask AI..."
    />
  )
}

// Input with voice transcription
export function VoiceInput() {
  const [value, setValue] = useState("")

  const transcribeAudio = async (blob: Blob): Promise<string> => {
    const formData = new FormData()
    formData.append("audio", blob)

    const response = await fetch("/api/transcribe", {
      method: "POST",
      body: formData,
    })

    const { text } = await response.json()
    return text
  }

  return (
    <MessageInput
      value={value}
      onChange={(e) => setValue(e.target.value)}
      isGenerating={false}
      transcribeAudio={transcribeAudio}
    />
  )
}
```

--------------------------------

### PromptSuggestions Component

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/prompt-suggestions.mdx

Documentation for the PromptSuggestions component props and usage.

```APIDOC
## PromptSuggestions Component

### Description
A component that displays a grid of predefined prompts that users can click to quickly start a conversation.

### Props
- **label** (string) - The heading text displayed above the suggestions.
- **append** ((message: { role: "user"; content: string }) => void) - Function called when a suggestion is clicked.
- **suggestions** (string[]) - Array of suggestion strings to display as buttons.

### Usage Example
```tsx
import { PromptSuggestions } from "@/components/ui/prompt-suggestions"

export function PromptSuggestionsDemo() {
  const append = (message: { role: "user"; content: string }) => {
    // Handle appending message
  }

  return (
    <PromptSuggestions
      label="Get started with some examples"
      append={append}
      suggestions={[
        "Tell me a joke",
        "What's the weather like today?",
        "Write a poem about cats",
      ]}
    />
  )
}
```
```

--------------------------------

### MessageList Component Usage

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-list.mdx

Demonstrates basic usage of the MessageList component with an array of messages and a typing indicator.

```APIDOC
## MessageList Component Usage

### Description
This example shows how to use the `MessageList` component to display a list of chat messages. It includes basic message data and a `isTyping` prop.

### Props
- `messages` (Message[]) - Required - Array of messages to display.
- `isTyping` (boolean) - Optional - Whether to show the typing indicator.

### Message Type
```typescript
interface Message {
  id: string
  role: "user" | "assistant"
  content: string
  createdAt?: Date
  attachments?: File[]
}
```

### Request Example
```tsx
import { MessageList } from "@/components/ui/message-list"

export function ChatDemo() {
  const messages = [
    {
      id: "1",
      role: "user",
      content: "Hello, how are you?",
    },
    {
      id: "2",
      role: "assistant",
      content: "I'm doing well, thank you for asking!",
    },
  ]

  return <MessageList messages={messages} isTyping={false} />
}
```
```

--------------------------------

### Integrate Chat Component with Vercel AI SDK

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Demonstrates how to use the main Chat component with the useChat hook from the Vercel AI SDK for a complete chat interface. Ensure you have the necessary hooks and components imported.

```tsx
"use client"

import { useChat } from "ai/react"
import { Chat } from "@/components/ui/chat"

export function ChatDemo() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    append,
    status,
    stop,
    setMessages,
  } = useChat()

  const isLoading = status === "submitted" || status === "streaming"

  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
      setMessages={setMessages}
      append={append}
      suggestions={[
        "Generate a tasty vegan lasagna recipe for 3 people.",
        "Generate a list of 5 questions for a frontend job interview.",
        "Who won the 2022 FIFA World Cup?",
      ]}
      onRateResponse={(messageId, rating) => {
        console.log(`Message ${messageId} rated: ${rating}`)
      }}
    />
  )
}
```

--------------------------------

### Audio Visualizer Configuration

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/audio-visualizer.mdx

Customize the audio visualization's appearance and behavior using these configuration constants. Adjust FFT size for resolution and smoothing for animation fluidity.

```tsx
const AUDIO_CONFIG = {
  FFT_SIZE: 512,
  SMOOTHING: 0.8,
  MIN_BAR_HEIGHT: 2,
  MIN_BAR_WIDTH: 2,
  BAR_SPACING: 1,
  COLOR: {
    MIN_INTENSITY: 100,
    MAX_INTENSITY: 255,
    INTENSITY_RANGE: 155,
  },
}
```

--------------------------------

### MessageList with Custom Message Options

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-list.mdx

Illustrates how to apply custom CSS classes to individual messages using the `messageOptions` prop.

```APIDOC
## MessageList with Custom Message Options

### Description
This example demonstrates how to customize the appearance of individual messages within the `MessageList` by providing a `messageOptions` object.

### Props
- `messages` (Message[]) - Required - Array of messages to display.
- `messageOptions` (AdditionalMessageOptions) - Optional - An object containing additional options to pass to each `ChatMessage` component.

### Request Example
```tsx
import { MessageList } from "@/components/ui/message-list"

export function ChatWithCustomOptions() {
  const messages = [
    {
      id: "1",
      role: "user",
      content: "Hello, how are you?",
    },
    {
      id: "2",
      role: "assistant",
      content: "I'm doing well, thank you for asking!",
    },
  ]
  return (
    <MessageList
      messages={messages}
      messageOptions={{
        className: "custom-message-class",
      }}
    />
  )
}
```
```

--------------------------------

### MessageList with Dynamic Message Options

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-list.mdx

Shows how to dynamically set message options based on message properties using a function with the `messageOptions` prop.

```APIDOC
## MessageList with Dynamic Message Options

### Description
This example shows how to dynamically apply options to each message based on its properties (e.g., role) by passing a function to the `messageOptions` prop.

### Props
- `messages` (Message[]) - Required - Array of messages to display.
- `messageOptions` ((message: Message) => AdditionalMessageOptions) - Optional - A function that receives a message object and returns additional options to pass to the `ChatMessage` component.

### Request Example
```tsx
import { MessageList } from "@/components/ui/message-list"

export function ChatWithDynamicOptions() {
  const messages = [
    {
      id: "1",
      role: "user",
      content: "Hello, how are you?",
    },
    {
      id: "2",
      role: "assistant",
      content: "I'm doing well, thank you for asking!",
    },
  ]
  return (
    <MessageList
      messages={messages}
      messageOptions={(message) => ({
        className:
          message.role === "user" ? "user-message" : "assistant-message",
      })}
    />
  )
}
```
```

--------------------------------

### AudioVisualizer Component

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/audio-visualizer.mdx

Documentation for the AudioVisualizer component.

```APIDOC
## AudioVisualizer Component

### Description
A real-time audio visualization component that provides visual feedback during voice recording by creating an animated frequency spectrum display that responds to audio input in real-time.

### Installation

#### CLI
```bash
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/audio-visualizer.json
```

#### Manual
Copy and paste the component code into your project and update import paths.

### Usage

```tsx
import { AudioVisualizer } from "@/components/ui/audio-visualizer"

export function VoiceRecorder() {
  return (
    <AudioVisualizer
      stream={audioStream}
      isRecording={isRecording}
      onClick={stopRecording}
    />
  )
}
```

### Props

#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
N/A

#### Props Table
| Prop          | Type          | Description                                                |
| ------------- | ------------- | ---------------------------------------------------------- |
| `stream`      | `MediaStream` | The audio stream to visualize                              |
| `isRecording` | `boolean`     | Whether the component should be actively visualizing audio |
| `onClick`     | `() => void`  | Callback function when the visualizer is clicked           |

### Implementation Details

The AudioVisualizer uses the Web Audio API to analyze the audio stream and create the visualization. Key configuration parameters include:

```tsx
const AUDIO_CONFIG = {
  FFT_SIZE: 512,
  SMOOTHING: 0.8,
  MIN_BAR_HEIGHT: 2,
  MIN_BAR_WIDTH: 2,
  BAR_SPACING: 1,
  COLOR: {
    MIN_INTENSITY: 100,
    MAX_INTENSITY: 255,
    INTENSITY_RANGE: 155,
  },
}
```

These parameters control:

- Frequency analysis resolution (`FFT_SIZE`)
- Animation smoothness (`SMOOTHING`)
- Visual bar dimensions and spacing
- Color intensity range for the visualization
```

--------------------------------

### Enable File Attachments

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Set allowAttachments to true and provide files and setFiles state to enable drag-and-drop file support.

```tsx
<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={false}
  allowAttachments
  files={files}
  setFiles={setFiles}
/>
```

--------------------------------

### Use FilePreview in React

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/file-preview.mdx

Import the FilePreview component and pass a File object to display the preview, with an optional onRemove callback.

```tsx
import { FilePreview } from "@/registry/default/ui/file-preview"

export function FilePreviewDemo() {
  const [file, setFile] = useState<File | null>(null)

  return (
    <div>
      {file && <FilePreview file={file} onRemove={() => setFile(null)} />}
    </div>
  )
}
```

--------------------------------

### Implement Basic MessageInput

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Standard implementation of the input component requiring value, change handler, and generation state.

```tsx
import { MessageInput } from "@/components/ui/message-input"

export function BasicMessageInput() {
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={false}
    />
  )
}
```

--------------------------------

### PromptSuggestions Component Usage

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/prompt-suggestions.mdx

Demonstrates how to integrate the PromptSuggestions component into your React application. Ensure the 'append' function is correctly implemented to handle user message submissions.

```tsx
import { PromptSuggestions } from "@/components/ui/prompt-suggestions"

export function PromptSuggestionsDemo() {
  const append = (message: { role: "user"; content: string }) => {
    // Handle appending message
  }

  return (
    <PromptSuggestions
      label="Get started with some examples"
      append={append}
      suggestions={[
        "Tell me a joke",
        "What's the weather like today?",
        "Write a poem about cats",
      ]}
    />
  )
}
```

--------------------------------

### Enable Voice Input

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Provide the transcribeAudio prop to enable the voice input button. The function must accept a Blob and return a Promise resolving to the transcribed text.

```tsx
<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={false}
  transcribeAudio={transcribeAudio}
/>
```

--------------------------------

### Basic MessageList Usage

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-list.mdx

Renders a list of messages with basic configuration. Ensure the MessageList component is imported from '@/components/ui/message-list'.

```tsx
import { MessageList } from "@/components/ui/message-list"

export function ChatDemo() {
  const messages = [
    {
      id: "1",
      role: "user",
      content: "Hello, how are you?",
    },
    {
      id: "2",
      role: "assistant",
      content: "I'm doing well, thank you for asking!",
    },
  ]

  return <MessageList messages={messages} isTyping={false} />
```

--------------------------------

### Use AudioVisualizer Component

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/audio-visualizer.mdx

Integrate the AudioVisualizer component into your React application. Ensure you provide the necessary audio stream and recording status.

```tsx
import { AudioVisualizer } from "@/components/ui/audio-visualizer"

export function VoiceRecorder() {
  return (
    <AudioVisualizer
      stream={audioStream}
      isRecording={isRecording}
      onClick={stopRecording}
    />
  )
}
```

--------------------------------

### Use CopyButton in React

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/copy-button.mdx

Import the component and pass the content string to be copied.

```tsx
import { CopyButton } from "@/components/ui/copy-button"

export function Demo() {
  return (
    <CopyButton
      content="Text to be copied"
      copyMessage="Copied to clipboard!"
    />
  )
}
```

--------------------------------

### Enable File Attachments

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Add support for file uploads by providing state management for the files array.

```tsx
import { MessageInput } from "@/components/ui/message-input"

export function MessageInputWithAttachments() {
  const [files, setFiles] = useState<File[] | null>(null)

  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={false}
      allowAttachments
      files={files}
      setFiles={setFiles}
    />
  )
}
```

--------------------------------

### Chat Interface with Prompt Suggestions

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/chat.mdx

Integrates prompt suggestions into the Chat component. The `append` function from `useChat` is used to add suggestions to the chat history.

```tsx
"use client"

import { useChat } from "ai/react"

import { Chat } from "@/components/ui/chat"

export function ChatWithSuggestions() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    append,
    status,
    stop,
  } = useChat()

  const isLoading = status === "submitted" || status === "streaming"

  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
      append={append}
      suggestions={[
        "Generate a tasty vegan lasagna recipe for 3 people.",
        "Generate a list of 5 questions for a frontend job interview.",
        "Who won the 2022 FIFA World Cup?",
      ]}
    />
  )
}
```

--------------------------------

### Configure Tailwind CSS for Shiki Highlighting

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/markdown-renderer.mdx

Add the shiki color configuration to your tailwind.config.js file to enable syntax highlighting for different themes.

```javascript
// ...
shiki: {
  light: "var(--shiki-light)",
  "light-bg": "var(--shiki-light-bg)",
  dark: "var(--shiki-dark)",
  "dark-bg": "var(--shiki-dark-bg)",
},
// ...
```

--------------------------------

### Implement Custom Chat Interface

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Uses the useChat hook to manage chat state and composes ChatContainer, ChatForm, and MessageList for a full chat layout.

```tsx
"use client"

import { useChat } from "ai/react"
import { ChatContainer, ChatForm, ChatMessages } from "@/components/ui/chat"
import { MessageInput } from "@/components/ui/message-input"
import { MessageList } from "@/components/ui/message-list"
import { PromptSuggestions } from "@/components/ui/prompt-suggestions"

export function CustomChat() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    append,
    status,
    stop,
  } = useChat()

  const isLoading = status === "submitted" || status === "streaming"
  const lastMessage = messages.at(-1)
  const isEmpty = messages.length === 0
  const isTyping = lastMessage?.role === "user"

  return (
    <ChatContainer className="h-[600px]">
      {isEmpty ? (
        <PromptSuggestions
          label="Get started with these examples"
          append={append}
          suggestions={[
            "What is the capital of France?",
            "Tell me a joke",
            "Explain quantum computing",
          ]}
        />
      ) : null}

      {!isEmpty ? (
        <ChatMessages messages={messages}>
          <MessageList
            messages={messages}
            isTyping={isTyping}
            showTimeStamps={true}
            messageOptions={(message) => ({
              animation: message.role === "user" ? "slide" : "scale",
            })}
          />
        </ChatMessages>
      ) : null}

      <ChatForm
        className="mt-auto"
        isPending={isLoading || isTyping}
        handleSubmit={handleSubmit}
      >
        {({ files, setFiles }) => (
          <MessageInput
            value={input}
            onChange={handleInputChange}
            allowAttachments
            files={files}
            setFiles={setFiles}
            stop={stop}
            isGenerating={isLoading}
            placeholder="Type your message..."
            submitOnEnter={true}
            enableInterrupt={true}
          />
        )}
      </ChatForm>
    </ChatContainer>
  )
}
```

--------------------------------

### FilePreview Component

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/file-preview.mdx

The FilePreview component provides a consistent way to display file previews with support for both image and text files.

```APIDOC
## FilePreview Component

### Description
A component for previewing image and text files.

### Props
#### FilePreview
- **file** (File) - Required - The file object to preview
- **onRemove** (Function) - Required - Callback function when remove is clicked

### Usage Example
```tsx
import { FilePreview } from "@/registry/default/ui/file-preview"

export function FilePreviewDemo() {
  const [file, setFile] = useState<File | null>(null)

  return (
    <div>
      {file && <FilePreview file={file} onRemove={() => setFile(null)} />}
    </div>
  )
}
```
```

--------------------------------

### FilePreview Component Usage

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Shows how to use the FilePreview component to display and manage uploaded files, including text and images, with functionality to remove them.

```tsx
import { useState } from "react"
import { FilePreview } from "@/components/ui/file-preview"

export function FilePreviewDemo() {
  const [files, setFiles] = useState<File[]>([
    new File(["Hello World"], "document.txt", { type: "text/plain" }),
    new File([""], "image.png", { type: "image/png" }),
  ])

  const handleRemove = (index: number) => {
    setFiles(files.filter((_, i) => i !== index))
  }

  return (
    <div className="flex gap-2">
      {files.map((file, index) => (
        <FilePreview
          key={index}
          file={file}
          onRemove={() => handleRemove(index)}
        />
      ))}
    </div>
  )
}
```

--------------------------------

### Implement MessageList variants

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Displays chat messages with options for typing indicators and custom styling per message role.

```tsx
import { MessageList } from "@/components/ui/message-list"

const messages = [
  {
    id: "1",
    role: "user" as const,
    content: "Hello, how are you?",
    createdAt: new Date("2024-01-15T10:00:00"),
  },
  {
    id: "2",
    role: "assistant" as const,
    content: "I'm doing well, thank you for asking! How can I help you today?",
    createdAt: new Date("2024-01-15T10:00:05"),
  },
  {
    id: "3",
    role: "user" as const,
    content: "Can you write a haiku about programming?",
    createdAt: new Date("2024-01-15T10:01:00"),
  },
  {
    id: "4",
    role: "assistant" as const,
    content: `Code flows like water,
Bugs emerge from the shadows,
Debug, compile, run.`,
    createdAt: new Date("2024-01-15T10:01:10"),
  },
]

// Basic message list
export function BasicMessageList() {
  return (
    <MessageList
      messages={messages}
      isTyping={false}
      showTimeStamps={true}
    />
  )
}

// Message list with typing indicator
export function MessageListWithTyping() {
  return (
    <MessageList
      messages={messages}
      isTyping={true}
      showTimeStamps={true}
    />
  )
}

// Message list with dynamic options
export function MessageListWithOptions() {
  return (
    <MessageList
      messages={messages}
      isTyping={false}
      showTimeStamps={true}
      messageOptions={(message) => ({
        className: message.role === "user" ? "bg-primary/10" : "bg-secondary/10",
        animation: message.role === "user" ? "slide" : "scale",
      })}
    />
  )
}
```

--------------------------------

### Implement Chat Component with Vercel AI SDK

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/README.md

Integrates the Chat component with the useChat hook from the Vercel AI SDK to manage message state and streaming.

```tsx
"use client"

import { useChat } from "ai/react"

import { Chat } from "@/components/ui/chat"

export function ChatDemo() {
  const { messages, input, handleInputChange, handleSubmit, status, stop } =
    useChat()


  const isLoading = status === 'submitted' || status === 'streaming'

  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
    />
  )
}
```

--------------------------------

### Implement MarkdownRenderer

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Renders markdown content with support for syntax highlighting and standard formatting.

```tsx
import { MarkdownRenderer } from "@/components/ui/markdown-renderer"

export function MarkdownDemo() {
  const content = `# Welcome to the Documentation

This component supports **bold**, *italic*, and `inline code`.

## Features

- GitHub Flavored Markdown
- Syntax highlighting
- Tables and lists
- Responsive design`
```

--------------------------------

### MessageList with Custom Message Options

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-list.mdx

Applies custom CSS classes to all messages using the `messageOptions` prop with a static configuration object.

```tsx
import { MessageList } from "@/components/ui/message-list"

export function ChatWithCustomOptions() {
  return (
    <MessageList
      messages={messages}
      messageOptions={{
        className: "custom-message-class",
      }}
    />
  )
```

--------------------------------

### MessageInput Component - With Attachments

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Enables file attachments with drag-and-drop support. Requires `files` and `setFiles` props.

```APIDOC
## MessageInput Component - With Attachments

### Description
Enables file attachments with drag-and-drop support. Requires `files` and `setFiles` props.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Request Body
- **files** (File[] | null) - Required - Currently attached files
- **setFiles** (React.Dispatch<React.SetStateAction<File[] | null>>) - Required - Files state setter

### Request Example
```jsx
<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={false}
  allowAttachments
  files={files}
  setFiles={setFiles}
/>
```

### Response
N/A (Component Usage)
```

--------------------------------

### Import Markdown Renderer Component

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/markdown-renderer.mdx

Import the MarkdownRenderer component into your React application. Ensure the import path matches your project structure.

```tsx
import { MarkdownRenderer } from "@/components/ui/markdown-renderer"

```

--------------------------------

### Add Typing Indicator Keyframes to Tailwind Config

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/typing-indicator.mdx

Include these keyframes in your `tailwind.config.js` file to enable the typing indicator animation.

```javascript
// ...
"typing-dot-bounce": {
  "0%,40%": { transform: "translateY(0)" },
  "20%": { transform: "translateY(-0.25rem)" },
},
// ...
```

--------------------------------

### MessageInput Component API

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

API documentation for the MessageInput component, detailing its props and functionality.

```APIDOC
## MessageInput Component

### Description
A textarea component with file attachment support, auto-resizing, and drag-and-drop capabilities.

### Props

#### Standard Props
- **value** (string) - Required - Current input value
- **submitOnEnter** (boolean) - Optional - Whether to submit on Enter key. Default: `true`
- **stop** (() => void) - Optional - Function to stop generation
- **isGenerating** (boolean) - Required - Whether AI is generating
- **placeholder** (string) - Optional - Input placeholder text. Default: "Ask AI..."
- **enableInterrupt** (boolean) - Optional - Enable double-enter interrupt. Default: `true`
- **transcribeAudio** ((blob: Blob) => Promise<string>) - Optional - Function to transcribe audio

#### Attachment Props (when `allowAttachments` is true)
- **allowAttachments** (boolean) - Optional - Enable file attachments
- **files** (File[] | null) - Optional - Current list of attached files
- **setFiles** ((files: File[] | null) => void) - Optional - Function to update the list of attached files

### Usage Examples

#### Basic Usage
```tsx
import { MessageInput } from "@/components/ui/message-input"

export function BasicMessageInput() {
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={false}
    />
  )
}
```

#### With Interrupt Behavior
```tsx
export function MessageInputWithInterrupt() {
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={isGenerating}
      stop={handleStop}
      enableInterrupt={true}
    />
  )
}
```

#### With File Attachments
```tsx
import { MessageInput } from "@/components/ui/message-input"

export function MessageInputWithAttachments() {
  const [files, setFiles] = useState<File[] | null>(null)

  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={false}
      allowAttachments
      files={files}
      setFiles={setFiles}
    />
  )
}
```

#### With Stop Button
```tsx
import { MessageInput } from "@/components/ui/message-input"

export function MessageInputWithStop() {
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={true}
      stop={() => {
        // Handle stop generation
      }}
    />
  )
}
```
```

--------------------------------

### Render ChatMessage Component

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Demonstrates the ChatMessage component with support for markdown, file attachments, and custom action buttons.

```tsx
import { ChatMessage } from "@/components/ui/chat-message"
import { CopyButton } from "@/components/ui/copy-button"
import { Button } from "@/components/ui/button"
import { ThumbsUp, ThumbsDown } from "lucide-react"

export function MessageDemo() {
  return (
    <div className="space-y-4 p-4">
      {/* User message with slide animation */}
      <ChatMessage
        id="msg-1"
        role="user"
        content="Can you explain how React hooks work?"
        createdAt={new Date()}
        showTimeStamp={true}
        animation="slide"
      />

      {/* Assistant message with actions */}
      <ChatMessage
        id="msg-2"
        role="assistant"
        content={`**React Hooks** are functions that let you "hook into" React state and lifecycle features from function components.

## Common Hooks

- \`useState\` - Manage local state
- \`useEffect\` - Handle side effects
- \`useContext\` - Access context values
- \`useRef\` - Create mutable references

\`\`\`tsx
const [count, setCount] = useState(0)

useEffect(() => {
  document.title = \`Count: \${count}\`
}, [count])
\`\`\`
`}
        createdAt={new Date()}
        showTimeStamp={true}
        animation="scale"
        actions={
          <>
            <CopyButton content="React hooks explanation..." copyMessage="Copied!" />
            <Button size="icon" variant="ghost" className="h-6 w-6">
              <ThumbsUp className="h-4 w-4" />
            </Button>
            <Button size="icon" variant="ghost" className="h-6 w-6">
              <ThumbsDown className="h-4 w-4" />
            </Button>
          </>
        }
      />

      {/* Message with file attachments */}
      <ChatMessage
        id="msg-3"
        role="user"
        content="Please analyze this image"
        attachments={[new File([""], "screenshot.png", { type: "image/png" })]}
        animation="fade"
      />
    </div>
  )
}
```

--------------------------------

### MessageInput Component - Basic Usage

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Basic usage of the MessageInput component with value and onChange handlers.

```APIDOC
## MessageInput Component - Basic Usage

### Description
Basic usage of the MessageInput component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Example
```jsx
<MessageInput value={input} onChange={handleInputChange} isGenerating={false} />
```

### Response
N/A (Component Usage)
```

--------------------------------

### AudioVisualizer Component for Voice Recording

Source: https://context7.com/blazity/shadcn-chatbot-kit/llms.txt

Demonstrates the VoiceRecorder component which utilizes the AudioVisualizer to provide real-time visual feedback during audio recording.

```tsx
import { useState, useRef } from "react"
import { AudioVisualizer } from "@/components/ui/audio-visualizer"

export function VoiceRecorder() {
  const [isRecording, setIsRecording] = useState(false)
  const [stream, setStream] = useState<MediaStream | null>(null)
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)

  const startRecording = async () => {
    try {
      const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true })
      setStream(audioStream)

      const mediaRecorder = new MediaRecorder(audioStream)
      mediaRecorderRef.current = mediaRecorder

      const chunks: Blob[] = []
      mediaRecorder.ondataavailable = (e) => chunks.push(e.data)
      mediaRecorder.onstop = () => {
        const blob = new Blob(chunks, { type: "audio/webm" })
        // Process the audio blob
        console.log("Recording completed:", blob)
      }

      mediaRecorder.start()
      setIsRecording(true)
    } catch (error) {
      console.error("Failed to start recording:", error)
    }
  }

  const stopRecording = () => {
    mediaRecorderRef.current?.stop()
    stream?.getTracks().forEach((track) => track.stop())
    setStream(null)
    setIsRecording(false)
  }

  return (
    <div className="flex items-center gap-4">
      {!isRecording ? (
        <button onClick={startRecording} className="rounded-full bg-red-500 p-4">
          Start Recording
        </button>
      ) : (
        stream && (
          <AudioVisualizer
            stream={stream}
            isRecording={isRecording}
            onClick={stopRecording}
          />
        )
      )}
    </div>
  )
}
```

--------------------------------

### Configure Interrupt Behavior

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Enable double-enter interrupt functionality to allow users to stop generation by pressing Enter twice.

```tsx
export function MessageInputWithInterrupt() {
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={isGenerating}
      stop={handleStop}
      enableInterrupt={true}
    />
  )
}
```

--------------------------------

### Handle Generation Stop

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Provide a stop function to display a stop button while isGenerating is true.

```tsx
<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={true}
  stop={() => {
    // Handle stop
  }}
/>
```

--------------------------------

### Copy Button Component API

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/copy-button.mdx

API details for the Copy Button component.

```APIDOC
## Copy Button Component

### Description
A button component that copies content to clipboard with visual feedback.

### Props
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **content** (string) - Required - The text content to be copied to clipboard
- **copyMessage?** (string) - Optional - Custom message to show when content is copied

### Request Example
```json
{
  "content": "Text to be copied",
  "copyMessage": "Copied to clipboard!"
}
```

### Response
#### Success Response (200)
- **None**

#### Response Example
```json
{
  "message": "Content copied successfully"
}
```
```

--------------------------------

### Use ChatMessage in React

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/chat-message.mdx

Import and render the ChatMessage component with user or assistant roles.

```tsx
import { ChatMessage } from "@/components/ui/chat-message"

export function ChatDemo() {
  return (
    <div className="space-y-4">
      <ChatMessage
        role="user"
        content="Hello, how are you?"
        createdAt={new Date()}
        showTimeStamp
      />
      <ChatMessage
        role="assistant"
        content="I'm doing well, thank you for asking!"
        createdAt={new Date()}
        showTimeStamp
      />
    </div>
  )
}
```

--------------------------------

### Configure Submit Behavior

Source: https://github.com/blazity/shadcn-chatbot-kit/blob/main/apps/www/content/docs/components/message-input.mdx

Use the submitOnEnter prop to control whether pressing the Enter key triggers a form submission.

```tsx
<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={false}
  submitOnEnter={false} // Disable submit on Enter
/>
```