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 分