AI chat UI component toolkit built on shadcn/ui. Use when building or refining chat interfaces, agent session UIs, prompt inputs, message bubbles, tool-call cards, reasoning/thinking displays, streaming responses, sources, file uploads, feedback bars, or other AI application UI. Prefer prompt-kit copy-in components over hand-written chat UI code in this project; adapt generated components only when needed for project i18n, data mapping, or styling tokens.
설치
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
AI chat UI component toolkit built on shadcn/ui. Use when building or refining chat interfaces, agent session UIs, prompt inputs, message bubbles, tool-call cards, reasoning/thinking displays, streaming responses, sources, file uploads, feedback bars, or other AI application UI. Prefer prompt-kit copy-in components over hand-written chat UI code in this project; adapt generated components only when needed for project i18n, data mapping, or styling tokens.
prompt-kit is a library of customizable, high-quality UI components for AI applications. It provides ready-to-use components for building chat experiences, AI agents, autonomous assistants, and more, with a focus on rapid development and beautiful design.
prompt-kit is built on top of shadcn/ui and extends it with specialized components for AI interfaces. It uses Next.js, React 19, and Tailwind CSS. The components are designed to be easily customizable and can be installed individually using the shadcn CLI.
Documentation
README: Installation instructions and basic usage guide
Installation: Detailed installation guide, how to install prompt-kit components
components/prompt-kit/message.tsx: A component for displaying chat messages with support for avatars, markdown content, and interactive actions
components/prompt-kit/chat-container.tsx: A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth and responsive user experience
components/prompt-kit/scroll-button.tsx: A floating button component that appears when users scroll up in a container, allowing them to quickly return to the bottom of the content
components/prompt-kit/loader.tsx: A component for displaying a loading indicator with multiple variants and customizable styling
components/prompt-kit/response-stream.tsx: A component to simulate streaming text on the client side, perfect for fake responses, or any controlled progressive text display.
components/prompt-kit/file-upload.tsx: A component for creating drag-and-drop file upload interfaces with support for single or multiple files, custom triggers, and visual feedback during file dragging operations.
components/prompt-kit/jsx-preview.tsx: A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion.
components/prompt-kit/tool.tsx: Displays tool call details including input, output, status, and errors. Ideal for visualizing AI tool usage in chat UIs.
components/prompt-kit/source.tsx: Displays website sources used by AI-generated content, showing URL details, titles, and descriptions on hover.
components/prompt-kit/image.tsx: A component for displaying images from base64 or Uint8Array data, with full accessibility and responsive styling. Perfect for AI-generated or user-uploaded images.
components/prompt-kit/steps.tsx: A component for displaying a sequence of operations in a collapsible layout. Each step can include details and an optional vertical bar. Useful for showing AI steps like reasoning traces, tool calls, or process logs.
