关于 UICapsule
UICapsule 是一个精选的 React 交互组件合集，通过 shadcn CLI 安装。它面向需要动效独特组件的前端开发者，并可通过 MCP 让 Agent 按功能检索和安装组件。
主要功能
- 01按功能描述搜索组件
- 02通过 shadcn CLI 安装组件
- 03提供具有独特动效的 React 组件
- 04支持 Streamable HTTP 连接
适用场景
- 01让编码 Agent 按用途查找并安装 React 组件
- 02为界面快速添加带有特殊动效的组件
MCP 相关
UICapsule 提供远程 MCP 服务，客户端可通过同一 HTTP 地址检索并安装组件。
配置
远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。
服务地址
https://www.uicapsule.com/mcp一键复制安装命令
Claude CodeTerminal
claude mcp add --transport http com-uicapsule-components https://www.uicapsule.com/mcpCursor.cursor/mcp.json
{"mcpServers":{"com-uicapsule-components":{"type":"http","url":"https://www.uicapsule.com/mcp"}}}在 Cursor 中打开VS Code.vscode/mcp.json
{"servers":{"com-uicapsule-components":{"type":"http","url":"https://www.uicapsule.com/mcp"}}}在 VS Code 中打开Claude Desktopclaude_desktop_config.json
{"mcpServers":{"com-uicapsule-components":{"type":"http","url":"https://www.uicapsule.com/mcp"}}}Windsurf~/.codeium/windsurf/mcp_config.json
{"mcpServers":{"com-uicapsule-components":{"serverUrl":"https://www.uicapsule.com/mcp"}}}命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。
工具
2| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| tags | array | 否 | 仅包含带有所有这些标签的组件 |
| limit | integer | 否 | |
| query | string | 否 | 自由文本，例如 "rotary dial" 或 "ios volume slider" |
详细介绍
UICapsule
精选组件，带来愉悦体验
安装组件
npx shadcn@latest add @uicapsule/<slug>
访问 www.uicapsule.com 浏览 slug。
MCP
让你的 Agent 按功能搜索并安装组件：
claude mcp add --transport http uicapsule https://www.uicapsule.com/mcp
任何支持 Streamable HTTP 的客户端都可以使用同一个 URL。该服务也已列入
MCP Registry，名称为 com.uicapsule/components。
评论
支持 Markdown
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。