Table, Bro

io.github.table-bro由 GitHub 账号 table-bro 发布v1.2.0更新于 Oct 26, 2026

Pixel-perfect Material (M3) data tables for your app in one prompt: Claude Code, Cursor, Codex.

已验证STDIO仅桌面开发者工具媒体与设计

概览

AI 生成的概览

Table, Bro 的 MCP 服务器为助手提供 Material 风格数据表格的参考文档、规格校验与代码生成,适用于 Angular 和原生 JS 项目。

可以做什么
  • 获取入门说明与参考文档:表格引擎原理、工具使用顺序、最小示例,以及按名称或查询返回的 API 主题与文档页
  • 检查项目:Table, Bro 包版本、框架、已注册皮肤、CSS、自定义元素、表格,以及配置问题与修复建议
  • 校验表格规格,列出每个错误和警告及其路径与修复方法
  • 根据规格或内置规格生成新表格的文件、项目配置和仍需手工完成的步骤
  • 为已有表格搭建单个组件:自定义单元格、行详情或筛选抽屉的筛选器,并说明如何接入
适用场景
适合在 Angular 或原生 JS 项目中使用 Table, Bro 构建或维护数据表格时,让助手生成正确的规格与代码而不是猜测 API。也适合排查表格无法渲染的问题。
运行要求
通过 npx 以 stdio 在本地运行,需要 Node.js 22.12 或更高版本;包按需下载,不安装到项目中。未声明账号、API 密钥或环境变量。服务器版本应与项目的 @table-bro/core 版本一致。inspect_project 需要项目目录,当客户端未提供工作区根目录时需通过 path 传入。
安装前请注意
服务器只读取项目、不写文件,生成的代码由助手写入,提交前应审阅改动。inspect_project 以文本方式读取项目,应指向正确的目录。付费模块需在启动时传入扩展包名,服务器随后会运行该包的代码。服务器与 @table-bro/core 版本不一致可能导致指引不匹配。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Table, Bro,将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Desktop only,通过 STDIO。 STDIO 服务会启动本地进程,因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照 仓库 中的启动说明。

README

@table-bro/mcp

The MCP server of Table, Bro: pixel-perfect Material (M3) data tables for Angular, and more. Add it to Claude Code, Cursor or Codex, tell the agent what table you need, and it installs the packages and generates the table, its setup and its cells from one request, for Angular and Vanilla JS. The server gives the agent the reference of the table, the check of a table spec and the code generator of a table, with the skins mat (Angular Material), bs (Bootstrap 5) and nv (native HTML). The agent writes the files; the server only reads.

sh
claude mcp add --scope project table-bro -- npx -y @table-bro/[email protected]

The setup for the other agents is below. Docs: MCP server, Getting started.

ToolWhat it gives
get_startedHow Table, Bro works, the order of the tools and a minimal table for your target and skin, once a session
get_docsA topic of the reference or a page of Docs with its code, the topics of a query, or the list of the topics
inspect_projectThe packages, the skins, the CSS, the elements and the tables of the project, and the problems of its setup with their fixes
validate_specEvery error and warning of a table spec, with its path and its fix
generate_codeThe files of a new table from a spec or a built-in spec, the setup of the project and what to finish by hand
scaffold_componentOne custom cell, the row details or the filters of the Filter Drawer for an existing table, with how to connect it

Setup

The server describes one version of Table, Bro: run the version of @table-bro/core that the project has, as 1.2.0 below. After an update of Table, Bro, change the version in the setup of the agent too; inspect_project compares the versions and gives the line to change.

npx downloads the package and starts it: the project does not install @table-bro/mcp. Node.js 22.12 or newer.

Claude Code, .mcp.json in the root of the project:

json
{"mcpServers": {"table-bro": {"command": "npx", "args": ["-y", "@table-bro/[email protected]"]}}}

or claude mcp add --scope project table-bro -- npx -y @table-bro/[email protected].

Codex, ~/.codex/config.toml:

toml
[mcp_servers.table-bro]command = "npx"args = ["-y", "@table-bro/[email protected]"]

Codex calls the tools of the server when AGENTS.md of the project says so:

markdown
The tables of this project are Table, Bro. Its MCP server table-bro has the reference, the check of a table and the code generator: call its tool get_started before you write or change a table.

Cursor, .cursor/mcp.json in the project:

json
{"mcpServers": {"table-bro": {"command": "npx", "args": ["-y", "@table-bro/[email protected]"]}}}

VS Code, .vscode/mcp.json in the project:

json
{"servers": {"table-bro": {"type": "stdio", "command": "npx", "args": ["-y", "@table-bro/[email protected]"]}}}

Claude Desktop, claude_desktop_config.json:

json
{"mcpServers": {"table-bro": {"command": "npx", "args": ["-y", "@table-bro/[email protected]"]}}}

The folder of the project

inspect_project reads the project as text. It takes the folder in its argument path; without it, the first root of the workspace that the client gives, else the folder where the client started the server. A client that starts the server outside the project and gives no roots, as a desktop application may, needs path: the agent passes the root of the project. The profile names the folder it describes.

Paid modules

A paid module of Table, Bro adds its fields of the config, its topics and its setup to the server when the server is started with its name, and the module is installed in the project:

json
{"mcpServers": {"table-bro": {"command": "npx", "args": ["-y", "@table-bro/[email protected]", "--extension", "<the package of the module>"]}}}

The server runs the code of no other package.

In code

The tools are pure functions, and the package exports them for Node.js and the browser: validateSpec, generateCode, getDocs, the built-in specs, builtinSpecs, and the JSON Schema of a spec, specSchema.

License

MIT

来源:packages/mcp/README.md,提交 7a40a4d

工具

6

get_started

Get started with Table, Bro

Call this first, once per session. It explains how Table, Bro works, a Web Components table engine on top of the UI library of your project, and which tool to use when; shows a minimal table for your target and skin; lists the topics of get_docs. Do not call it again in the same session: use get_docs. Example: {"target": "angular", "skin": "mat"}

输入参数skintarget

get_docs

The reference of Table, Bro

Returns one topic of the reference or one page of Docs with its code by its name, the two topics that match a query best, or all topics with their summaries. Use it for questions about the API and for changes of an existing table; get_started already gives the topics basics and workflow. Example: {"topic": "server-mode"} or {"query": "row height"}

输入参数querytopic

inspect_project

Inspect the project

Profiles the project: the packages of Table, Bro and their version, the framework, the registered skins, the CSS, the custom elements, the tables, and the problems of the setup with their fixes. Call it once before you add code to a project, and when a table does not render. Pass skins.registered as the skin and framework.name as the target of the other tools. Not for questions about the API. Each list keeps its first 20 items; omitted counts the rest. It reads the project as text and writes nothing. Example: {}

输入参数path

validate_spec

Check a table spec

Checks a table spec, a BroTableSpec (get_docs, topic spec), and reports every error and warning with its path, what is wrong and the fix. Use it while you draft a spec. generate_code runs the same check first and returns the same report for a spec with errors. Example: {"spec": {"specVersion": 1, "rowType": "Product", "fields": [{"name": "title", "type": "string"}], "cols": [{"title": "Product", "name": "title"}]}, "skin": "mat"}

输入参数skinspec必填

generate_code

Generate the code of a table

Generates the code of a new table from a spec or from a built-in spec: the files, the setup of the project, once per project, and what is left to finish by hand. The fillings are the templates of the cells, the rules of the custom filters and the bodies of the functions of the skin config (get_docs, topic fillings); without them the files keep TODOs. A spec with errors returns the report of validate_spec and no files. For one cell, the row details or the filters of an existing table use scaffold_component. Example: {"builtinSpec": "products", "target": "angular", "skin": "mat"}

输入参数skin必填spectarget必填fillingsbuiltinSpec

scaffold_component

Scaffold a component of a table

Scaffolds one component for an existing table: a custom cell, the element of the row details, or the filters of the Filter Drawer, and tells how to connect it to the page: the registration of the element and its column, or the container of the drawer. For a new table use generate_code, which writes its cells too. Example: {"kind": "cell", "target": "angular", "skin": "mat", "rowType": "Order", "fields": [{"name": "status", "type": "string"}], "name": "status", "shows": "the status as a chip", "reads": ["status"]}

输入参数kind必填nameskin必填readsshowsfields必填target必填actionsfillingfiltersrowType必填

版本历史

1
  1. v1.2.0最新Oct 26, 2026

评分

已满足适用检查项的 90%

该评分衡量此收录条目的完整程度,依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价,也不表示服务器安全或当前可用:可连通性是带日期的检查结果,评分也不包含安装量或用户评价。

  • 近 30 天内可连通25 分
  • 已声明认证方式10 分

    请在注册中心条目中声明凭据请求头,或保持端点能够响应探测,以便判定其认证方式。

  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分