Box Kite

Name: Box Kite
Author: box-kite

本地服务

box-kite.dev开发工具12今天更新

代码仓库访问官网

关于 Box Kite

Box Kite 是面向编写 Box Kite 代码的 Agent 的 MCP 服务，内置库及其样式引擎信息。它提供工具查询组件契约，并验证样式值是否会生成 CSS。

主要功能

01搜索属性、组件、嵌套键和规则
02查看样式属性的可用值及 CSS
03检查组件属性、默认值和无障碍信息
04通过实际引擎验证样式属性
05检索库规则和可安装区块

适用场景

01为界面任务查找合适的属性或组件
02渲染前确认样式值是否受支持
03检查组件的键盘操作和 ARIA 行为
04获取现成的页面或布局区块

MCP 相关

该 MCP 服务提供六种工具，用于搜索 Box Kite 文档、检查组件和属性、验证样式，以及检索规则或区块。它通过 stdio 运行，包含与安装版本对应的库仓库数据。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "box-kite": {
      "command": "npx",
      "args": [
        "-y",
        "@box-kite/mcp"
      ]
    }
  }
}

启动命令npx -y @box-kite/mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@box-kite/mcp2.2.10stdio

工具

收录的工具列表 · 更新于今天

参数	类型	必填	说明
kind	enum	否	将搜索范围限定为一个语料库。省略则搜索全部四类。prop \| component \| nesting \| rule
limit	integer	否	命中结果数（默认值 12）。
query	string	是	UI 应执行的行为、CSS 属性，或你隐约记得的名称。

详细介绍

@box-kite/mcp

Box Kite MCP 服务：为编写 Box Kite 代码的 Agent 提供检索渠道。六种工具，聚焦能力本身——我可以编写什么、这个组件接受什么，以及任何文档镜像都无法回答的问题：这个值到底能不能用。

npx @box-kite/mcp

无需密钥、网络或状态。它回答的所有内容都内置于其中，来自你所安装版本对应的库自身仓库，也包括样式引擎。需要 Node 22 或更高版本。

安装

Claude Code

claude mcp add box-kite -- npx -y @box-kite/mcp

Cursor、VS Code、Codex、Zed——以及任何支持 stdio 的客户端：

{
  "mcpServers": {
    "box-kite": { "command": "npx", "args": ["-y", "@box-kite/mcp"] }
  }
}

工具

工具	能回答的问题
`search_docs`	你想构建的内容所涉及的属性、组件、嵌套键或规则——在这四类内容中排序，因此即使不知道名称，也能根据目标找到答案。
`get_props`	样式属性的完整记录：它生成的 CSS、接受的所有值、实测示例，以及数值属性按 1/2/4/8 测量的刻度。
`get_component`	单个组件的契约：属性和默认值、子部件、键盘映射以及它生成的 ARIA。
`check_styles`	通过真实引擎检查一组属性：每个属性生成的 CSS，或未生成 CSS 的原因。
`get_rules`	编写该库所依据的规则，可获取索引或完整内容。
`get_blocks`	`shadcn` CLI 安装的完整区块，例如数据网格页面、设置表单或仪表板外壳。

为什么需要 `check_styles`

Box Kite 为每个属性接受一组固定的值，不接受的值不会生成规则或类名，这是有意为之，因为拼写错误不应生成无效声明。开发构建会在页面渲染后于控制台警告一次；生产构建则完全不作提示。在任何内容渲染之前，要回答“bgColor="blue-550" 是否有效”，可以将其交给引擎：

check_styles { "props": { "p": 4, "bgColor": "blue-550", "fontSize": 14, "lineHeight": 1.5, "href": "/about" } }

✅ `p` → `.p-4{padding:1rem}`
❌ `bgColor` does not accept "blue-550" — no rule and no class name were written.
✅ `fontSize` → `.fontSize-14{font-size:0.875rem}`
⚠️ `lineHeight` → `.lineHeight-1\.5{line-height:1.5px}` — lineHeight={1.5} is a 1.5px line: lineHeight is direct pixels, …
⚠️ `href` an HTML attribute, not a style prop. It goes in `props={{ "href": … }}`.

每个属性的刻度步长都不同——间距按 ÷4、fontSize 按 ÷16、边框宽度则直接使用 px——因此 get_props 会测量刻度，而不是只描述刻度。