デスクトップチャットクライアント内でインタラクティブなHTMLカードを描画するMCP（Model Context Protocol）サーバーです。長いテキストの壁の代わりに、会話にタブボックス、テーブル、チャート、フォーム、短いビデオクリップ、折りたたみセクション、番号付きアウトラインが表示されます。MCP Apps拡張機能（SEP-1865）をサポートするホストでは、カードはサンドボックス化されたiframeとして会話内にインライン表示されます。他のホストでは、各カードは自己完結型の埋め込みHTMLリソースとして受信されます。

機能

• タブカード: 1つの主題の異なるコンテキスト（言語別、OS別、スキルレベル別）を並べて表示します。コピーボタン付きのコードサンプルも含まれます。

• テーブルカード: 明示的な行または緩い区切りの生テキストからHTMLテーブルを構築します。区切り文字は自動検出され、列はバランスが取れ、URLセルはリンクになります。

• チャートカード: 凡例とアクセシビリティ用の折りたたみ可能なデータテーブルを備えた、動的に生成されるSVG棒グラフ、折れ線グラフ、円グラフ、ドーナツグラフ。

• フォームカード: ユーザーが記入して会話にコンテキストと方向性を与えるフォーム。送信すると、値が次のプロンプトとしてチャットに返されます。

• ミラーリングされたウェブフォーム: 実際のページを取得し、そのフォームの1つをカードとして再構築し、submit_web_formを介してユーザーが入力した値で実際のウェブサイトフォームを送信します。

• ビデオカード: 短いクリップ用のHTML <video>プレーヤー。

• アニメーションカード: 直接のビデオURLが存在しない場合に、モデルが構成したアニメーションクリップ - テキストのシーケンシャルシーン、段階的な箇条書きのビルド、自己トレースするシンプルなSVGダイアグラム、議論中のデータ範囲にズームインする単一系列チャートなど。ビデオスタイルの再生/一時停止、リプレイ、プログレスコントロールを備えています。

• 表示/非表示カード: すべて表示/すべて非表示コントロール付きの折りたたみ可能なセクション。

• シーケンシャルリストカード: CSSカウンターによる1.、1.1.、1.1.1.のネストされた順序付きリスト。

• ドキュメントカード: マークダウンドキュメント（モデルが書いたガイドやウォークスルー）を、折りたたみ可能なセクション、スタイル付きテーブル、コピー可能なコードを備えた1つのインタラクティブカードとしてレンダリングします。

• コードツアーカード: プロジェクトを、ファイルが指定された順序（READMEとマニフェストが最初に昇格）でソースファイルごとに1つのタブとして提示し、言語タグ付きコードとコピーボタンを備えます。

• モデル生成ファイルの取り込み: ローカルのテキストファイルを読み取り、モデルが会話の前半で生成したzipアーカイブを解凍して、モデル自身の成果物を再入力なしで直接カードに組み込めるようにします。

• 自動マルチパート分割: 大きなドキュメントとプロジェクトは、各パートがカードサイズの予算内に収まるようにパートに分割されるため、ホストが過大な結果を切り詰めることはありません。各パートは独自のカードとしてレンダリングされ、結果は次のパートを取得する方法を正確に示します。

• 参照フェッチ: fetch_referenceは公開ページを取得し、構造化データ（見出し、テキスト、テーブル、画像、リンク、フォーム仕様）を返します。カードツールに直接フィードできます。

• カードチューター: 教育用カードは、ホバー滞留後にツールチップを表示する用語をマークし、モデルが予測するプロンプトを送信する右クリックコンテキストアクションを定義できます。

• 移動可能なコンテンツ: カードブロックはドラッグで並べ替えでき、カードからドラッグアウトするとブロックがHTMLとして運ばれ、すべてのカードには「カードをコピー」ボタンがあり、スタンドアロンHTMLをコピーして他の応答やファイルに貼り付けることができます。

• ヘッダートグル: すべてのカードヘッダーには</>ボタンがあり、カード自身のHTMLソースをコードパネルに表示/非表示にし、その隣のシェブロンボタンでカードをヘッダー行まで折りたたんだり、再度展開したりできます。

• コピー可能なカード: すべてのカードの右クリックメニューには、ヘッダーボタンをミラーリングする組み込みの「カードをコピー」項目があり、スタンドアロンHTMLをコピーします。視覚的な配置のために、get_insert_bookmarkletは、右クリック時に浮動する「カードを挿入」項目を表示し、コピーしたカードをその場所に注入するブックマークレットを返します（ページローカルプレビュー。リロードで消えます）。

Related MCP server: mcp-interactive-ui-server

モデルがこのサーバーを呼び出すべき場合

このサーバーは、研究、教育、専門スキル、一般的な趣味のスキル（木工、芸術など）、専門トピック、歴史、ニュース、および関連する主題に関する会話について、カードがテキストよりも効果的に伝達できる場合に、自身を宣伝します。

インストール

git clone https://github.com/jhauga/mcp-chat-cards.git
cd mcp-chat-cards
npm install
npm run build

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

Claude Desktopでの使用

claude_desktop_config.json（設定 > 開発者 > 設定を編集）にサーバーを追加し、リポジトリをクローンしたパスを調整します：

{
  "mcpServers": {
    "chat-cards": {
      "command": "node",
      "args": ["C:/path/to/mcp-chat-cards/dist/index.js"]
    }
  }
}

保存後、デスクトップクライアントを再起動します。同じstdioコマンドは任意のMCPホストで機能します。MCP UIリソースをサポートするホストでは、カードはサンドボックス化されたiframeとしてレンダリングされます。

ツール

例: create_table_card

{
  "title": "JavaScript array methods",
  "headers": ["Method", "Purpose"],
  "rows": [
    ["map", "Transform each item"],
    ["filter", "Keep matching items"],
    ["reduce", "Fold items into one value"]
  ]
}

出力: テキストの要約と、完全なカードドキュメントを含む埋め込みリソース（ui://mcp-chat-cards/<id>、text/html）。

例: create_form_card

{
  "title": "Study preferences",
  "promptTemplate": "Teach {{topic}} with {{style}} examples.",
  "fields": [
    { "name": "topic", "label": "Topic", "required": true },
    { "name": "style", "type": "select", "options": ["practical", "theoretical"] }
  ]
}

ユーザーがカードを送信すると、入力されたテンプレートが次のプロンプトとしてホストに投稿されます。ホストがメッセージを消費しない場合、カードはフォールバックとしてコピーボタン付きのプロンプトテキストを表示します。

例: モデルが生成したファイルとのプラグアンドプレイ

会話の前半でモデルが小さなプロジェクトを構築し、project.zipとGUIDE.mdのウォークスルーを配信したとします。ユーザーが手動で解凍して読む代わりに、モデルは2回の呼び出しでそれらをインタラクティブカードに変換します：

{ "path": "C:/Users/jane/Downloads/GUIDE.md" }

create_markdown_cardに送信すると、ガイド全体が1つのカードとしてレンダリングされます。最初のH1がタイトルになり、各H2セクションは表示/非表示のリビールに折りたたまれ、テーブルはカードスタイルになり、すべてのフェンス付きコードブロックにコピーボタンが付きます。

{
  "title": "Project source tour",
  "archivePath": "C:/Users/jane/Downloads/project.zip",
  "intro": "Read the guide card first, then follow these files in order."
}

create_code_tour_cardに送信すると、アーカイブがメモリ内で解凍され、テキストファイルごとに1つのタブがレンダリングされます。順序はREADME、マニフェスト、ソースの順で、それぞれ言語タグとコピーボタンが付きます。明示的なfilesは、呼び出し元が指定した順序を維持します（READMEとマニフェストは先頭に昇格します）。そのため、意図的な教育順序（データモデル、次にエラー、次にエントリポイント）は、アルファベット順ではなく記述どおりにレンダリングされます。ビルドキャッシュ（target/、node_modules/）とバイナリエントリは自動的にスキップされます。モデルがカードを構築する前に内容を検査する必要がある場合は、最初にunpack_archiveまたはread_local_fileを使用します。

ドキュメントまたはプロジェクトがカードサイズの予算（デフォルトでは約32,000文字のカードマークアップ。MCP_CHAT_CARDS_CARD_BUDGETで調整可能）を超える場合、ツールは自然な境界（ドキュメントの場合はH2セクション、ツアーの場合はファイル全体）で分割し、パート1と「create_code_tour_cardをpart: 2で再度呼び出してください」のような指示を返します。モデルは、すべてのパートが独自のカードとしてレンダリングされるまで呼び出しを繰り返し、過大な単一ファイルは表示される通知付きで切り詰められます。

予算は、ディスク上の長さではなく、レンダリング後のファイルのコストに対して測定されます。ソースはタブパネルにHTMLエスケープされ、単一の<が4文字になるため、マークアップ密度の高い少数のファイルは、生のサイズが示唆するよりもはるかにコストがかかる可能性があります。完成した各結果は、ホストの上限（シリアル化された結果の約40,000文字。MCP_CHAT_CARDS_RESULT_LIMITで調整可能）に対して再度測定されます。それでも大きすぎて分割できないカード（たとえば数千行のテーブル）は、ホストが静かにレンダリングを拒否する過大な結果ではなく、超過額を指定する実行可能なエラーを返します。

例: ミラーリングされたウェブサイトフォーム

1. mirror_web_formを{ "url": "https://example.com/newsletter" }で呼び出すと、ページのサインアップフォームがカードとしてレンダリングされます。

2. ユーザーが記入して送信すると、カードは構造化されたペイロードをチャットに返します。

3. モデルはユーザーと値を確認し、submit_web_formをペイロード付きで呼び出して実際のフォームを送信し、HTTP結果を報告します。

カードのレンダリング方法

サーバーは2つの配信パスをサポートしており、ホストによって自動的にネゴシエートされます。

会話内インライン（MCP Apps、SEP-1865）。 サーバーは、MIMEタイプtext/html;profile=mcp-appの1つのUIテンプレートリソースをui://mcp-chat-cards/card.htmlで事前宣言し、すべてのカードツールは_meta.ui.resourceUriを介してそれにリンクし、出力スキーマを宣言します（ホストはスキーマのないツールからstructuredContentを削除し、カードが描画するものを残しません）。Apps拡張機能をサポートするホスト（最近のClaude Desktopビルドを含む）は、テンプレートをサンドボックス化されたiframeとしてチャット内にインラインでレンダリングし、ui/initializeハンドシェイクを完了し、ツール結果をそれに配信します。テンプレートは、静かに失敗する部分に対して防御的です。タイムアウト時とハンドシェイク応答時の両方でui/notifications/initializedをアナウンスし（ホストはアナウンスを見るまでツール結果を保留します）、1つの固定ネストではなく深い検索でカードペイロードを見つけ、すべてのペイント後とリサイズ時にui/notifications/size-changedを報告してiframeが実際の高さを取るようにし、ホストのテーマ（完全なダークパレットを含む）を採用します。カードのインタラクションはJSON-RPC postMessageを介して戻ります。フォーム送信とコンテキストアクションはui/messageリクエスト（次の会話プロンプト）になり、リンクはui/open-linkを通過し、テレメトリはロギング通知を使用します。

スタンドアロン文書フォールバック。 Apps 拡張を宣言しなかったクライアントに対しては、各結果が ui://mcp-chat-cards/html/<card-id> へのリンクを保持します。そのリソースを読み取ると、同じカードが自己完結型 HTML 文書（インライン CSS と JS、制限的な Content-Security-Policy、外部スクリプトなし）として返されます。Apps をサポートしないが MCP-UI スタイルのレンダリングを持つホストは、その文書をサンドボックス化されたパネルに表示します。そこではカードが MCP-UI スタイルのメッセージ（prompt、notify、link）を送信します。

この文書は意図的にツール結果にインライン化されません。そのテーマとランタイムはすべてのカードでバイト単位で同一であるため、インライン化すると呼び出しごとに約 16 KB の定型文が繰り返されます。これは呼び出し元のコンテキストを圧迫し、通常のカードがホストの結果上限を超えて何もレンダリングされなくなる主な原因でした。リソースリンクを辿れないホストのためにインラインコピーを復元するには、MCP_CHAT_CARDS_EMBED_HTML=1 を設定してください。サーバーはレンダリング済みの直近 24 枚のカードを読み取り可能な状態で保持します。

一貫した結果の形状

すべてのカードツールは、カードの種類に関係なく同じ 3 つのものを返します。

レンダリング面

カードは Claude デスクトップアプリのサイドバーにインラインでレンダリングされます。他の面（モバイルとウェブ）はテキスト要約と構造化ペイロードを受け取りますが、カードは描画されないため、各要約は単独で成立するように書かれ、ツールはカードの結論を会話内でも述べるよう指示されています。

テキストフィールドはプレーンテキスト

ツールが受け付けるすべてのテキストフィールド（タイトル、ラベル、セル値、チューターヒント）はプレーンテキストであり、サーバーによって正確に 1 回エスケープされます。呼び出し側は事前エスケープしてはなりません。Predict, Spot & Fix ではなく Predict, Spot & Fix を渡してください。

入力はどのフィールドでも最初にデコードされることはありません。& を渡した呼び出し側は、& という 6 文字を表示するカードを受け取ります。なぜなら、それが HTML・エスケープ・テンプレートを解説するガイドが読者に見せようとしているものだからです。ルールはどこでも同じなので、同じ文字列はテーブルセル、タブ、Markdown テーブル、コードサンプルのいずれでも同一にレンダリングされます。

生の HTML が尊重されるのは html という名前のフィールド（create_tab_card と create_reveal_card のセクション）のみで、そこではサニタイズされます。スクリプト、イベントハンドラ、フレーム、フォーム、危険な URL は除去され、<b> や <i> などの書式は保持されます。それ以外のすべての場所（create_markdown_card 文書内に書かれた HTML を含む）では、タグはリテラルテキストとしてレンダリングされるため、そこでの書式には Markdown 構文を使用してください。エスケープされたブロックレベル HTML は、兄弟要素間の緩いテキストとして落とされるのではなく、Markdown 構造が示唆する段落に包まれます。また、<!-- markdownlint-disable --> ディレクティブは散文ではないため、HTML コメントは表示されずに破棄されます。

パスが解決される場所

create_markdown_card(path)、create_code_tour_card(archivePath)、read_local_file、unpack_archive はすべて、このサーバーを実行しているマシンのファイルシステム上でパスを解決します。サーバーがリモートブリッジ経由で到達される場合、それは呼び出し側のサンドボックスではありません。モデルが自分の側で生成したファイルはここには存在しません。その場合はコンテンツをインライン（markdown、files）で渡してください。誤ったオペレーティングシステムからのパス（たとえば Windows 上で動作するサーバーに送信された /home/demo-user/project.zip）は、存在したことのないドライブ上に解決されるのではなく、不一致を明示するエラーで拒否されます。POSIX サーバーに送信された Windows パスや、展開されていない ~/ パスについても同様です。MCP_CHAT_CARDS_FS_ROOT を設定すると、ローカル読み取りを 1 つのディレクトリに限定できます。

インタラクティブ性の注意点と制限

• ドラッグ＆ドロップで 1 つのカード内のブロックを並べ替えられます。カードの外にブロックをドラッグすると、その HTML がドラッグデータに含まれます。別のレスポンスへのドロップにはホストのサポートが必要ですが、デスクトップチャットクライアントは一般にまだそれを公開していません。

• 「カードをコピー」はスタンドアロン HTML 文書をコピーするため、カードを別のレスポンス、ファイル、ブラウザタブで再現できます。

• チューターツールチップは、マークされた用語に約 1.2 秒ホバーすると表示されます。カードはホストにも通知するため、ユーザーが探索している間にモデルがフォローアップできます。各用語はカードごとに 1 回マークされ（2 つが重なる場合は最長の用語が優先）、用語リスト内の重複は無視され、コードサンプル、ネイティブツールチップ、別の用語のヒント内ではマーキングは行われません。マッチングは大文字小文字を区別するため、PATH 用に書かれたヒントがファイルシステムの path に付くことはありません。任意の大文字小文字にマッチさせるには、用語に caseInsensitive: true を設定してください。create_code_tour_card に tutorTermsInCode: true を渡すと、コードも対象にできます。

• すべてのカード結果は structuredContent.parts を { current, total, hasMore } として保持するため、1 つの完全性チェックがすべてのカードタイプで機能します。hasMore が true の間はコンテンツが保留されており、呼び出し側は part: current + 1 を指定して同じツールを再度呼び出します。分割できるのは create_markdown_card と create_code_tour_card のみで、他のすべてのカードは常に { current: 1, total: 1, hasMore: false } を報告します。レンダリングされたタイトルは、読者のために人間が読める (part 1 of 2) という接尾辞を保持します。

• 分割しきい値は、呼び出し側が書く入力ではなく、レンダリングされた文字数で測定されます。エスケープはソースを予測不能に拡張します。<、>, &、引用符はそれぞれ 4〜6 文字になるため、予算内に見えるペイロードがそれを超えたり、大きく見えるものが超えなかったりすることがあります。入力サイズから予測するのではなく、parts.hasMore を読んでください。H2 見出しのない Markdown 文書には分割境界がなく、常に 1 つの部分としてレンダリングされます。

• 右クリックのコンテキストアクションはカードごとにモデルが定義します。アクションプロンプト内の {{selection}} は、ユーザーが選択したテキストに置き換えられます。

セキュリティ

• ローカルファイルツール（read_local_file、unpack_archive、および文書・コードツアーカードのパス/アーカイブ入力）はテキストのみを読み取り、サイズを制限し、バイナリを拒否し、アーカイブ展開を制限します（エントリ数、ファイルごと、合計バイト数）。MCP_CHAT_CARDS_FS_ROOT を設定すると、すべてのローカル読み取りを 1 つのディレクトリに限定できます。

• 送信リクエストは、パブリックアドレスに解決される http(s) URL に限定されます。localhost、RFC 1918、リンクローカル、CGNAT、および同等の IPv6 範囲はブロックされ、リダイレクトは再検証され、本文はサイズ制限され、リクエストはタイムアウトします。イントラネットのフェッチが意図的に必要な場合にのみ、MCP_CHAT_CARDS_ALLOW_PRIVATE=1 を設定してください。

• モデルおよびユーザーが提供するすべてのテキストは HTML エスケープされます。取得したサードパーティの HTML はサニタイズされます（スクリプト、イベントハンドラ、フレーム、フォーム、危険な URL は除去されます）。

• カードには制限的な CSP が同梱され、外部スクリプト、スタイルシート、フォントは読み込まれません。

• submit_web_form は、ユーザーがミラーリングされたフォームカードに入力した値、または明示的に確認した値でのみ呼び出す必要があります。

Claude Desktop でのカードのデバッグ

カードがマウントされても空のままの場合、失敗は通常サイレントであるため、テンプレートはすべてをコンソールにトレースします。

1. Claude Desktop で開発者モードを有効にし（設定、開発者）、会話の webview 開発者ツールを開きます。

2. コンソールを [mcp-chat-cards] でフィルタリングします。カードが送受信するすべての JSON-RPC メッセージが方向（tx/rx）付きでログに記録されるため、ハンドシェイク応答の欠落や配信されないツール結果がすぐに確認できます。

3. そのコンソールで window.__mccDebug() を実行するとスナップショットが得られます。テンプレートバージョン、initialized が通知されたかどうか、カードが描画されたかどうか、レンダリングされたカード HTML、直近 50 件のプロトコルメッセージ。レンダリングの問題を報告する際は、その出力を貼り付けてください。

補助ポート

extension/ フォルダには、他のホスト向けのカードツールの補助ポートが含まれています。どちらも自己完結型であり、src/ や dist/ からインポートせず、MCP サーバーはそれらの影響を受けません。

• extension/github/ — chat-cards という名前の GitHub Copilot canvas 拡張。エージェントは canvas アクションを通じて同じカード種類（タブ、テーブル、チャート、フォーム、表示/非表示、順次リスト、Markdown 文書、ビデオ）を操作し、フォーム送信はプロンプトとして会話に戻ってきます。その README は、アクションリスト、MCP ツールとの違い、フォルダが awesome-copilot コントリビューションのレイアウトにどのように対応するかを説明しています。

• extension/claude/ — Claude アーティファクトテンプレート。1 つの自己完結型 HTML ページで、そのカード仕様ブロックを Claude が埋めてアーティファクトとして公開します。フォームと右クリックアクションは、ユーザーが会話にコピーして戻すプロンプトを生成します。

開発

npm run build      # compile TypeScript to dist/
npm test           # run the vitest suite (unit + in-memory MCP integration)
npm run coverage   # run tests with V8 coverage
npm run dev        # compile in watch mode

ライセンス

MIT。 LICENSE を参照してください。