MCP 服务器

弥合 AI 代理与 Chakra UI 之间的差距

Chakra UI MCP 服务器是一款专用的模型上下文协议服务器，可为 AI 助手（例如 Claude Code、Cursor 和 Copilot）提供访问 Chakra UI 组件库、设计标记和迁移指南的权限。

¥The Chakra UI MCP Server is a specialized Model Context Protocol server that provides AI assistants (like Claude Code, Cursor, and Copilot) with access to the Chakra UI component library, design tokens, and migration guidance.

工具

¥Tools

Chakra UI MCP 向 AI 代理公开以下工具：

¥The Chakra UI MCP exposes the following tools to AI agents:

组件工具

¥Component Tools

list_components：获取所有可用组件的完整列表
get_component_props：任何组件的详细属性、类型和配置选项
get_component_example：获取代码示例和使用模式

Chakra UI Pro 工具

¥Chakra UI Pro Tools

这些工具使 AI 代理能够访问 Chakra UI Pro 中设计精良、响应迅速且易于访问的组件模板。

¥These tools provide AI agents with access to well-designed, fully responsive, and accessible component templates from Chakra UI Pro.

list_component_templates：列出 Chakra UI Pro 中可用的组件模板
get_component_templates：从 Chakra UI Pro 获取设计精良、响应迅速且易于访问的组件模板

note

这些工具需要有效的 Chakra UI Pro 许可证，并使用 Chakra UI Pro 生成的 API 密钥设置 CHAKRA_PRO_API_KEY 环境变量。有关设置说明，请参阅 Chakra UI Pro 集成部分。

¥These tools require an active Chakra UI Pro license and setting the CHAKRA_PRO_API_KEY environment variable with your API key generated from Chakra UI Pro. See the Chakra UI Pro Integration section for setup instructions.

设计系统工具

¥Design System Tools

get_theme：获取所有设计令牌的详细列表
theme_customization：自定义主题标记的创建和修改

迁移工具

¥Migration Tools

v2_to_v3_code_review：从版本 2 到版本 3 的迁移指南

设置

¥Setup

MCP 服务器目前仅支持 stdio 运输，并在 @chakra-ui/react-mcp 上发布。

¥The MCP server currently supports only stdio transport and is published at @chakra-ui/react-mcp.

Visual Studio Code

确保你已安装 GitHub Copilot 和 GitHub Copilot 聊天扩展。

在项目根目录下的 .vscode/mcp.json 文件中，添加 MCP 服务器块：

¥In the .vscode/mcp.json file at the root of your project, add the MCP server block:

.vscode/mcp.json

{
  "servers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

MCP 服务器现已准备就绪。在 MCP 服务器上点击“开始”。

¥The MCP server is now ready to use. Click on Start on the MCP server.

光标

¥Cursor

在项目根目录下的 .cursor/mcp.json 文件中，添加以下配置：

¥In the .cursor/mcp.json file at the root of your project, add the following configuration:

{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

如果 Cursor 未自动检测到更改，请重新启动编辑器或通过 "MCP 工具。" 手动启用 Chakra UI 服务器。

Claude 代码

¥Claude Code

确保你已安装 Claude Code。访问 Anthropic 文档获取安装说明。

在终端中运行以下命令以添加 Chakra UI MCP 服务器：

¥Run the following command in your terminal to add the Chakra UI MCP server:

claude mcp add chakra-ui -- npx -y @chakra-ui/react-mcp

MCP 服务器现已准备就绪。运行 claude 启动 Claude Code 会话。

¥The MCP server is now ready to use. Start a Claude Code session by running claude.

风帆冲浪

¥Windsurf

导航至 "设置" > "风帆冲浪设置" > "层叠"
点击 "管理 MCP" 按钮，然后点击 "查看原始配置" 按钮。
将以下内容添加到 MCP 配置文件：

.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

你可能需要点击 "刷新" 按钮才能在列表中看到 MCP 服务器。

Zed

前往“设置”>“打开设置”
在 settings.json 文件中，将 MCP 服务器添加为新的上下文服务器。

.config/zed/settings.json

{
  "context_servers": {
    "chakra-ui": {
      "source": "custom",
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

自定义 MCP 客户端

¥Custom MCP Client

要使用自定义 MCP 客户端在本地或开发环境中运行 MCP 服务器，你需要将 MCP 服务器添加到客户端的配置文件中。

¥To run the MCP server in a local or development environment using a custom MCP client, you need to add the MCP server to the client's configuration file.

{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

Chakra UI Pro 集成

¥Chakra UI Pro Integration

要启用 Chakra UI Pro 的高级组件模板，你需要配置 API 密钥。这需要有效的 Chakra UI Pro 许可证。

¥To enable access to premium component templates from Chakra UI Pro, you'll need to configure your API key. This requires an active Chakra UI Pro license.

设置 API 密钥

¥Setting Up Your API Key

从 Chakra UI Pro 用户菜单获取你的 API 密钥。
将 CHAKRA_PRO_API_KEY 环境变量添加到你的 MCP 配置中：

对于支持 env 的编辑器（VS Code、Cursor、Windsurf、Zed、Custom MCP）：

¥For editors with env support (VS Code, Cursor, Windsurf, Zed, Custom MCP):

{
  "env": {
    "CHAKRA_PRO_API_KEY": "your_api_key_here"
  }
}

Claude 代码：

¥For Claude Code:

claude mcp add chakra-ui --env CHAKRA_PRO_API_KEY=your_api_key_here -- npx -y @chakra-ui/react-mcp

配置完成后，list_component_templates 和 get_component_templates 工具将可用于访问 PRO 组件模板。

¥Once configured, the list_component_templates and get_component_templates tools will be available for accessing PRO component templates.

展示

LLMs.txt