DOCSEARCHbyAlgolia
Submit Docs

prompt-kit

repository·main·Indexed 25 days ago

https://github.com/ibelick/prompt-kit

A library of high-quality, customizable UI components tailored for AI-driven applications such as chat interfaces, AI agents, and autonomous assistants. Built for use with shadcn/ui, it includes specialized components like ChainOfThought for reasoning chains, ChatContainer for auto-scrolling chat interfaces, CodeBlock with Shiki syntax highlighting, and FeedbackBar for collecting user responses.

Tokens
12.8K
Snippets
33
Records
104
Agent score
84%

What's inside prompt-kit

  2. Use the Steps component

    main
    The Steps component displays a sequence of operations in a collapsible layout. It is ideal for showing AI reasoning traces, tool calls, or process logs. You can customize the appearance with custom icons, vertical bars, or integrate it with the Source or Loader components.

  3. Use prompt-kit components via MCP chat

    main
    Once the MCP server is configured, you can interact with prompt-kit components directly through your AI tool's chat interface using natural language commands. You can browse the registry, add specific components to your project, view component details/previews, or request the construction of entire application layouts.

  4. Install the Feedback Bar component

    main

    You can install the Feedback Bar component using the shadcn CLI or by manual installation.

    Via CLI

    Run the following command to add the component directly to your project:

    Manual Installation

    1. Install the required dependency: npm install lucide-react
    2. Copy the component source code into your project (e.g., components/prompt-kit/feedback-bar.tsx).
    3. Update the import paths within the component to match your project's directory structure.
    npx shadcn add "https://prompt-kit.com/c/feedback-bar.json"

  6. Install Text Shimmer component

    main

    You can install the TextShimmer component using the shadcn CLI or by manually copying the source code.

    Using CLI: Run the following command to add the component directly to your project:

    Manual Installation:

    1. Copy the source code from components/prompt-kit/text-shimmer.tsx into your project.
    2. Update the import paths within the file to match your project's directory structure.
    npx shadcn add "https://prompt-kit.com/c/text-shimmer.json"

  7. Configure prompt-kit MCP for Cursor

    main

    To enable Cursor to access prompt-kit components directly, create a .cursor/mcp.json file in your project root and add the prompt-kit MCP server configuration. After saving the file, restart Cursor to apply the changes.

    {
    "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"
            }
        }
    }
}

  8. Install prompt-kit components

    main

    Before installing prompt-kit components, you must have shadcn/ui installed and configured in your project. Once shadcn/ui is ready, use the shadcn CLI to add specific prompt-kit components to your project.

    npx shadcn@latest add prompt-kit/[component]

  9. Install the Reasoning component

    main

    You can install the Reasoning component using the shadcn CLI or by manual installation.

    Using CLI: Run the following command to add the component directly to your project:

    Manual Installation:

    1. Copy the source code for the component into your project (e.g., components/prompt-kit/reasoning.tsx).
    2. Update the import paths within the file to match your project's directory structure.
    npx shadcn add "https://prompt-kit.com/c/reasoning.json"

  10. Install the Tool component

    main

    You can install the Tool component using the shadcn CLI or by manual installation.

    CLI Installation: Run the following command to add the component directly to your project:

    Manual Installation:

    1. Copy the source code from components/prompt-kit/tool.tsx into your project.
    2. Update the import paths within the file to match your project's directory structure.
    npx shadcn add "https://prompt-kit.com/c/tool.json"

  12. Install the Source component

    main

    You can install the Source component using the shadcn CLI or by manual installation.

    Using CLI: Run the following command to add the component directly to your project:

    Manual Installation:

    1. Copy the component code into your project (e.g., components/prompt-kit/source.tsx).
    2. Update the import paths within the file to match your project's directory structure.
    npx shadcn add "https://prompt-kit.com/c/source.json"