MCP Apps ホストを自作する: SDK 同梱 AppBridge でチャット内 UI を動かすまで
出典: Zenn (Claude topic)
Hiroba による自動要約
MCP Apps の仕組みを理解するため、公式ガイドに沿ってサーバー実装と自作ホストの構築を検証。SDK 同梱の AppBridge を使い約 70 行で HTML UI をサンドボックス iframe に埋め込む方法と、時刻表示・サイコロ・VOICEVOX 音声合成の 3 つのビューを 1 ホストに並べるまでの実装例を解説。
出典・元記事
Zenn (Claude topic) の記事を Hiroba が自動要約しました。元記事を読む
読んで良かったら、シェアしてみてください。
同じタグの記事が他に 5015 件あります。
関連する記事
同じタグの記事
Claude Code と MCP で AI 開発に最適化したプロジェクト管理ツール Devuntu を実装した
ZennDevuntu はかんばんボード、カレンダー連携、Slack 通知、MCP サーバー、AI エージェント機能を備えたセルフホスト型プロジェクト管理ツール。Claude Code でチケット処理を自動化でき、就寝中の処理や GitHub/GitLab 連携、AI コードレビュー自動化ワークフローに対応している。
Claude Code × n8n MCPで「作る→動かす→実行記録を読む→直す」を回す：LINE問い合わせ対応を作って踏んだこと
ZennClaude Code と n8n の MCP を組み合わせ、LINE 問い合わせ対応ワークフロー（32ノード）を1日で構築・検証した実践記録。MCP のツール体系と役割分担、実行記録からの原因特定方法、MCP 経由で画面操作と異なる落とし穴を解説。
Claude Code の MCP を .mcp.json で設計する──スコープ × トランスポート × 接続確認
ZennMCP サーバが /mcp に表示されない、接続に失敗する場合の原因は「設定をどこに書くか（local / project / user）」「どう繋ぐか（HTTP / stdio）」「実際に繋がったか」の3軸にある。.mcp.json の実装・환境変数展開・claude mcp コマンドによる接続確認を通じ、これら3軸を分離して MCP 設計する方法を解説。