Echo UI

echo-ui-mcp

Echo UI 用の MCP サーバーです。Echo UI のレジストリを利用する10個のツールをコーディングエージェントに提供します。コードを書く前にコンポーネントの props、使い方、アクセシビリティに関する注意点、アンチパターンを調べたり、書いたコードを確認したり、スタイルを見つけて適用したりできます。

インストール

すべてのクライアントで同じコマンドを実行します。

{
  "mcpServers": {
    "echo-ui": {
      "command": "npx",
      "args": ["-y", "echo-ui-mcp"]
    }
  }
}

• Claude Code: claude mcp add echo-ui -- npx -y echo-ui-mcp
• Codex: ~/.codex/config.toml に [mcp_servers.echo-ui] として追加し、command = "npx" と args = ["-y", "echo-ui-mcp"] を設定します。
• Cursor: 上記のブロックを .cursor/mcp.json に追加します。
• VS Code: servers の下に追加します。mcpServers ではありません。
• その他のクライアント: stdio MCP サーバーを実行できるクライアントであれば、同じコマンドを使えます。

Node.js 20 以降が必要です。

ホスト版

Web 上のサーバーにのみ接続するツール（ChatGPT、claude.ai、Lovable、v0、Bolt、Claude Design）では、同じツールを https://mcp.echo-ui.com/mcp で利用できます。インストールもアカウントも不要です。そのアドレスを使ってカスタムコネクター（リモート MCP サーバー）として追加するか、次の設定を使います。

• Claude Code: claude mcp add --transport http echo-ui https://mcp.echo-ui.com/mcp
• Cursor: { "mcpServers": { "echo-ui": { "url": "https://mcp.echo-ui.com/mcp" } } }

パッケージと同じ公開ドキュメントを読み取り、送信された内容は何も保存しません。check_code はコードを読み取った後、破棄します。リクエストログに残るのはパス、ステータス、処理時間だけで、本文は記録されません。ホストである Cloudflare は、リクエスト元のアドレスとともにこれらのログを最大7日間保存します（プライバシーポリシー）。check_code が受け付けるのは最大200,000文字です。それを超えるリクエストは読み取り前に 413 で拒否されます。また、1つのアドレスから10秒間に300件のリクエストを送信でき、大きなコードは1分あたり約2 MBまで送信できます。リクエストは16 KB単位でカウントされ、いずれかの上限を超えると Retry-After とともに 429 が返されます。

Echo のスキルを使って Claude と ChatGPT で利用する

Echo のプラグインには、ホスト版サーバーと Echo の3つのスキル（Echo UI、Design Eye、Style Fit）が1つにまとめられています：echo-ui.com/docs/plugin。ChatGPT ではプラグインディレクトリから利用できます。Claude のディレクトリにも掲載されるまでは、ドキュメントからインストールできます。claude.ai と Claude Code 用のClaude ZIP、Codex と ChatGPT デスクトップ版用のCodex ZIPを利用してください。

ツール

ツール	受け取るもの	返す内容
search_components	query?	用途に合う項目（「設定の切り替え」「削除の確認」など）、または「Echo にはまだ該当するものがありません」という簡潔な回答を返し、その後に一致するコンポーネントごとにインストールコマンドを1行ずつ返します。CLI の which と同じ回答です。クエリを指定しない場合は、すべてのコンポーネントを返します。
get_component	name	説明、インストールコマンド、使い方、構成、例、アクセシビリティ、動きと音、props、アンチパターンを含む完全なレコードを返します。echo-hardware-button、hardware-button、HardwareButton のいずれも指定できます。
get_tokens	—	色の役割（--echo-*）、サウンド名、動きの名前を返します。
get_examples	name	1つのコンポーネントの例のみを返します。
get_accessibility	name?	Echo の利用者が誤りやすいルールを返します。名前を指定すると、そのコンポーネント自体のテスト内容と未テスト項目の記録を返します。
check_code	code, file?	コードに対する Echo のチェック結果を返します。デフォルトのテーマに対して npx echo-ui-cli check と同じルールを適用し、各指摘項目に Echo での修正方法を添えます。CLI を実行するターミナルがないツール向けです。
list_styles	name?	Echo 独自のスタイルを、それぞれの説明1行とフィンガープリントとともに返します。名前を指定すると、そのスタイルの全情報を返します。
fit_styles	profile, tolerance?, yours?	プロダクトの7つの軸での位置に照らして、Echo のスタイルとビルダー独自のスタイル（フィンガープリントによる）を照合し、順位付けして返します。npx echo-ui-cli style fit と同じ計算方法です。
check_style	style	style.json が Echo で適用可能かどうかを、npx echo-ui-cli style check と同じ形式で返します。
wear_style	name or style, files?	Echo サイトにスタイルを適用するリンク（Echo の既存スタイル全体、または色を指定した独自スタイル）、プロジェクトに適用するコマンド、そしてターミナルのないプロジェクト向けのテーマ CSS と DESIGN.md を返します。

接続時に、サーバーは手順も送信します。プロジェクトのセットアップ方法、テーマとサウンドの接続方法、そしてエージェントが最もよく必要とする修正内容です（Base UI のパッケージは @base-ui/react です。Echo コンポーネントは npm install ではなく npx echo-ui-cli add でインストールします）。

get_component は、Echo UI ドキュメントのコンポーネントページおよび llms-full.txt の項目と同じテキストに加え、コンポーネントの配布内容も返します。これには、バージョン、必要な echo-ui-core の範囲、アクセシビリティ記録が含まれます。この情報は、echo-ui-cli がインストールに使うものと同じレジストリから、同じクライアントを使って読み込まれるため、両者が食い違うことはありません。

設定

サーバーは公開済みの2つのドキュメントを読み込み、5分後に再読み込みします。カタログは https://echo-ui.com/r/catalog.json、レジストリは https://echo-ui.com/e です。 フォークまたはローカルビルドを指定するには、次のいずれかを設定します。

{
  "mcpServers": {
    "echo-ui": {
      "command": "npx",
      "args": ["-y", "echo-ui-mcp"],
      "env": {
        "ECHO_CATALOG": "/absolute/path/to/catalog.json",
        "ECHO_REGISTRY": "https://example.com/e"
      }
    }
  }
}

レジストリにアクセスできない場合、サーバーはカタログから、カタログのビルド時に使われたバージョンを使って引き続き応答します。すでに読み込んだコピーは、取得元を読み込めない間も応答に使われ、毎分再試行されます。ファイルがレジストリで公開されたハッシュと一致しない場合、サーバーは応答を返す代わりに、その旨を伝えます。

ライセンス

MIT