Table, Bro

io.github.table-broPublished by GitHub account table-brov1.2.0Updated Oct 26, 2026

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

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

Table, Bro's MCP server gives an assistant the reference, spec validation and code generation for Material-style data tables in Angular and Vanilla JS projects.

What you can do
  • Get onboarding and reference docs: how the table engine works, tool order, minimal table examples, and API topics or Docs pages by name or query
  • Inspect a project: Table, Bro package versions, framework, registered skins, CSS, custom elements, tables and setup problems with fixes
  • Validate a table spec and get every error and warning with its path and fix
  • Generate the files of a new table from a spec or built-in spec, plus project setup and remaining manual steps
  • Scaffold one component for an existing table: a custom cell, row details or Filter Drawer filters, with wiring instructions
When to use it
Useful when building or maintaining data tables with Table, Bro in an Angular or Vanilla JS project and you want the assistant to produce correct specs and code instead of guessing the API. Also helps diagnose a table that does not render.
Requirements
Runs locally over stdio via npx, so Node.js 22.12 or newer is needed; the package is downloaded on demand rather than installed in the project. No accounts, API keys or environment variables are declared. The server version should match the project's @table-bro/core version. inspect_project needs the project folder, passed as path when the client provides no workspace root.
Before you install
The server only reads the project and writes no files; the agent writes the generated code, so review changes before committing. inspect_project reads the project as text, so point it at the intended folder. Paid modules are enabled by passing an extension package name at startup, and the server then runs that package's code. Version drift between the server and @table-bro/core can produce mismatched guidance.

Installation

In SourceWeft

  1. Open Table, Bro in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

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

Source: packages/mcp/README.md at commit 7a40a4d

Tools

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"}

Parametersskintarget

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"}

Parametersquerytopic

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: {}

Parameterspath

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"}

Parametersskinspecrequired

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"}

ParametersskinrequiredspectargetrequiredfillingsbuiltinSpec

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"]}

ParameterskindrequirednameskinrequiredreadsshowsfieldsrequiredtargetrequiredactionsfillingfiltersrowTyperequired

Version history

1
  1. v1.2.0LatestOct 26, 2026

Score

90% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts
  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts