使用说明

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:*
<wa-card>
  <div slot="header">Card Title</div>
  <p>Card content goes here</p>
  <wa-button slot="footer" variant="brand">Action</wa-button>
</wa-card>

其他兼容的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许可证。有关详细信息，请参阅单个软件包许可证。

🔗 链接

网络真棒 -此服务器集成的组件库
模型上下文协议 -支持AI集成的协议
语义释放 -自动版本控制
GitHub存储库