0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kai_kou(甲斐 甲)

Claude Apps入門 — MCPでFigma・Canva・Slackをチャット内に統合する

0
Last updated at Posted at 2026-03-27

はじめに

2026年3月26日、Anthropicは Claude モバイルアプリへの業務ツール統合を発表しました。スマートフォンから Figma のデザインファイルを取得し、Amplitude の分析ダッシュボードを確認し、Canva でプレゼン資料を作成する——これらをすべて Claude との会話の中で完結できます。

この機能の基盤は、2026年1月26日に発表された MCP Apps（Model Context Protocol Apps）です。MCP の拡張として策定されたオープン標準で、MCPサーバーがAIチャット内にインタラクティブなUIを提供できるようになりました。

本記事では、Claude Apps の概要・技術アーキテクチャ・開発者向けの実装方法までを公開情報をもとに解説します。

この記事で学べること

  • Claude Apps（MCP Apps）の仕組みと主要な9つのサービス統合
  • モバイルからの業務ツール操作（2026年3月26日発表の最新機能）
  • MCPサーバーにインタラクティブUIを追加する実装手順
  • セキュリティモデルと企業利用時の注意点

対象読者

  • Claude / MCP を活用した開発者向けツールを構築したい方
  • Figma・Canva・Slack などの業務ツールをAIチャットに統合したい方
  • MCPエコシステムの最新動向を把握したい方

TL;DR

  • Claude Apps = MCP の拡張で、AIチャット内にインタラクティブUIを埋め込む仕組み
  • 対応サービス: Slack・Canva・Figma・Box・Clay・Asana・Amplitude・Hex・monday.com（9社）
  • 2026年3月26日にモバイル対応が発表。ラップトップ不要でFigma・Amplitude等を操作可能
  • 開発者は @modelcontextprotocol/ext-apps でカスタムMCP Appを構築できる
  • Claude, ChatGPT, VS Code Insiders, Goose など複数クライアントに対応するオープン標準

Claude Apps（MCP Apps）とは

従来の課題

従来のAIアシスタントは「テキストを返す」だけでした。Figma のデザインを確認したい場合、ユーザーはファイルURLを手動でコピーしてAIに渡し、結果を別ウィンドウで確認する必要がありました。業務の実態は「AIとツールの間で情報を転記する作業」になりがちでした。

MCP Appsによる解決

2026年1月26日、Anthropicは MCP Apps を発表しました。これは Model Context Protocol（MCP）の公式拡張で、MCPサーバーがテキスト応答に加えて インタラクティブなUIコンポーネント を返せるようにする仕組みです。

"We open sourced MCP to give the ecosystem a universal way to connect tools to AI. Now we're extending MCP further so developers can build interactive UI on top of it, wherever their users are."
— Anthropic（2026-01-26）

ツールはダッシュボード・フォーム・ビジュアライゼーション・マルチステップワークフローなど、あらゆるインタラクティブUIをチャット内に表示できます。

仕様策定の背景

MCP Apps の仕様は Anthropic・OpenAI・MCP-UI コミュニティのメンテナーが共同策定しました。オープン標準のため、Claude 以外のクライアント（ChatGPT・VS Code Insiders・Goose など）でも実装可能です。

9つの統合サービス

2026年1月26日のリリース時点で、以下の9サービスが統合されています（claude.ai/directory で有効化可能）。

サービス カテゴリ 主な活用例
Slack コミュニケーション メッセージ下書き・フォーマット確認・送信前プレビュー
Canva デザイン プレゼン構成作成→デザイン編集→出力
Figma UX設計 テキスト・画像からフローチャート・ガントチャートを生成
Box ファイル管理 ファイル検索・ドキュメントインライン表示・内容への質問
Clay 営業/データ データエンリッチメント・リードリストの構築
Asana プロジェクト管理 会話からタスク・タイムライン自動生成
Amplitude プロダクト分析 インタラクティブな分析チャート構築・パラメータ調整
Hex ビジネスインテリジェンス データクエリ・可視化
monday.com ワークフロー ワークフロー自動化・プロジェクト調整

Salesforce の統合も近日公開予定とされています1。

利用料金と必要プラン

Claude Apps の利用に追加料金はかかりませんが、Pro・Max・Team・Enterprise プランが必要です2。

2026年3月26日: モバイル対応発表

発表内容

Anthropicは2026年3月26日、Claude モバイルアプリへの業務ツール統合を発表しました3。デモでは以下の操作をスマートフォン単体で完結しています。

  1. Amplitude でアナリティクスダッシュボードを確認
  2. Figma からデザインファイルを取得
  3. Canva でプレゼン資料を生成

1月のデスクトップ版リリースから約2ヶ月でモバイルにも展開されたことになります。

展望: "Orbit"

今後の機能として「Orbit」が計画されています4。スマートフォンのカレンダー作成・メッセージ作成・電話・ブラウザ操作など、スマートフォン機能へのより深いアクセスが提供される予定です。

技術アーキテクチャ: MCP Appsの仕組み

2つのMCPプリミティブ

MCP Appsは以下の2つの概念を使います5。

  1. UIメタデータ付きツール: ツールのレスポンスに _meta.ui.resourceUri フィールドを追加し、UIリソースのURLを指定
  2. UIリソース: ui:// スキームで提供される bundled HTML/JavaScript

通信の流れ

1. ユーザーがClaude でツールを呼び出す
2. MCPサーバーがツール結果 + ui://リソースURIを返す
3. Claudeクライアントがui://リソースを取得
4. サンドボックス化されたiframeにHTMLをレンダリング
5. UIとホスト間でJSON-RPC over postMessageによる双方向通信
6. ユーザーのUI操作はモデルにフィードバックされる

ツール呼び出しに「テキスト応答（AIモデル向け）」と「HTMLインターフェースへのポインタ（ユーザー向け）」の両方が含まれる設計です。

MIMEタイプと標準

UIリソースの MIME タイプは text/html;profile=mcp-app で、URIは ui:// スキームを使用します（例: ui://my-tool/widget-01）。

開発者向け: MCP Appsの構築

以下のコードサンプルは、MCP Apps公式ドキュメント および MCP Apps ブログ に基づく実装例です。実際のAPIは変更される可能性があるため、最新の公式ドキュメントを参照してください。

セットアップ

npm install @modelcontextprotocol/ext-apps @modelcontextprotocol/sdk

ext-apps パッケージには React・Vue・Svelte・Preact・Solid・バニラJSのスターターテンプレートが含まれています。

MCPサーバーへのUIメタデータ追加

既存のMCPサーバーにUIを追加する場合、registerAppTool と registerAppResource を使います6。

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import {
  registerAppResource,
  registerAppTool,
  RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";

const server = new McpServer({ name: "my-analytics-tool", version: "1.0.0" });

const RESOURCE_URI = "ui://analytics-chart/dashboard";

// UIリソース（HTML）をMCPリソースとして登録
registerAppResource(
  server,
  RESOURCE_URI,
  "Sales Dashboard UI",
  { mimeType: RESOURCE_MIME_TYPE },
  async () => {
    // HTMLファイルの内容を返す
    const html = await readFile("./dist/index.html", "utf-8");
    return { contents: [{ uri: RESOURCE_URI, text: html }] };
  }
);

// UIリソースへのポインタを含むツールを登録
registerAppTool(
  server,
  "get_sales_dashboard",
  {
    description: "Get interactive sales dashboard",
    inputSchema: { region: { type: "string" } },
    // ツール結果をこのUIリソースと関連づける
    ui: { resourceUri: RESOURCE_URI },
  },
  async ({ region }) => {
    const data = await fetchSalesData(region);
    return {
      content: [{ type: "text", text: JSON.stringify(data) }],
    };
  }
);

クライアント側（TypeScript/ブラウザ）

iframe 内のUIから MCPツールを呼び出すには App クラスを使います。

import { App } from "@modelcontextprotocol/ext-apps";

const app = new App({ name: "sales-dashboard-ui", version: "1.0.0" });

// ツール実行結果を受け取るハンドラ
app.ontoolresult = (result) => {
  const data = JSON.parse(result.content[0].text);
  renderChart(data);
};

// サーバーのMCPツールを呼び出す
async function handleRegionChange(region: string) {
  await app.callServerTool({
    name: "get_sales_dashboard",
    arguments: { region },
  });
}

// ホスト（Claude等）との接続を確立
app.connect();

ローカルテスト

# テストホストでローカル確認
npm start  # localhost:8080 でレンダリング

# MCP インスペクターでの検証
npx @mcpjam/inspector@latest

# cloudflared で外部公開（Claudeの設定でカスタムコネクタとして追加）
npx cloudflared tunnel --url http://localhost:3001

セキュリティモデル

MCP Appsは多層的なセキュリティを実装しています7。

sandboxed iframe の制限

すべてのMCP App UIはサンドボックス化されたiframe内で動作し、以下のアクセスが制限されています。

  • 親ウィンドウのDOMへのアクセス
  • ホストのCookieやlocalStorageの読み取り
  • 親ページのナビゲーション
  • 親コンテキストでのスクリプト実行

通信の監査可能性

ホストとUI間の通信はすべて postMessage API を通じた JSON-RPC メッセージ として処理され、監査が容易です。

ユーザー同意

Slack へのメッセージ送信・Canva デザインの公開などの重要操作には、実行前に プレビューと確認要求 が表示されます。企業向けには、Enterpriseプランでテンプレートの事前レビューが可能です。

まとめ

  • Claude Apps（MCP Apps） は、MCPサーバーがAIチャット内にインタラクティブUIを提供できるオープン標準
  • Slack・Figma・Canva・Amplitude など 9サービス が統合済み（claude.ai/directory で有効化）
  • 2026年3月26日の モバイル対応 により、スマートフォンだけで業務ツールをシームレスに操作可能
  • 開発者は @modelcontextprotocol/ext-apps パッケージで カスタムMCP Appを構築 し、Claude・ChatGPT・VS Code など複数クライアントで動作させられる
  • セキュリティは sandboxed iframe + JSON-RPC + ユーザー同意 の多層設計

エンジニアリングチームの内部ツールや分析ダッシュボードを Claude チャット内に統合することで、「AIとツールの間で情報を転記する作業」から解放される可能性があります。

参考リンク

  1. Anthropic launches interactive Claude apps, including Slack and other workplace tools — TechCrunch（2026-01-26） ↩

  2. Claude expands tool connections using MCP — Help Net Security（2026-01-27） ↩

  3. Anthropic upgrades Claude mobile app to handle work tasks without a laptop — Storyboard18（2026-03-26） ↩

  4. Anthropic Expands Claude Mobile Capabilities, Bringing Work Tools to Smartphones — The Hans India（2026-03-26） ↩

  5. MCP Apps - Bringing UI Capabilities To MCP Clients — Model Context Protocol Blog（2026-01-26） ↩

  6. MCP Apps Quickstart — Model Context Protocol Apps 公式ドキュメント ↩

  7. MCP Apps Guide: Build Interactive UI Inside Claude, ChatGPT, and VS Code — Bytebot（2026） ↩

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?