组件 MCP 服务器
MCP服务器通过HTTP端点暴露MercadoLibre的UI组件目录，以便集成AI工具。
它的功能/作用
这个仓库提供了一个模型上下文协议（MCP）服务器，通过HTTP端点暴露UI组件目录。它允许AI工具和其他服务查询组件信息，包括属性、变体、样式和使用详情。
生产环境URL
实时终端： https://meli-xmcp-poc.vercel.app/mcp
如何食用
协议
通过HTTP POST的JSON-RPC 2.0
必需的请求头
Content-Type: application/jsonAccept: application/json
可用工具
1. 获取设计规格
返回使用此MCP（可能是指某种开发平台或框架）生成用户界面（UI）的实现规范和指导。参数：
{
"jsonrpc": "2.0",
"id": "0",
"method": "tools/call",
"params": {
"name": "get_design_specifications",
"arguments": {
"versions": { "andes": "latest" }
}
}
}回应是一个 content 包含单个元素的数组 text 包含带有实施指南（导入、依赖项、辅助组件、验证检查清单）的Markdown字符串的项目 versions \object\ 是可选的，目前仅用于在文档头部回显 Andes 的版本。
2. 列出组件（或“组件列表”）
获取所有组件，并可选择性地进行过滤
{
"jsonrpc": "2.0",
"id": "1",
"method": "tools/call",
"params": {
"name": "list_components",
"arguments": {
"query": "button",
"tags": ["interactive"],
"packageFilter": "@meli/ui"
}
}
}3. 获取组件
获取详细的组件规格说明
{
"jsonrpc": "2.0",
"id": "2",
"method": "tools/call",
"params": {
"name": "get_component",
"arguments": {
"name": "Button",
"variant": "primary"
}
}
}集成选项
- 从任何服务直接进行HTTP调用
- MCP客户端库（Cursor、Claude Desktop）
- 自定义AI工具集成
- 组件文档生成器
响应格式
- 信封所有工具响应均使用MCP
content数组。每个条目都是一个包含以下内容的对象：{ type: "text", text: string }. - 文本有效载荷:
- get_design_specifications返回一个包含实施指南的Markdown字符串。不包含前置的JSON。消费者应将其视为 content[0].text 作为Markdown。 - list_components返回一个简化组件的 JSON 字符串数组 [{ name, description, purpose }]。 - get_component返回一个形状为（特定结构）的JSON字符串化对象
{
"components": [ { /* component spec from catalog */ } ],
"required_dependencies": { "clsx": "^2.0.0" },
"package_json_dependencies": { "clsx": "^2.0.0" },
"installation_commands": ["pnpm add clsx", "npm install clsx", "yarn add clsx"],
"setup_instructions": ["..."],
"critical_notes": ["..."],
"helper_components": [
{
"name": "Spinner",
"description": "...",
"files": [ { "path": "components/Spinner/Spinner.tsx", "content": "..." }, { "path": "components/Spinner/Spinner.module.css", "content": "..." } ]
}
]
}注释：
required_dependencies，installation_commands，setup_instructions，critical_notes，以及helper_components根据组件情况有条件地包含（例如，在存在时包含Button）。- 这个（或“该”）
text字段是作为字符串的JSON；消费者在需要时应将其解析为对象。
遗留工具名称映射
如果您之前使用的是带有Andes前缀的工具名称进行集成，请使用以下映射：
andes-design-specifications→get_design_specificationsandes-components-list→list_componentsandes-components→get_component
模式差异：
get_design_specifications:versions是可选的；没有单独的version工具。list_components接受{ query?, tags?, packageFilter? }(不versions）。get_component接受{ name, variant? }而不是CSV（逗号分隔值）文件componentName。
发展
这个项目是用 创建XMCP应用程序。
入门指南/开始使用
首先，运行开发服务器：
npm run dev
# or
yarn dev
# or
pnpm dev这将使用所选的传输方法启动MCP服务器。
项目结构
这个项目采用了结构化方法，其中工具会自动被发现并使用 src/tools 目录。每个工具在其各自的文件中定义，文件结构如下：
import { z } from "zod";
import { type InferSchema } from "xmcp";
// Define the schema for tool parameters
export const schema = {
a: z.number().describe("First number to add"),
b: z.number().describe("Second number to add"),
};
// Define tool metadata
export const metadata = {
name: "add",
description: "Add two numbers together",
annotations: {
title: "Add Two Numbers",
readOnlyHint: true,
destructiveHint: false,
idempotentHint: true,
},
};
// Tool implementation
export default async function add({ a, b }: InferSchema) {
return {
content: [{ type: "text", text: String(a + b) }],
};
}添加新工具
添加一个新工具：
- 创建一个新的
.ts文件在src/tools目录 - 导出一个
schema使用Zod定义工具参数的对象 - 导出一个
metadata带有工具信息的对象 - 导出一个实现工具逻辑的默认函数
为生产构建（或：准备生产环境）
为生产环境构建您的项目：
npm run build
# or
yarn build
# or
pnpm build这将编译你的TypeScript代码并将其输出到 dist 目录。
运行服务器
你可以为使用以下构建的传输运行服务器：
- HTTP:（可翻译为“超文本传输协议:”或保持原样，因为“HTTP”本身在中文中常被直接使用，无需翻译）
node dist/http.js - STDIO：（通常指标准输入输出库，全称为Standard Input and Output）
node dist/stdio.js
根据所选的传输方法，将会为您添加一个自定义的启动脚本到 package.json 文件。
对于HTTP：
npm run start-http
# or
yarn start-http
# or
pnpm start-http对于STDIO：
npm run start-stdio
# or
yarn start-stdio
# or
pnpm start-stdio