Web Awesome MCP Server Monorepo
A. 单体仓库 包含用于集成的工具和服务器 网络真棒 通过AI助手和开发工作流程的组件 模型上下文协议（MCP）.
______________________________________________________________________
📦 包裹
@沙邦/华 -MCP服务器
核心 模型上下文协议（MCP）服务器 它为AI助手提供了对Web Awesome组件和实用程序的访问。
主要特点：
- 🔍 组件发现 -列出并探索Web Awesome组件
- 🛠️ 代码生成 -为组件生成即用型HTML
- 📚 文档访问 -检索详细的组件文档
- 🎨 主题定制 -生成用于主题化的CSS变量
- 🧰 实用类 -访问Web Awesome实用程序文档
快速开始
npx @sha-bang/wa-mcp演示
https://github.com/user-attachments/assets/968ccaab-7656-4d43-b1eb-32d16dc3e101
______________________________________________________________________
🚀 入门指南
先决条件
- Node.js 22+（语义发布需要）
- npm 或 纱线
安装
克隆存储库并安装依赖项：
git clone https://github.com/haja-ran/wa-mcp.git .
cd wa-mcp
npm install发展
# Run tests across all packages
npm test
# Build all packages
npm run build
# Start development server for MCP package
npm run dev______________________________________________________________________
🔌 与编辑器一起使用
您可以将此MCP服务器与支持模型上下文协议的编辑器一起使用。下面是VS Code和Zed的设置指南。
VS代码设置（临床扩展）
您可以通过支持模型上下文协议的AI助手扩展将此MCP服务器与VS代码一起使用。以下是如何设置它 克莱恩 （原名克劳德·德夫）：
使用Cline扩展进行设置
- 安装Cline扩展
- 打开VS代码 - 转到扩展（macOS上的⌘+Shift+X，Windows/Linux上的Ctrl+Shift+X） - 搜索“Cline”并安装
- 配置MCP服务器
- 打开Cline设置（单击侧边栏中的Cline图标，然后单击设置齿轮图标） - 导航到“MCP服务器”部分 - 点击“编辑配置”打开MCP设置文件
- 添加Web Awesome MCP服务器
将以下配置添加到MCP设置文件中：
{
"mcpServers": {
"web-awesome": {
"command": "npx",
"args": ["@sha-bang/wa-mcp"]
}
}
}- 重新启动Cline
- 关闭并重新打开Cline面板，或重新加载VS Code - Cline现在可以访问Web Awesome组件
使用服务器
配置后，您可以要求Cline：
- 列出组件：“显示所有Web Awesome按钮组件”
- 生成代码：“使用variant='brand'和size='large'创建一个Web Awesome按钮”
- 获取文档：“wa alert组件支持哪些属性？”
- 自定义主题：“为带有品牌颜色#3b82f6的深色主题生成CSS”
- 探索实用程序：“间距有哪些实用类别？”
对话示例
You: "Create a Web Awesome card component with a header and button"
Cline: *Uses the generateComponentCode tool to create:*
Card Title
Card content goes here
Action
其他兼容的VS代码扩展
此MCP服务器应与支持模型上下文协议的任何VS代码扩展兼容，包括：
- 克莱恩 （推荐）
- 其他与MCP兼容的AI助手
______________________________________________________________________
Zed编辑器设置
Zed通过其AI助手面板内置了对MCP服务器的支持。以下是如何配置它：
1.安装Zed编辑器
如果你还没有，请从以下网址下载Zed zed.dev
2.配置MCP服务器
打开Zed设置文件：
- macOS/Linux：
~/.config/zed/settings.json - 或使用： Zed>设置>打开设置 (⌘+,)
3.添加Web Awesome MCP服务器
将以下配置添加到您的 settings.json:
{
"context_servers": {
"web-awesome": {
"command": "npx",
"args": ["@sha-bang/wa-mcp"]
}
}
}或者，如果您全局安装了软件包，则可以指定本地路径：
{
"context_servers": {
"web-awesome": {
"command": "node",
"args": ["/path/to/wa-mcp-server/packages/mcp/dist/index.js"]
}
}
}4.重新启动Zed
关闭并重新打开Zed以使更改生效。Web Awesome MCP服务器现在将在AI助手面板中可用。
使用Zed助手
配置后，您可以使用Zed的AI助手：
- 询问Web Awesome组件
- 直接在文件中生成组件代码
- 无需离开编辑器即可获取文档
- 使用CSS变量自定义主题
示例用法
打开AI助手面板（macOS上的⌘+Shift+A）并尝试：
"Create a Web Awesome button component with a brand variant"
"Show me the properties available for wa-dialog"
"Generate a responsive card layout using Web Awesome components"助手将使用MCP服务器提供有关Web Awesome组件的准确、最新信息。
______________________________________________________________________
🏗️ 项目结构
wa-mcp/
├── packages/
│ └── mcp/ # MCP Server package
│ ├── src/ # Source code
│ ├── dist/ # Built output
│ ├── package.json # Package configuration
│ └── README.md # Package documentation
├── .github/
│ └── workflows/ # GitHub Actions CI/CD
├── package.json # Monorepo root configuration
└── README.md # This file______________________________________________________________________
📋 开发工作流程
承诺公约
此项目使用 约定式提交 对于自动版本控制：
# Feature commits
git commit -m "feat: add new component tool"
# Bug fixes
git commit -m "fix: resolve memory leak in server"
# Breaking changes
git commit -m "feat: redesign API
BREAKING CHANGE: remove deprecated methods"发布过程
发布内容如下 自动管理 通过 语义释放:
- 补丁发布 (
1.0.0→1.0.1)用于修复错误 - 小规模发布 (
1.0.0→1.1.0)对于新功能 - 及主版本升级软件 (
1.0.0→2.0.0)为了打破变化
推到 main 通过GitHub Actions触发自动发布。
______________________________________________________________________
🤝 贡献
我们欢迎捐款！请查看 MCP服务器自述文件 详细的贡献指南。
贡献者快速设置
- 分叉 存储库
- 克隆 你的叉子：
git clone https://github.com/YOUR_USERNAME/wa-mcp.git - 创建要素分支:
git checkout -b feature/your-feature - 进行更改 并确保测试通过：
npm test - 提交 使用传统格式：
git commit -m "feat: your feature description" - 推 并创建一个pull请求
______________________________________________________________________
📄 许可证
该项目根据 MIT许可证。有关详细信息，请参阅单个软件包许可证。
______________________________________________________________________
🔗 链接
-