关键词

自定义元素Web组件HTML生成设计系统组件验证

项目简介

CEM MCP服务器是一个基于Model Context Protocol的服务器实现，专门为AI系统提供自定义元素（Web Components）的详细上下文信息，包括元素定义、属性、插槽、事件和CSS集成指南，确保AI生成的HTML代码符合设计系统规范。

主要功能

  • 资源访问：提供自定义元素的JSON模式、包发现、元素摘要和可访问性模式
  • 工具调用：提供HTML验证、属性建议、HTML生成和CSS集成指导
  • 跨包发现：支持多manifest文件，适用于复杂的设计系统
  • 实时更新：支持manifest文件的实时更新和重新加载
  • 组件理解：帮助AI系统理解自定义元素的正确用法和设计约束

安装步骤

npm install --save-dev @pwrs/cem

服务器配置

在MCP客户端中配置服务器时，需要设置以下参数：

{
  "mcpServers": [
    {
      "name": "cem",
      "command": "npx",
      "args": ["cem", "mcp"]

基本使用方法

  1. 确保项目中有自定义元素manifest文件（custom-elements.json）
  2. 在MCP客户端配置中添加CEM MCP服务器
  3. 服务器启动后，AI客户端即可访问自定义元素的完整上下文信息

注意：服务器通过stdio与客户端通信，所有JSON-RPC消息都通过标准输入输出传输

信息

分类

开发者工具

访问项目