Table, Bro

@table-bro/mcp

Table, Bro の MCP サーバーです。Angular などに対応した、ピクセル単位で正確な Material（M3）データテーブルを提供します。Claude Code、Cursor、Codex に追加して、必要なテーブルをエージェントに伝えると、パッケージをインストールし、テーブルとそのセットアップ、セルを、Angular と Vanilla JS 向けに1回のリクエストで生成します。このサーバーは、テーブルのリファレンス、テーブル仕様のチェック、テーブルのコード生成機能をエージェントに提供します。スキンは mat（Angular Material）、bs（Bootstrap 5）、nv（ネイティブ HTML）です。ファイルを書き込むのはエージェントであり、サーバーは読み取りのみを行います。

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

ほかのエージェントのセットアップはこちらです。ドキュメント：MCP サーバー、はじめに。

ツール	提供する内容
get_started	Table, Bro の仕組み、ツールを使う順序、対象とスキンに合わせた最小限のテーブルを、セッションごとに1回提供します
get_docs	リファレンスのトピックや、コード付きのドキュメントページ、クエリに関連するトピック、またはトピック一覧を提供します
inspect_project	プロジェクトのパッケージ、スキン、CSS、要素、テーブル、およびセットアップ上の問題とその修正方法を提供します
validate_spec	テーブル仕様に含まれるすべてのエラーと警告、そのパスと修正方法を提供します
generate_code	仕様または組み込み仕様から新しいテーブルのファイル、プロジェクトのセットアップ、手動で仕上げる内容を生成します
scaffold_component	既存のテーブルにカスタムセル、行の詳細、または Filter Drawer のフィルターを追加する方法と、その接続方法を提供します

セットアップ

このサーバーは Table, Bro の特定のバージョンを記述します。以下の 1.2.0 のように、プロジェクトで使用しているバージョンの @table-bro/core を実行してください。 Table, Bro を更新したら、エージェントのセットアップ内のバージョンも変更してください。inspect_project はバージョンを比較し、変更する行を示します。

npx がパッケージをダウンロードして起動するため、プロジェクトに @table-bro/mcp をインストールする必要はありません。Node.js 22.12 以降が必要です。

Claude Code、プロジェクトのルートにある .mcp.json：

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

または claude mcp add --scope project table-bro -- npx -y @table-bro/[email protected]。

Codex、~/.codex/config.toml：

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

プロジェクトの AGENTS.md に記載がある場合、Codex はサーバーのツールを呼び出します。

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：

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

VS Code、プロジェクト内の .vscode/mcp.json：

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

Claude Desktop、claude_desktop_config.json：

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

プロジェクトフォルダー

inspect_project はプロジェクトをテキストとして読み取ります。引数 path で指定されたフォルダーを使用します。指定がない場合は、クライアントが渡すワークスペースの最初のルートを使用し、それもなければクライアントがサーバーを起動したフォルダーを使用します。デスクトップアプリケーションのように、プロジェクト外でサーバーを起動し、ルートを渡さないクライアントでは、path が必要です。エージェントがプロジェクトのルートを渡します。プロファイルには、説明対象のフォルダーが記録されます。

有料モジュール

Table, Bro の有料モジュールは、モジュールがプロジェクトにインストールされていて、サーバーをその名前で起動したときに、その設定のフィールド、トピック、セットアップをサーバーに追加します。

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

サーバーは、ほかのパッケージのコードを実行しません。

コード内での使用

ツールは純粋関数であり、パッケージは Node.js とブラウザー向けに次のものをエクスポートします：validateSpec、generateCode、getDocs、組み込み仕様、builtinSpecs、仕様の JSON Schema である specSchema。

ライセンス

MIT