Prompt Kit

https://www.prompt-kit.com
Admin
Prompt Kit provides core building blocks and high-quality, accessible, and customizable UI...
Tokens:20,139
Snippets:285
Trust Score:6.6
Update:2 months ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://www.prompt-kit.com/docs/code-block

Command to install the component via CLI.

```bash
npx shadcn add "https://prompt-kit.com/c/code-block.json"
```

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

### Install Tool Component

Source: https://www.prompt-kit.com/docs/tool

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

```bash
npx shadcn add "https://prompt-kit.com/c/tool.json"
```

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

### Install Steps component

Source: https://www.prompt-kit.com/docs/steps

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

```bash
npx shadcn add "https://prompt-kit.com/c/steps.json"
```

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

### Install Reasoning Component

Source: https://www.prompt-kit.com/docs/reasoning

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

```bash
npx shadcn add "https://prompt-kit.com/c/reasoning.json"
```

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

### Install Source Component

Source: https://www.prompt-kit.com/docs/source

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

```bash
npx shadcn add "https://prompt-kit.com/c/source.json"
```

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

### Install Shiki Dependency

Source: https://www.prompt-kit.com/llms-full.txt

Install the required Shiki package for syntax highlighting when using manual installation.

```bash
npm install shiki
```

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

### Install Image Component

Source: https://www.prompt-kit.com/docs/image

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

```bash
npx shadcn add "https://prompt-kit.com/c/image.json"
```

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

### Install Markdown component

Source: https://www.prompt-kit.com/docs/markdown

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

```bash
npx shadcn add "https://prompt-kit.com/c/markdown.json"
```

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

### Install Markdown dependencies manually

Source: https://www.prompt-kit.com/llms-full.txt

Install the necessary packages for the Markdown component when performing a manual installation.

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

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

### Install PromptSuggestion via CLI

Source: https://www.prompt-kit.com/docs/prompt-suggestion

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

```bash
npx shadcn add "https://prompt-kit.com/c/prompt-suggestion.json"
```

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

### Install Message Component

Source: https://www.prompt-kit.com/docs/message

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

```bash
npx shadcn add "https://prompt-kit.com/c/message.json"
```

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

### Install Loader Component

Source: https://www.prompt-kit.com/docs/loader

Use the CLI command to add the Loader component to your project.

```bash
npx shadcn add "https://prompt-kit.com/c/loader.json"
```

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

### Install File Upload Component

Source: https://www.prompt-kit.com/docs/file-upload

Use the CLI command to add the File Upload component to your project.

```bash
npx shadcn add "https://prompt-kit.com/c/file-upload.json"
```

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

### Get Component Details via MCP

Source: https://www.prompt-kit.com/docs/mcp

Use this prompt to retrieve documentation and previews for a specific component.

```text
Show me the documentation and preview for the PromptTextarea component
```

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

### Install JSX Preview via CLI

Source: https://www.prompt-kit.com/llms-full.txt

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

```bash
npx shadcn add "https://prompt-kit.com/c/jsx-preview.json"
```

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

### Install Tailwind Typography dependency

Source: https://www.prompt-kit.com/docs/markdown

Install the required Tailwind CSS plugin for typography support.

```bash
npm install -D @tailwindcss/typography
```

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

### Theme Customization

Source: https://www.prompt-kit.com/docs/code-block

Examples of applying different Shiki themes to code blocks.

```javascript
function calculateTotal(items) {
  return items
    .filter(item => item.price > 0)
    .reduce((total, item) => {
      return total + item.price * item.quantity;
    }, 0);
}
```

```javascript
function calculateTotal(items) {
  return items
    .filter(item => item.price > 0)
    .reduce((total, item) => {
      return total + item.price * item.quantity;
    }, 0);
}
```

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

### Install Chatbot Primitive

Source: https://www.prompt-kit.com/primitives

Adds the full chatbot primitive to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://prompt-kit.com/c/chatbot.json"
```

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

### Install Text Shimmer component

Source: https://www.prompt-kit.com/docs/text-shimmer

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

```bash
npx shadcn add "https://prompt-kit.com/c/text-shimmer.json"
```

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

### Install Response Stream via CLI

Source: https://www.prompt-kit.com/llms-full.txt

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

```bash
npx shadcn add "https://prompt-kit.com/c/response-stream.json"
```

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

### Install AI Chat UI Components

Source: https://www.prompt-kit.com/ai-chat-ui

Use this command to add specific components from the prompt-kit library to your project.

```bash
npx shadcn@latest add "https://prompt-kit.com/c/[COMPONENT].json"
```

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

### Install Prompt Input via CLI

Source: https://www.prompt-kit.com/docs/prompt-input

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

```bash
npx shadcn add "https://prompt-kit.com/c/prompt-input.json"
```

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

### Import prompt-kit components

Source: https://www.prompt-kit.com/docs/installation

Import the installed components into your React files using the standard path alias.

```typescript
import { PromptInput } from "@/components/ui/prompt-input";
```

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

### Install System Message component

Source: https://www.prompt-kit.com/docs/system-message

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

```bash
npx shadcn add "https://prompt-kit.com/c/system-message.json"
```

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

### Install Tool Calling Primitive

Source: https://www.prompt-kit.com/primitives

Adds the tool calling primitive to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://prompt-kit.com/c/tool-calling.json"
```

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

### Render a Markdown code block

Source: https://www.prompt-kit.com/docs/markdown

Example of a standard Markdown code block syntax.

```markdown
// Code block example
function greet(name) {
  return `Hello, ${name}!`;
}
```

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

### Install Thinking Bar via CLI

Source: https://www.prompt-kit.com/docs/thinking-bar

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

```bash
npx shadcn add "https://prompt-kit.com/c/thinking-bar.json"
```

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

### Install Chain of Thought Component

Source: https://www.prompt-kit.com/docs/chain-of-thought

Use the CLI to add the Chain of Thought component to your project.

```bash
npx shadcn add "https://prompt-kit.com/c/chain-of-thought.json"
```

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

### Install Feedback Bar via CLI

Source: https://www.prompt-kit.com/docs/feedback-bar

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

```bash
npx shadcn add "https://prompt-kit.com/c/feedback-bar.json"
```

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

### Install Chat Container component

Source: https://www.prompt-kit.com/docs/chat-container

Command to add the Chat Container component to your project using the shadcn CLI.

```bash
npx shadcn add "https://prompt-kit.com/c/chat-container.json"
```

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

### Install Scroll Button via CLI

Source: https://www.prompt-kit.com/docs/scroll-button

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

```bash
npx shadcn add "https://prompt-kit.com/c/scroll-button.json"
```

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

### Implement Chat Interface with ScrollButton

Source: https://www.prompt-kit.com/docs/chat-container

Example showing how to integrate ChatContainer components with a ScrollButton for enhanced user navigation.

```tsx
import { ChatContainerRoot, ChatContainerContent, 
ChatContainerScrollAnchor } from "@/components/prompt-kit/chat-container"
import { ScrollButton } from "@/components/prompt-kit/scroll-button"

function ChatInterface() {
return (

<div className="relative h-[500px]">
<ChatContainerRoot className="h-full">
  <ChatContainerContent className="space-y-4">
    {/* Your chat messages here */}
    <div>Message 1</div>
    <div>Message 2</div>
    <div>Message 3</div>
  </ChatContainerContent>
  <ChatContainerScrollAnchor />
  <div className="absolute right-4 bottom-4">
    <ScrollButton className="shadow-sm" />
  </div>
</ChatContainerRoot>
</div>
) } 
```

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

### Browse Components via MCP

Source: https://www.prompt-kit.com/docs/mcp

Use this prompt in your AI tool's chat to list all available prompt-kit components.

```text
Show me all available prompt-kit components
```

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

### Configure MCP Server for Cursor

Source: https://www.prompt-kit.com/docs/mcp

Add this configuration to the .cursor/mcp.json file in your project root to enable the prompt-kit registry.

```json
{
  "mcpServers": {
      "prompt-kit": {
      "description": "prompt-kit registry",
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "shadcn@canary", "mcp"],
      "env": {
          "REGISTRY_URL": "https://www.prompt-kit.com/c/registry.json"
          }
      }
  }
}
```

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

### Add Component via MCP

Source: https://www.prompt-kit.com/docs/mcp

Use this prompt to add a specific component to your project.

```text
Add the PromptInput component from prompt-kit to my project
```

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

### Build Chat App via MCP

Source: https://www.prompt-kit.com/docs/mcp

Use this prompt to instruct the AI to build a chat application using specific prompt-kit components.

```text
Build a chat app with prompt-kit using: ChatContainer with ScrollButton inside, plus Message and PromptInput
```

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

### Language Highlighting

Source: https://www.prompt-kit.com/docs/code-block

Demonstrates syntax highlighting for different programming languages.

```python
def fibonacci(n):
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

# Generate the first 10 Fibonacci numbers
for number in fibonacci(10):
    print(number)
```

```css
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #45a049;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
```

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

### Showcase Component Implementation

Source: https://www.prompt-kit.com/llms-full.txt

A React component that renders a grid of project thumbnails with links, using a local array of project data.

```javascript
const projects = [
  {
    title: "zola.chat",
    href: "https://zola.chat",
    thumbnail: "https://www.zola.chat/cover_zola.jpg",
  },
  {
    title: "emojis.com",
    href: "https://emojis.com",
    thumbnail: "https://attic.sh/_static/emojis/ai-emoji-generator/og.jpg",
  },
  {
    title: "ottogrid.ai",
    href: "https://ottogrid.ai",
    thumbnail: "https://ottogrid.ai/opengraph-image.png?2ca0b60807e14ef5",
  },
  {
    title: "aiagent.app",
    href: "https://aiagent.app",
    thumbnail:
      "https://aiagent.app/opengraph-image.png?opengraph-image.e8b1925a.png",
  },
  {
    title: "www.findappgaps.com",
    href: "https://www.findappgaps.com",
    thumbnail:
      "https://www.findappgaps.com/opengraph-image.png?fd2d072fb61c49f3",
  },
  {
    title: "faithbase.ai",
    href: "https://faithbase.ai",
    thumbnail: "https://faithbase.ai/opengraph.jpg",
  },
]

export default function Showcase() {
  return (
    <div className="not-prose w-full flex-auto pt-2.5">
      <div className="relative w-full pb-16">
        <h1 className="text-sm font-medium text-[#0D74CE] dark:text-[#70B8FF]">
          Showcase
        </h1>
        <p className="text-foreground mt-6 text-3xl font-[450] tracking-tight text-pretty">
          Building something great with prompt-kit?
        </p>
        <p className="text-muted-foreground mb-4 text-3xl font-[450] tracking-tight">
          We'd love to feature your project here.
        </p>
        <Link href="https://forms.gle/SfNVyJJMyZ2RfnTb6" target="_blank">
          <Button className="mt-2">
            Submit your project <ArrowRightIcon className="size-4" />
          </Button>
        </Link>
      </div>
      <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2">
        {projects.map((project) => (
          <div className="relative isolate w-full overflow-hidden rounded-2xl max-md:aspect-1200/630 md:h-48">
            <Image
              priority
              src={project.thumbnail}
              alt="thumbnail"
              unoptimized
              width={1200}
              height={630}
              className="h-full w-full object-cover"
            />

            <div
              aria-hidden
              className="absolute bottom-2 left-2 rounded-[6px] bg-black/70 px-1.5 py-0.5 text-xs font-medium text-white"
            >
              {project.title}
            </div>

            <Link
              href={`${project.href}?utm_source=prompt-kit.com&utm_medium=referral`}
              target="_blank"
              className="absolute inset-0"
            >
              <span className="sr-only">Visit {project.title}</span>
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}
```

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

### Basic Prompt Input Implementation

Source: https://www.prompt-kit.com/

A standard implementation of the Prompt Input component featuring a text area and action buttons for file uploads and sending.

```typescript
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputAction,
} from '@/components/ui/prompt-input';

function PromptInputBasic() {
  return (
    <PromptInput>
      <PromptInputTextarea placeholder='Ask prompt-kit' />
      <PromptInputActions>
        <PromptInputAction tooltip='Upload File'>
          <Button>Upload File</Button>
        </PromptInputAction>
        <PromptInputAction tooltip='Send'>
          <Button>Send</Button>
        </PromptInputAction>
      </PromptInputActions>
    </PromptInput>
  );
}
```

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

### Steps Component API

Source: https://www.prompt-kit.com/docs/steps

Reference for the Steps component and its sub-components used to build collapsible process sequences.

```APIDOC
## Steps / StepsRoot

### Description
The root container for the steps sequence.

### Props
- **defaultOpen** (boolean) - Optional - Whether the Steps starts expanded (Default: true)
- **className** (string) - Optional - Additional CSS classes
- **...props** (React.ComponentProps<Collapsible>) - Optional - Root collapsible component props

## StepsTrigger

### Description
The trigger element for the steps sequence.

### Props
- **children** (React.ReactNode) - Required - Trigger content (label)
- **leftIcon** (React.ReactNode) - Optional - Optional left icon area
- **swapIconOnHover** (boolean) - Optional - Swap leftIcon with chevron on hover (Default: true)
- **className** (string) - Optional - Additional CSS classes
- **...props** (React.ComponentProps<CollapsibleTrigger>) - Optional - Trigger props forwarded to CollapsibleTrigger

## StepsContent

### Description
The content area for the steps sequence.

### Props
- **className** (string) - Optional - Additional CSS classes
- **bar** (React.ReactNode) - Optional - Optional bar element rendered at the left (Default: <StepsBar />)
- **...props** (React.ComponentProps<CollapsibleContent>) - Optional - Collapsible content props

## StepsBar

### Description
The vertical bar element used within StepsContent.

### Props
- **className** (string) - Optional - Classes for positioning and style (Default: bg-muted h-full w-[2px])
- **...props** (React.HTMLAttributes<HTMLDivElement>) - Optional - Pass-through div attributes/styles

## StepsItem

### Description
A single row item within the steps sequence.

### Props
- **children** (React.ReactNode) - Required - Row item content
- **className** (string) - Optional - Additional CSS classes
- **...props** (React.ComponentProps<'div'>) - Optional - Pass-through div attributes/styles
```

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

### Configure Global CSS Keyframes

Source: https://www.prompt-kit.com/llms-full.txt

Add these animation keyframes to your global.css file for proper component rendering.

```css
@keyframes typing {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-2px);
    opacity: 1;
  }
}

@keyframes loading-dots {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}

@keyframes wave {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.6);
}
}

@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}

@keyframes text-blink {
0%,
100% {
color: var(--primary);
}
50% {
color: var(--muted-foreground);
}
}

@keyframes bounce-dots {
0%,
100% {
transform: scale(0.8);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}

@keyframes thin-pulse {
0%,
100% {
transform: scale(0.95);
opacity: 0.8;
}
50% {
transform: scale(1.05);
opacity: 0.4;
}
}

@keyframes pulse-dot {
0%,
100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.5);
opacity: 1;
}
}

@keyframes shimmer-text {
0% {
background-position: 150% center;
}
100% {
background-position: -150% center;
}
}

@keyframes wave-bars {
0%,
100% {
transform: scaleY(1);
opacity: 0.5;
}
50% {
transform: scaleY(0.6);
opacity: 1;
}
}

@keyframes shimmer {
0% {
background-position: 200% 50%;
}
100% {
background-position: -200% 50%;
}
}

@keyframes spinner-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```

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

### Define explicit grid layout and item positioning

Source: https://www.prompt-kit.com/c/conversation-scroll-bottom

Demonstrates explicit row and column sizing with specific item placement using grid lines.

```css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 200px auto;
  gap: 20px;
}

.item {
  grid-column: 1 / 3; /* Start at line 1, end at line 3 */
  grid-row: 2 / 3; /* Start at line 2, end at line 3 */
}
```

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

### Reasoning

Source: https://www.prompt-kit.com/docs/reasoning

The main container component for AI reasoning content.

```APIDOC
## Reasoning

### Description
The main container component for displaying AI reasoning, explanations, or logic.

### Props
- **children** (React.ReactNode) - The content of the component
- **className** (string) - Additional CSS classes
- **open** (boolean) - Control the open state (makes component controlled)
- **onOpenChange** ((open: boolean) => void) - Callback when open state changes
- **isStreaming** (boolean) - When false, automatically closes the reasoning (auto-close)
```

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

### PromptSuggestion Component Props

Source: https://www.prompt-kit.com/llms-full.txt

The PromptSuggestion component accepts several props to configure its visual style, size, and content.

```APIDOC
## PromptSuggestion Props

### Parameters
- **variant** ("circular" | "classic" | "pulse" | "pulse-dot" | "dots" | "typing" | "wave" | "bars" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots") - Optional - The visual style of the loader. Default: "circular".
- **size** ("sm" | "md" | "lg") - Optional - The size of the loader. Default: "md".
- **text** (string) - Optional - Text to display (for supported variants).
- **className** (string) - Optional - Additional CSS classes.
```

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

### PromptInputAction

Source: https://www.prompt-kit.com/docs/prompt-input

Individual action button with tooltip support.

```APIDOC
## PromptInputAction

### Props
- **tooltip** (React.ReactNode) - Optional - Content to show in the tooltip.
- **children** (React.ReactNode) - Optional - Child component to trigger the tooltip.
- **className** (string) - Optional - Additional CSS classes for the tooltip.
- **side** ("top" | "bottom" | "left" | "right") - Optional - Position of the tooltip relative to the trigger. Default: "top"
- **disabled** (boolean) - Optional - Disable the tooltip trigger. Default: false
- **...props** (React.ComponentProps<typeof Tooltip>) - Optional - All other Tooltip component props are supported.
```

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

### PromptSuggestion Component

Source: https://www.prompt-kit.com/docs/prompt-suggestion

The PromptSuggestion component renders a button for prompt suggestions. It supports various visual variants, sizes, and an optional highlight mode for text emphasis.

```APIDOC
## PromptSuggestion

### Description
A React component for rendering interactive prompt suggestions. It supports two modes: normal (clickable buttons) and highlight (text highlighting).

### Props
- **children** (React.ReactNode) - Required - Content to display in the suggestion button.
- **variant** ("default" | "destructive" | "outline" | "ghost") - Optional - Visual variant of the button.
- **size** ("default" | "sm" | "lg" | "icon") - Optional - Size of the button.
- **highlight** (string) - Optional - When provided, enables highlight mode and highlights this text within children.
- **className** (string) - Optional - Additional CSS classes.
- **...props** (ButtonHTMLAttributes) - Optional - All other button HTML attributes (including onClick).
```

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

### Source Component

Source: https://www.prompt-kit.com/docs/source

The main container component for displaying a website source.

```APIDOC
## Source

### Description
The main container component for a website source.

### Props
- **href** (string) - Required - The URL of the source
- **children** (React.ReactNode) - Required - The content to display
```

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

### ReasoningContent

Source: https://www.prompt-kit.com/docs/reasoning

The wrapper for the actual reasoning content, supporting markdown rendering.

```APIDOC
## ReasoningContent

### Description
The wrapper for the actual reasoning content, supporting markdown rendering.

### Props
- **children** (React.ReactNode) - The content to be displayed
- **className** (string) - Additional CSS classes
- **contentClassName** (string) - Additional CSS classes for the content
- **markdown** (boolean) - Default: false - Enable markdown rendering for the content
- **...props** (HTMLAttributes) - Additional HTML div props
```

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

### Initialize Code Block Metadata

Source: https://www.prompt-kit.com/llms-full.txt

Defines the metadata for the Code Block documentation page using the generateMetadata utility.

```typescript
export const metadata = generateMetadata(
  "Code Block",
  "A component for displaying code snippets with syntax highlighting and customizable styling."
)
```

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

### Create a responsive CSS Grid container

Source: https://www.prompt-kit.com/c/full-chat-app

Defines a grid container that automatically adjusts column count based on available width with a minimum column size of 250px.

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

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

### Tool Component

Source: https://www.prompt-kit.com/docs/tool

The primary component for rendering tool invocation data.

```APIDOC
## Tool Component

### Description
Displays tool invocation details including input, output, status, and errors.

### Props
- **toolPart** (ToolPart) - Required - The tool invocation data to display
- **defaultOpen** (boolean) - Optional - Whether the tool details are expanded by default (Default: false)
- **className** (string) - Optional - Additional CSS classes
```

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

### PromptInput

Source: https://www.prompt-kit.com/docs/prompt-input

The main container component for the AI input field.

```APIDOC
## PromptInput

### Props
- **isLoading** (boolean) - Optional - Loading state of the input. Default: false
- **value** (string) - Optional - Controlled value of the input.
- **onValueChange** ((value: string) => void) - Optional - Callback when input value changes.
- **maxHeight** (number | string) - Optional - Maximum height of the textarea in pixels. Default: 240
- **onSubmit** (() => void) - Optional - Callback when form is submitted (Enter pressed).
- **children** (React.ReactNode) - Optional - Child components to render.
- **className** (string) - Optional - Additional CSS classes.
```

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

### ToolPart Interface

Source: https://www.prompt-kit.com/docs/tool

The data structure representing the tool invocation state and details.

```APIDOC
## ToolPart Interface

### Description
Defines the structure of the tool invocation data passed to the Tool component.

### Properties
- **type** (string) - The type of the tool
- **state** (string) - The state of the tool (e.g., pending, running, completed, error)
- **input** (Record<string, unknown>) - The input data to the tool
- **output** (Record<string, unknown>) - The output data from the tool
- **toolCallId** (string) - The tool call identifier
- **errorText** (string) - The error text if the tool failed to execute
```

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

### Basic Code Block

Source: https://www.prompt-kit.com/docs/code-block

A standard implementation of the Code Block component.

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

// Call the function
greet("World");
```

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

### MessageAction

Source: https://www.prompt-kit.com/docs/message

Individual interactive action component with tooltip support.

```APIDOC
## MessageAction

### Props
- **tooltip** (React.ReactNode) - Content to show in the tooltip
- **children** (React.ReactNode) - Child component to trigger the tooltip
- **className** (string) - Additional CSS classes for the tooltip
- **side** ("top" | "bottom" | "left" | "right") - Default: "top" - Position of the tooltip relative to the trigger
- **...props** (React.ComponentProps<typeof Tooltip>) - All other Tooltip component props
```

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

### CodeBlock

Source: https://www.prompt-kit.com/docs/code-block

The main container component for displaying code blocks.

```APIDOC
### CodeBlock

#### Props
- **children** (React.ReactNode) - Child components to render
- **className** (string) - Additional CSS classes
- **...props** (React.HTMLProps<HTMLDivElement>) - All other div props
```

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

### FileUpload

Source: https://www.prompt-kit.com/docs/file-upload

The main container component for managing file upload state and configuration.

```APIDOC
## FileUpload

### Props
- **onFilesAdded** ((files: File[]) => void) - Optional - Function called when files are added
- **children** (React.ReactNode) - Optional - Child components
- **multiple** (boolean) - Optional - Default: true - Allow selection of multiple files
- **accept** (string) - Optional - File types to accept (e.g., ".jpg,.png")
```

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

### PromptInputActions

Source: https://www.prompt-kit.com/docs/prompt-input

Container for action buttons within the PromptInput.

```APIDOC
## PromptInputActions

### Props
- **children** (React.ReactNode) - Optional - Child components to render.
- **className** (string) - Optional - Additional CSS classes.
- **...props** (React.HTMLAttributes<HTMLDivElement>) - Optional - All other div props are supported.
```

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

### Reasoning Component API

Source: https://www.prompt-kit.com/llms-full.txt

API documentation for the Reasoning component and its sub-components (ReasoningTrigger, ReasoningContent).

```APIDOC
## Reasoning

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | React.ReactNode | | The content of the component |
| className | string | | Additional CSS classes |
| open | boolean | | Control the open state (makes component controlled) |
| onOpenChange | (open: boolean) => void | | Callback when open state changes |
| isStreaming | boolean | | When false, automatically closes the reasoning (auto-close) |

## ReasoningTrigger

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | React.ReactNode | | The content of the trigger |
| className | string | | Additional CSS classes |
| ...props | HTMLAttributes | | Additional HTML button props |

## ReasoningContent

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | React.ReactNode | | The content to be displayed |
| className | string | | Additional CSS classes |
| contentClassName | string | | Additional CSS classes for the content |
| markdown | boolean | false | Enable markdown rendering for the content |
| ...props | HTMLAttributes | | Additional HTML div props |
```

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

### SourceContent Component

Source: https://www.prompt-kit.com/docs/source

The content component that displays the title and description of the source on hover.

```APIDOC
## SourceContent

### Description
The content component that displays the title and description of the source on hover.

### Props
- **title** (string) - Required - The title to display
- **description** (string) - Required - The description to display
- **className** (string) - Optional - Additional CSS classes
```

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

### FileUpload Component API

Source: https://www.prompt-kit.com/llms-full.txt

API documentation for the FileUpload component.

```APIDOC
## FileUpload

The FileUpload component provides a drag-and-drop interface for file uploads with support for single or multiple files and visual feedback.
```

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

### Source Component

Source: https://www.prompt-kit.com/llms-full.txt

The Source component displays website sources used by AI-generated content, including URL details, titles, and descriptions.

```APIDOC
## Source Component

### Props
- **href** (string) - Required - The URL of the source.
- **children** (React.ReactNode) - Required - The content to display.

### SourceTrigger Props
- **label** (string) - Required - The label to display.
- **showFavicon** (boolean) - Optional - Whether to show the favicon (default: false).
- **className** (string) - Optional - Additional CSS classes.

### SourceContent Props
- **title** (string) - Required - The title to display.
- **description** (string) - Required - The description to display.
- **className** (string) - Optional - Additional CSS classes.
```

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

### PromptInputTextarea

Source: https://www.prompt-kit.com/docs/prompt-input

The textarea component used within the PromptInput.

```APIDOC
## PromptInputTextarea

### Props
- **disableAutosize** (boolean) - Optional - Disable automatic height adjustment. Default: false
- **className** (string) - Optional - Additional CSS classes.
- **onKeyDown** ((e: KeyboardEvent) => void) - Optional - Keyboard event handler.
- **disabled** (boolean) - Optional - Disable the textarea input. Default: false
- **...props** (React.ComponentProps<"textarea">) - Optional - All other textarea props are supported.
```

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

### useTextStream Hook

Source: https://www.prompt-kit.com/llms-full.txt

The useTextStream hook manages the state and logic for streaming text animations. It accepts configuration parameters and returns methods to control the stream and access the current state.

```APIDOC
## useTextStream(options)

### Description
A hook to manage text streaming animations, supporting typewriter and fade modes with customizable speed and timing.

### Parameters
- **textStream** (string | AsyncIterable<string>) - Required - The text to stream or an async iterable of text chunks.
- **speed** (number) - Optional - Speed from 1-100 (default: 20).
- **mode** ("typewriter" | "fade") - Optional - The animation mode to use (default: "typewriter").
- **onComplete** (() => void) - Optional - Callback function when streaming is complete.
- **fadeDuration** (number) - Optional - Custom fade duration in ms.
- **segmentDelay** (number) - Optional - Custom delay between segments in ms.
- **characterChunkSize** (number) - Optional - Custom characters per frame for typewriter.
- **onError** ((error: unknown) => void) - Optional - Callback function when an error occurs.

### Return Value
- **displayedText** (string) - The current text being displayed.
- **isComplete** (boolean) - Whether streaming is complete.
- **segments** ({ text: string; index: number }[]) - Text segments for fade mode.
- **getFadeDuration** (() => number) - Function to get the current fade duration.
- **getSegmentDelay** (() => number) - Function to get the current segment delay.
- **reset** (() => void) - Function to reset the streaming state.
- **startStreaming** (() => void) - Function to start or restart streaming.
- **pause** (() => void) - Function to pause streaming.
- **resume** (() => void) - Function to resume streaming.
```

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

### Render Markdown in Message

Source: https://www.prompt-kit.com/docs/message

Use the markdown prop to enable rich text formatting within the message content.

```javascript
// Even code with syntax highlighting
function hello() {
  return "world";
}
```

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

### Customize Markdown rendering components

Source: https://www.prompt-kit.com/docs/markdown

Override default HTML element rendering by passing a components object.

```jsx
const customComponents = {
  h1: ({ children }) => <h1 className="text-2xl font-bold text-blue-500">{children}</h1>,
  a: ({ href, children }) => <a href={href} className="text-purple-500 underline">{children}</a>,
  // ... other components
}

<Markdown components={customComponents}>{markdownContent}</Markdown>
```

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

### CodeBlockCode

Source: https://www.prompt-kit.com/docs/code-block

The component responsible for rendering and highlighting the actual code content.

```APIDOC
### CodeBlockCode

#### Props
- **code** (string) - The code to display and highlight
- **language** (string) - Default: "tsx" - The language for syntax highlighting
- **theme** (string) - Default: "github-light" - The theme for syntax highlighting
- **className** (string) - Additional CSS classes
- **...props** (React.HTMLProps<HTMLDivElement>) - All other div props
```

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

### Usage with Markdown

Source: https://www.prompt-kit.com/docs/code-block

Integrating the CodeBlock component within a Markdown renderer.

```tsx
import { Markdown } from "@/components/prompt-kit/markdown"

function MyComponent() {
const markdownContent = ` # Example

  \`\`\`javascript
  function greet(name) {

  return \`Hello, \${name}!\`;
  }
  \`\`\`

  return <Markdown className="prose">{markdownContent}</Markdown>

}
```

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

### Image Component

Source: https://www.prompt-kit.com/docs/image

The Image component is used to display images from base64 or Uint8Array data. It supports all standard HTML img attributes and is compatible with AI SDK v5.

```APIDOC
## Image Component

### Description
The Image component displays images from base64 or Uint8Array data, supporting all standard HTML image attributes. It is ideal for showing AI-generated images or user uploads.

### Props
- **base64** (string) - Optional - Base64-encoded image data
- **uint8Array** (Uint8Array) - Optional - Raw image data as Uint8Array
- **mediaType** (string) - Optional - MIME type of the image (default: 'image/png')
- **alt** (string) - Required - Alternative text for accessibility
- **className** (string) - Optional - Additional CSS classes
- **...props** (img props) - Optional - All standard HTML <img> attributes
```

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

### MessageActions

Source: https://www.prompt-kit.com/docs/message

Container component for interactive message actions.

```APIDOC
## MessageActions

### Props
- **children** (React.ReactNode) - Child components to render
- **className** (string) - Additional CSS classes
- **...props** (React.HTMLProps<HTMLDivElement>) - All other div props
```

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

### FileUploadContent

Source: https://www.prompt-kit.com/docs/file-upload

The container component for displaying the file upload area.

```APIDOC
## FileUploadContent

### Props
- **className** (string) - Optional - Additional CSS classes
- **...props** (React.HTMLAttributes<HTMLDivElement>) - Optional - All other div props
```

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

### ChainOfThought

Source: https://www.prompt-kit.com/docs/chain-of-thought

The main container component for wrapping ChainOfThoughtStep components.

```APIDOC
## ChainOfThought

### Props
- **children** (React.ReactNode) - Required - ChainOfThoughtStep components
- **className** (string) - Optional - Additional CSS classes
```

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

### JSXPreview

Source: https://www.prompt-kit.com/llms-full.txt

The JSXPreview component renders JSX strings as React components, supporting streaming content and automatic tag completion.

```APIDOC
## JSXPreview

### Description
A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion.

### Props
- **jsx** (string) - Required - The JSX string to render
- **isStreaming** (boolean) - Optional - Whether the JSX is being streamed (enables automatic tag completion). Defaults to false.
- **className** (string) - Optional - Additional CSS classes
- **...props** (JsxParserProps) - Optional - All other props from react-jsx-parser
```

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

### CodeBlockGroup

Source: https://www.prompt-kit.com/docs/code-block

A wrapper component for grouping code blocks, often used to add headers with metadata and actions.

```APIDOC
### CodeBlockGroup

#### Props
- **children** (React.ReactNode) - Child components to render
- **className** (string) - Additional CSS classes
- **...props** (React.HTMLAttributes<HTMLDivElement>) - All other div props
```

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

### ChainOfThoughtContent

Source: https://www.prompt-kit.com/docs/chain-of-thought

The content area displayed when a step is expanded.

```APIDOC
## ChainOfThoughtContent

### Props
- **children** (React.ReactNode) - Required - Content displayed when expanded
- **className** (string) - Optional - Additional CSS classes
- **...props** (React.ComponentProps<typeof CollapsibleContent>) - Optional - Additional collapsible content props
```

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

### SystemMessage Component

Source: https://www.prompt-kit.com/docs/system-message

The SystemMessage component displays contextual information. It accepts various props to control its appearance, severity, and interactive elements.

```APIDOC
## SystemMessage Component

### Description
Displays a contextual message with optional severity styling, icons, and call-to-action buttons.

### Props
- **children** (React.ReactNode) - Content displayed inside the system message
- **variant** ("action" | "warning" | "error") - Default: "action". Severity of the message, controlling text and icon styles
- **fill** (boolean) - Default: false. When true, applies a semantic background color and hides the border
- **icon** (React.ReactNode) - Custom icon to display instead of the default severity icon
- **isIconHidden** (boolean) - Default: false. Hides the icon entirely when set to true
- **cta** (CTAConfig) - Configuration for the optional call-to-action button
- **className** (string) - Additional CSS classes
- **...props** (React.HTMLAttributes<HTMLDivElement>) - Additional div props

### CTA Configuration
- **label** (string) - Text displayed inside the button
- **onClick** (() => void) - Optional click handler
- **variant** ("solid" | "outline" | "ghost") - Default: "solid". Maps to button variants
```

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

### FeedbackBar Component API

Source: https://www.prompt-kit.com/docs/feedback-bar

The FeedbackBar component accepts several props to customize its appearance and behavior, including callback functions for user interactions.

```APIDOC
## FeedbackBar

### Description
A component to collect user feedback on AI responses.

### Props
- **title** (string) - Optional - The question or title to display
- **icon** (React.ReactNode) - Optional - An icon to display next to the title
- **onHelpful** (() => void) - Optional - Callback when "helpful" is clicked
- **onNotHelpful** (() => void) - Optional - Callback when "not helpful" is clicked
- **onClose** (() => void) - Optional - Callback when the close button is clicked
- **className** (string) - Optional - Additional CSS classes
```
Tokens:
Raw