Connect Prompt Kit to an AI runtime

Prompt Kit's focused display components can consume data from any runtime. The Chatbot and Tool Calling application examples are more opinionated: upstream uses Next.js App Router route handlers, AI SDK 5, @ai-sdk/openai, and @ai-sdk/react to stream model output to the browser.

Server boundary

1. Create the route handler used by the installed example and keep provider credentials in server-only environment variables.
2. Install the AI SDK packages and provider selected by your application. The upstream example uses OPENAI_API_KEY and gpt-4.1-nano; neither choice is a requirement of the visual components.
3. Validate and authorize messages, uploads, and tool arguments on the server. The UI is a presentation and interaction layer, not a trust boundary.
4. Return the streaming response shape expected by the installed AI SDK hooks. Keep error and cancellation states visible in the interface.

Tools and attachments

Tool Calling demonstrates a complete request, server tool declaration, streamed tool state, and rendered result. Replace its example tool with your own validated server operation. Do not expose provider secrets or privileged tool credentials to the client.

File Upload supplies browser-side selection and preview behavior. Decide size, type, retention, scanning, and deletion policy in the consuming application, and upload through an authenticated endpoint rather than treating the preview as persistence.

Production checks

• Exercise empty, streaming, completed, cancelled, failed, and retry states.
• Confirm long Markdown, code, source citations, tool results, and attachments remain usable at small widths.
• Announce changing status to assistive technology without reading every token.
• Do not copy the upstream bring-your-own-key local-storage pattern into a production application.

Fit Prompt Kit into an existing shadcn application

Prompt Kit registry payloads assume a conventional shadcn project. Install into a clean branch first, then reconcile imports and tokens with the consuming application instead of replacing its established theme.

Required project pieces

• A working Tailwind CSS setup and the shadcn cn utility at @/lib/utils.
• The shadcn primitives listed in each payload's registryDependencies, such as Textarea, Tooltip, Avatar, Button, Collapsible, and Scroll Area.
• The package dependencies declared by the selected item. Markdown and Code Block have heavier syntax-highlighting and Markdown dependencies than basic message layout.
• Tailwind typography and animation support where the selected component uses prose styles or animated utilities.

Prompt Kit uses semantic colors such as background, foreground, border, card, muted, and primary. Map those tokens in both themes. Preserve the Tailwind 4 custom dark variant. Text Shimmer uses animate-[shimmer_4s_infinite_linear], but its public registry payload omits the global keyframes. Add the upstream definition to the global stylesheet when using Text Shimmer or Thinking Bar:

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

Check rendered contrast after replacing the site palette.

In a React Server Components application, place a client boundary at the smallest interactive Prompt Kit component. The documentation site's Inter, Geist Mono, and next-themes setup are optional presentation choices, not registry requirements.