prompt-kit

前端开发者与AI应用构建者使用prompt-kit快速搭建专业级AI界面——基于shadcn/ui设计哲学，提供ChainOfThought、PromptInput、ChatContainer等20+专为AI场景优化的React组件，支持通过MCP协议在Cursor等AI编码工具内直接浏览和添加组件。

它能做什么

prompt-kit聚焦AI应用的前端交互层，覆盖从提示词输入到推理过程展示的完整链路。核心组件包括可折叠的ChainOfThought（分步推理展示）、带文件上传和发送按钮的PromptInput、自动滚动的ChatContainer、Markdown渲染的Message、代码高亮的CodeBlock、用户反馈的FeedbackBar、文件上传与图片加载器、文本闪烁效果Text Shimmer、思考过程条Thinking Bar、工具调用块Tool Blocks等。所有组件遵循shadcn/ui的样式系统，支持通过Tailwind CSS自定义主题。

• ChainOfThought：分步展示AI推理过程，支持折叠/展开，可标记最后一步
• PromptInput：组合输入框与操作按钮（上传文件、发送），支持tooltip提示
• ChatContainer：聊天容器，内置ScrollButton实现自动滚动到底部
• FeedbackBar：用户对AI回复的反馈按钮条
• Thinking Bar：显示AI思考中的动态条
• Tool Blocks：展示AI调用的外部工具块

怎么上手

安装前提：Node.js 18+、React 19+，且项目中已配置shadcn/ui。通过shadcn CLI安装单个组件，命令格式为npx shadcn@latest add "https://prompt-kit.com/c/[COMPONENT].json"。安装后从@/components/ui/路径导入组件即可使用。

• CLI安装：npx shadcn@latest add "https://prompt-kit.com/c/chain-of-thought.json"
• 手动安装：从GitHub仓库复制组件源码到项目
• MCP集成：在Cursor中配置.cursor/mcp.json，设置REGISTRY_URL为https://www.prompt-kit.com/c/registry.json，即可在AI编码工具内通过自然语言指令添加组件

收费与限制

prompt-kit完全开源，代码托管在GitHub（ibelick/prompt-kit），采用MIT许可证。当前版本为持续开发中的工作进展，组件数量仍在扩展，官方欢迎反馈和贡献。

• 许可证：MIT，可自由使用、修改和商用
• 开发状态：持续迭代中，组件库会不断扩充
• 贡献方式：通过GitHub提交Issue或Pull Request

和同类的差异

与通用UI组件库（如shadcn/ui本身、Radix UI）不同，prompt-kit专为AI应用场景设计，组件直接对应AI交互的典型需求（如推理步骤展示、提示词输入、模型上下文协议集成）。它建立在shadcn/ui之上，复用其设计原则和样式系统，但目标不是构建通用组件库，而是提供AI界面的“积木”。

• 生态绑定：与shadcn/ui、Tailwind CSS深度绑定，适合已有该技术栈的项目

常见问题

Q1：prompt-kit必须依赖shadcn/ui吗？

A1：是的。prompt-kit构建在shadcn/ui之上，安装前需要先在项目中配置好shadcn/ui及其依赖（React 19+、Tailwind CSS）。组件安装使用shadcn CLI，样式系统完全继承shadcn/ui的设计原则。

Q2：如何在Cursor中使用prompt-kit的MCP功能？

A2：在项目根目录创建.cursor/mcp.json文件，添加prompt-kit服务器配置：设置command为npx -y shadcn@canary mcp，env中REGISTRY_URL指向https://www.prompt-kit.com/c/registry.json。重启Cursor后，即可在聊天中通过自然语言指令（如“添加PromptInput组件”）浏览、预览和添加组件。

Q3：prompt-kit的ChainOfThought组件有哪些可配置项？

A3：ChainOfThought组件包含ChainOfThought、ChainOfThoughtStep、ChainOfThoughtTrigger、ChainOfThoughtContent、ChainOfThoughtItem五个子组件。Step支持isLast（标记最后一步）、leftIcon（前置图标）、swapIconOnHover（悬停时图标交换）等属性，Trigger和Content继承Collapsible的展开/折叠行为。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。