shadcn-ui MCP 服务器
用于 shadcn/ui 组件引用的 MCP 服务器
这是一个基于 TypeScript 的 MCP 服务器,提供 shadcn/ui 组件的参考信息。它实现了一个模型上下文协议 (MCP) 服务器,帮助 AI 助手访问 shadcn/ui 组件的文档和示例。
特征
工具
list_shadcn_components
- 获取所有可用 shadcn/ui 组件的列表get_component_details
- 获取特定组件的详细信息get_component_examples
- 获取特定组件的使用示例search_components
- 按关键字搜索组件
功能
该服务器从以下位置抓取并缓存信息:
shadcn/ui 官方文档网站 ( https://ui.shadcn.com )
shadcn/ui GitHub 仓库
它提供的结构化数据包括:
组件描述
安装说明
使用示例
道具和变体
代码示例
发展
安装依赖项:
构建服务器:
对于使用自动重建的开发:
安装
Claude桌面配置
要与 Claude Desktop 一起使用,请添加服务器配置:
在 MacOS 上: ~/Library/Application Support/Claude/claude_desktop_config.json
在 Windows 上: %APPDATA%/Claude/claude_desktop_config.json
选项 1:使用本地构建
选项 2:使用 npx 命令
风帆冲浪配置
将其添加到您的./codeium/windsurf/model_config.json
:
游标配置
将其添加到您的.cursor/mcp.json
中:
调试
由于 MCP 服务器通过 stdio 进行通信,调试起来可能比较困难。我们推荐使用MCP Inspector ,它以包脚本的形式提供:
检查器将提供一个 URL 来访问浏览器中的调试工具。
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
帮助 AI 助手通过基于 TypeScript 的 MCP 服务器访问 shadcn/ui 组件文档和示例,该服务器提供组件详细信息、使用示例和搜索功能的参考信息。
Related MCP Servers
- AsecurityAlicenseAqualityAn MCP server implementation that provides tools for retrieving and processing documentation through vector search, enabling AI assistants to augment their responses with relevant documentation contextLast updated -35228MIT License
- AsecurityAlicenseAqualityA Model Control Protocol server that allows users to discover, install, and manage Shadcn UI components and blocks through natural language interactions in compatible AI tools.Last updated -678212MIT License
- AsecurityAlicenseAqualityProvides reference information for shadcn/ui components through a Model Context Protocol server that helps AI assistants access component documentation and examples.Last updated -4401MIT License
- AsecurityAlicenseAqualityA mcp server to allow LLMS gain context about shadcn ui component structure,usage and installationLast updated -71,7762,247MIT License
Appeared in Searches
- MCP server like shadcn for adding components from other registries
- Resources and Tools for Frontend Development (e.g., Jira, Figma, GitHub)
- A tool or library providing free-to-use UI code snippets for buttons and other components
- Using an MCP server with Atlassian JIRA to extract ticket descriptions
- Resources for React TypeScript UI Components