prompt-kit：19 个 AI 聊天界面的 React 组件，推理展示是强项

做一个 AI 聊天产品的前端，业务逻辑之外总有那么一层「聊天特有的碎活」：思维链怎么折叠展示、推理中状态的动效、代码块带高亮和复制、文件上传拖拽、消息流式渐显、工具调用的步骤可视化。prompt-kit 把这些做成了 19 个 React 组件，shadcn 生态的一行命令装进项目，源码归你随便改。3000 stars 不到、打磨了一年半，是这个细分里最值得关注的选择之一。

项目简介

prompt-kit 自我定位是「AI 应用的核心构建块」，作者 ibelick，MIT 协议，2025 年 2 月起维护。它是 React + TypeScript + Tailwind 的组件库，分发走 shadcn 注册表模式：组件不作为 npm 依赖发布，而是把源码拷进你的 components/ 目录，样式和行为完全归你的代码库管。

之前介绍过 Vercel 的 AI Elements，两者定位相近。差别在于 AI Elements 深度绑定 Vercel 的 AI SDK 生态，prompt-kit 是社区项目、不挑后端，OpenAI SDK、Vercel AI SDK、AI SDK、Chat UI 的集成示例都给了，还支持 MCP。选哪个看你的技术栈绑多深。

19 个组件都覆盖什么

按功能大致分四组。

会话主体：Chat Container（聊天容器）、Message（单条消息）、System Message（系统提示条）、Prompt Input（输入框，多行带发送）、Prompt Suggestion（提示词起点）、Scroll Button（回到底部）、File Upload（上传）。

推理与思考：这是它最近发力的方向，四个新组件里三个在这块——Thinking Bar（思考状态条）、Reasoning（推理内容展示）、Text Shimmer（微光文字）、Chain of Thought（思维链折叠）。

内容渲染：Markdown（消息排版）、Code Block（高亮加复制）、Image、Steps（执行步骤）、Tool（工具调用展示）、Source（引用来源）、Loader（加载态）。

反馈：Feedback Bar（点赞点踩，新组件）。

推理模型的界面需求今年明显变多，这套组件把「思考中、思考完、跳过思考、展示推理过程」的完整链路都照顾到了，这是它比一般聊天 UI 库新的地方。

拿 Thinking Bar 看它的 API 设计

从最近新增的 Thinking Bar 能看出这个库的风格：一个组件只做一件事，API 收得很紧。

Prop	类型	默认值	说明
`text`	string	`"Thinking"`	状态文字
`stopLabel`	string	`"Answer now"`	停止按钮文案
`onStop`	`() => void`	—	点击停止的回调
`onClick`	`() => void`	—	点击整条的回调
`className`	string	—	追加样式

五个 prop 就把「模型正在思考、用户等不及了想直接要答案」这个交互闭环做完了：状态条本身可点击展开，stop 按钮触发跳过，文案全部可换。没有多余的状态管理，思考进度的数据逻辑留在你的应用里。

安装与集成

前提是项目已经配置好 shadcn/ui。一行命令：

bash

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

想装全套就把组件逐个 add，或者从仓库一次拷入。装完后 import { ThinkingBar } from "@/components/prompt-kit/thinking-bar" 直接用。官网每个组件文档页都有可交互的 live 示例和代码，跟 Vercel AI Elements 的文档体验一个水准。

注意事项

组件源码进你的仓库，升级要自己 diff 同步，没有 npm update 可用——这是 shadcn 模式的代价，换来的是无黑盒
默认样式基于 Tailwind，深度定制前先读一遍拷进来的源码
推理相关组件（Reasoning、Chain of Thought）需要你的后端返回对应的思考数据结构，先对齐数据再套组件
与 AI Elements 功能重叠度高，两个都装没必要，按技术栈选一个

项目链接

GitHub 仓库：https://github.com/ibelick/prompt-kit
官网与文档：https://www.prompt-kit.com