# @chakra-ui/react-mcp 中文文档

规范地址：https://npmcn.com/package/%40chakra-ui/react-mcp/

版本：2\.1\.1
npm 元数据更新时间：2025-11-03T11:58:46.654Z
中文译文更新时间：2026-11-09T09:54:22.761Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40chakra-ui/react-mcp
原文对照：https://npmcn.com/package/%40chakra-ui/react-mcp/?lang=original
项目主页：https://chakra-ui.com/
源码仓库：https://github.com/chakra-ui/chakra-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：57 kB，3 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2025-07-28T15:20:08.064Z
- 最新版本发布：2025-11-03T11:58:46.417Z
- 近 30 天下载量：9822（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

Chakra UI 的官方 MCP 服务器

## 安装

```sh
npm install @chakra-ui/react-mcp
```

也可以使用：`pnpm add @chakra-ui/react-mcp`、`yarn add @chakra-ui/react-mcp`、`bun add @chakra-ui/react-mcp`

## README

# Chakra UI MCP 服务器

一个MCP服务器,提供AI助手访问Chakra UI组件, 实例、迁移模式和溢价模板.

## 特征

-   **构成部分库**: 获取组件、道具和使用示例
-   **移徙支助**: v2 到 v3 用代码前/后更新指导 片断
-   **设计托肯斯**: 获取语义符号和文本样式以求一致 主题
-   **高级模板**: 查克拉大学 Pro 块和组件模板(要求) API 密钥)

## 可用工具

-   `get_components` - 列出所有 Chakra UI 组件
-   `get_component_props` - 获取组件属性和配置
-   `get_component_example` - 获取使用实例和代码模式
-   `get_theme` - 获得主题符号、语义符号、文本样式和图层样式
-   `list_blocks` - 列出查克拉UI Pro 块
-   `get_component_templates` - 获得溢价组件模板(Pro)
-   `v2_to_v3_code_review` - 带有代码片段的移民指南

## 设置

### 克洛德桌面/ 光标

添加到您的 Claude 桌面或光标配置文件 :

```json
{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"],
      "env": {
        "CHAKRA_PRO_API_KEY": "your-api-key-here"
      }
    }
  }
}
```

### OpenAI 代码

添加到您的 `~/.codex/config.toml` 文件 :

```toml
[mcp_servers.chakra-ui]
command = "npx"
args = ["-y", "@chakra-ui/react-mcp"]
startup_timeout_ms = 20_000

# Optional: Add Chakra Pro API key if using premium features
# [mcp_servers.chakra-ui.env]
# CHAKRA_PRO_API_KEY = "your-api-key-here"
```

或者使用 CLI 命令 :

```bash
codex mcp add chakra-ui -- npx -y @chakra-ui/react-mcp
```

**说明:** 需要代码 CLI v0.34.0 或更后.

### 环境变量

-   `CHAKRA_PRO_API_KEY` (可选) - 用于访问溢价模板和块

## 发展

```bash
pnpm install
pnpm build
pnpm dev
```

## 许可证

麻省理工学院 @ Chakra系统

## 常见问题

### @chakra-ui/react-mcp 是什么？

Chakra UI 的官方 MCP 服务器

### 如何安装 @chakra-ui/react-mcp？

在项目目录运行 npm install @chakra-ui/react-mcp，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 chakra-ui-mcp，可以用 npx chakra-ui-mcp 直接运行。

### @chakra-ui/react-mcp 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/chakra-ui\_\_react-mcp 是否存在。

### @chakra-ui/react-mcp 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @chakra-ui/react-mcp 可以商用吗？

@chakra-ui/react-mcp 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @chakra-ui/react-mcp 的下载量有多少？

根据 npm 官方下载统计，@chakra-ui/react-mcp 在 2026/10/10 – 2026/11/08 这 30 天内被下载 9,822 次，日均约 327 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chakra-ui/react-mcp 还在维护吗？

最新版本 2\.1\.1 发布于 2025/11/03（1 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/07/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。