关键词

Web组件AI编程助手UI开发代码生成自定义元素

项目简介

Web Component AI Tools是一个VS Code扩展，旨在通过Model Context Protocol (MCP) 服务器，将工作区和依赖项中的Web组件信息暴露给AI编程助手。它能够自动发现自定义元素、属性和API，使AI代理能够生成更准确、更符合项目实际情况的组件代码。

主要功能点

  • 自动组件发现: 自动扫描工作区和依赖包中的'custom-elements.json'清单文件，发现Web组件。
  • MCP服务器托管: 启动一个本地MCP服务器，支持HTTP和SSE传输协议，为AI助手提供实时组件信息访问。
  • AI助手集成: 与Copilot、Cursor、Windsurf等支持MCP的AI工具兼容，提供丰富的组件上下文。
  • 强大的组件工具: 提供搜索组件、获取组件详细信息（包括属性、方法、事件）以及列出所有可用组件等功能。
  • 组件资源访问: 通过MCP资源（如'manifest://components'）以JSON格式访问所有组件数据。

安装步骤

  1. 确保您已安装VS Code 1.99.0或更高版本。
  2. 在VS Code中打开Extensions侧边栏（'Ctrl+Shift+X' 或 'Cmd+Shift+X'）。
  3. 搜索 'd13.vscode-web-components-ai'。
  4. 点击 'Install' 按钮安装此扩展。

服务器配置

当扩展启动后，它会自动在本地启动一个MCP服务器。对于支持自动MCP发现的AI客户端（如VS Code 1.101.0及更高版本中的AI Chat），服务器会自动注册。您可以通过VS Code命令面板运行 'MCP: List Servers' 命令来查看已注册的服务器。

对于需要手动配置的MCP客户端，您需要提供服务器的URL。此扩展支持HTTP和SSE两种传输方式。服务器启动后，您可以获取其地址。以下是标准的MCP服务器配置JSON格式的示例（具体内容可能根据实际启动的端口有所不同）：

{
  "mcpServers": {
    "mcp-wcai-http": {
      "type": "http",
      "url": "http://127.0.0.1:<port>/mcp" // MCP服务器的HTTP端点URL
    },
    "mcp-wcai-sse": {
      "type": "sse",
      "url": "http://127.0.0.1:<port>/sse" // MCP服务器的SSE端点URL
    }
  }
}

请注意： '<port>' 是服务器启动时分配的端口号。您可以在VS Code中运行 'Web Component AI Tools: Show MCP Server Information' 命令，或通过命令面板运行 'MCP: List Servers' 来获取准确的服务器URL。扩展还会提供一个“Copy Config JSON”选项，可以直接复制预配置的JSON到剪贴板。MCP客户端通常只需要配置服务器的URL和类型即可建立连接，无需理解上述代码细节。

基本使用方法

安装并启动扩展后，AI助手将自动获得您工作区中Web组件的上下文。您可以在AI聊天或代码生成请求中提及您的自定义元素，AI将能够根据其API和文档生成准确的代码。

例如，您可以尝试：

  • 在AI聊天中提问：“如何使用我的自定义元素 '<my-button>'？”
  • 请求AI生成一段代码，其中包含您项目中定义的Web组件。
  • 使用AI助手查询组件的属性、方法和事件，例如：“搜索所有名为'dialog'的组件”，或“获取标签名为'my-card'的组件的详细信息”。

信息

分类

开发者工具

访问项目