Twilio for Claude (MCP + Skills) を Claude Code で触ってみた

Twilio for Claude (MCP + Skills) を Claude Code で触ってみた

Twilio for Claude を Claude Code に入れて Video API でブラウザ通話を実装しました。MCP は API 検索として有用な一方、Skills は得意領域以外では MCP の補完が前提になりました。
2026.06.06

はじめに

Twilio が 2026 年 5 月に Twilio for Claude を発表しました。これは、Anthropic Claude などの AI コーディングエージェントに Twilio の知見を組み込む統合パッケージです。

Model Context Protocol (MCP) サーバーと Agent Skills の 2 つで構成されます。MCP サーバーは Twilio の 1,800 以上の API 仕様を AI から検索・参照できるようにするものです。Skills は SMS や Voice などの製品ごとに公式のベストプラクティスをまとめた手順書です。

本記事の主題は、Twilio for Claude を実際に Claude Code に入れて触ってみた使用感を共有することです。題材として Twilio Video API でのブラウザ通話実装を選びました。筆者が過去に書いた Twilio Video API + Twilio Function で 1対1 ビデオ通話を実装する と同じ機能を AI ペアプロで作り直すことで、MCP と Skills が実装の現場でどこまで有用か観察します。

検証環境は Claude Code 2.1.153 (Opus 4.7) on macOS、Node v24.15.0 です。

Twilio とは

Twilio とは、SMS や音声通話、ビデオ通話、メール送信などのコミュニケーション機能を API として提供するクラウドサービスです。アプリケーションにわずかなコードを追加するだけで、本格的な通信機能を組み込めます。

対象読者

  • Twilio for Claude (MCP と Skills) の使用感を知りたい人
  • Claude Code で AI ペアプロを試してみたい Twilio 開発者
  • AI コーディングエージェントから Twilio をどう使えるか興味がある人

参考

事前準備

Twilio for Claude の導入には、Claude Code の plugin marketplace に Twilio AI リポジトリを追加し、twilio-developer-kit プラグインをインストールします。これで 55 個の Skills が利用可能になります。

公式ブログでは plugin だけで MCP も 1 ステップで入ると説明されていますが、検証時点のプラグイン v0.3.1 を claude plugin details で確認すると MCP servers (0) で、MCP サーバーは同梱されていませんでした。そのため claude mcp add で HTTP MCP サーバーとして別途登録しました。

claude plugin marketplace add twilio/ai
claude plugin install twilio-developer-kit@twilio
claude mcp add --transport http twilio-docs https://mcp.twilio.com/docs

導入後にセッションを起動すると、mcp__twilio-docs__twilio__searchmcp__twilio-docs__twilio__retrieve が AI から呼び出せるツールとして増えます。Skills のメタ情報は system context に読み込まれ、AI が必要に応じて Skill 本体を読み込んで invoke できるようになります。

Twilio の認証情報については、Twilio CLI で API Key を発行する際に Account SID と Auth Token を使い、アプリ実装側 (Access Token JWT の発行) では API Key SID と Secret を使います。

Twilio for Claude を実際に使ってみる

要件をラフに渡してみる

要件は意図的にラフな自然言語で渡しました。

Twilio で 1 対 1 のビデオ通話を作りたい。PC ブラウザのタブ 2 枚で双方向に映像と音声を確認できる構成で。Twilio for Claude (MCP + Skills) を能動的に活用してほしい。

これに対して AI は、まず Planner カテゴリの Skill を試しました。Twilio Skills は Setup, Planner, Product, Guardrail の 4 カテゴリに分かれており、Planner は用途から製品を選定する役割を担います。AI は twilio-customer-support-architect を読み込みましたが、これは IVR やコンタクトセンター向けで、WebRTC ベースのブラウザビデオ通話には適合しませんでした。

結局、55 個の Skills を見渡しても、Video API を直接扱うものは 1 つもありませんでした。SMS, Voice, WhatsApp, Verify, SendGrid, Compliance には手厚いカバレッジがある一方、Video は意図的にスコープ外のようです。AI はこの状態を素直に認め、「製品選定は Skills の枠外で判断する」と切り替えました。

MCP が Video API を埋める

Skill カバレッジが届かない領域は MCP が補完します。AI は twilio__search で Group Room の作成と Access Token の発行に関するドキュメントを検索しました。

検索結果は、JavaScript SDK の Twilio.Video.connect を使うサンプルコード、participantConnectedtrackSubscribed のイベントパターン、そして op::twilio_video_v1::CreateRoom の API スキーマでした。これらを使えば、フロントエンドとバックエンドのスケルトンが組めます。

Skill 推奨手順が現環境では動かない

バックエンドは過去記事と同じく Twilio Functions に置く方針で進めました。AI は Skill twilio-cli-reference を読み込み、Twilio Serverless Toolkit が twilio serverless:inittwilio serverless:deploy の 2 コマンドで完結することを把握しました。

ところが、twilio plugins:install @twilio-labs/plugin-serverless を叩くと、内部依存の twilio-run@5.0.1 が Node v24 と非互換でインストールに失敗しました。twilio-run^20.x || ^22.x を要求しており、現行 LTS の Node 24 では使えない状態でした。

error twilio-run@5.0.1: The engine "node" is incompatible with this module.
Expected version "^20.x || ^22.x". Got "24.15.0"

Skill のテキストは公式の推奨手順を反映していますが、ツールチェインの細かな Node 要件までは Skill 自身に書かれていません。Skill だけを信用してもこの問題は事前に気づけません。

構成を切り替えて Vercel に統合する

ここで AI は計画を見直し、バックエンドを Vercel Serverless Functions に切り替える判断をしました。具体的には Vercel プロジェクトのルート直下に api/join-room.js を追加し、フロントエンドとバックエンドを 1 つの Vercel プロジェクトに統合しました。Vercel Functions は /api ディレクトリ配下を Serverless Function として自動認識する仕様です。Next.js App Router の Route Handler とは別物で、今回は Next.js を使わず Vercel Functions を直置きしています。

切り替えた構成では、Vercel CLI から vercel link, vercel env add, vercel --prod の 3 ステップで本番デプロイまで完結しました。環境変数は printf '%s' "$VAR" | vercel env add ... production のように stdin に流し込むことで、シェル履歴にも残らずに登録できます。

デプロイ後、POST /api/join-room のスモークテストを curl で叩いたところ、初回で HTTP 200 と JWT 形式の Access Token が返ってきました。MCP のサンプルコードがほぼそのまま動く品質だったことが大きいです。

Vercel Serverless Function の中身 (app/api/join-room.js)
const twilio = require('twilio');

const AccessToken = twilio.jwt.AccessToken;
const VideoGrant = AccessToken.VideoGrant;

const {
  TWILIO_ACCOUNT_SID,
  TWILIO_API_KEY_SID,
  TWILIO_API_KEY_SECRET,
} = process.env;

module.exports = async function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (req.method === 'OPTIONS') return res.status(204).end();
  if (req.method !== 'POST') return res.status(405).json({ error: 'Method Not Allowed' });

  const { roomName, identity } = req.body || {};
  if (!roomName || !identity) {
    return res.status(400).json({ error: 'roomName と identity は必須です' });
  }

  const client = twilio(TWILIO_API_KEY_SID, TWILIO_API_KEY_SECRET, {
    accountSid: TWILIO_ACCOUNT_SID,
  });

  try {
    try {
      await client.video.v1.rooms(roomName).fetch();
    } catch (e) {
      if (e && e.code === 20404) {
        await client.video.v1.rooms.create({ uniqueName: roomName, type: 'group' });
      } else throw e;
    }

    const token = new AccessToken(
      TWILIO_ACCOUNT_SID,
      TWILIO_API_KEY_SID,
      TWILIO_API_KEY_SECRET,
      { identity }
    );
    token.addGrant(new VideoGrant({ room: roomName }));

    res.status(200).json({ token: token.toJwt(), identity, roomName });
  } catch (err) {
    res.status(500).json({ error: err.message || 'unknown error' });
  }
};
フロントエンドの主要部分 (app/app.js から抜粋)
const { token } = await fetchToken(roomName, identity);
const room = await Twilio.Video.connect(token, {
  name: roomName,
  audio: true,
  video: { width: 640 },
});

room.localParticipant.tracks.forEach((publication) => {
  if (publication.track) attachTrack(publication.track, localContainer);
});

room.participants.forEach(handleRemoteParticipant);
room.on('participantConnected', handleRemoteParticipant);
room.on('participantDisconnected', () => clearContainer(remoteContainer));

function handleRemoteParticipant(participant) {
  participant.tracks.forEach((publication) => {
    if (publication.track) attachTrack(publication.track, remoteContainer);
  });
  participant.on('trackSubscribed', (track) => attachTrack(track, remoteContainer));
}

Twilio Video JS SDK は CDN https://media.twiliocdn.com/sdk/js/video/releases/2.32.0/twilio-video.min.js から読み込みました。

動作確認

Chrome のタブ 2 枚でページを開き、同じルーム名 claude-demo に別々の表示名で入室しました。双方のタブで自分の映像と相手の映像が並んで表示され、音声も双方向で流れることを確認しました。

Twilio Video Demo の動作画面

気づきと所感

MCP は API ドキュメントを AI から引き出す手段として、想像以上に優秀でした。twilio__search に自然言語のクエリを投げるだけで、サンプルコードと API スキーマが関連度順に揃って返ってきます。SE の DevDocs 検索を AI が代行しているような感覚です。

一方の Skills は、Twilio の幅広い製品の中でも、Skill 化された領域とそうでない領域の差が大きいことが分かりました。Video API のように Skill カバレッジ外の機能は、MCP に頼る形になります。Skills は「公式が推奨する開発フローのテンプレート」として有用であるものの、製品全部を網羅するものではないと考えるのが妥当です。

もう 1 つの発見は、Skill の推奨手順が現環境で動かないケースがあることです。今回は Twilio Serverless Toolkit が Node v24 で動かず、AI がその場で Vercel Serverless Functions への切り替えを提案しました。Skill は便利ですが、推奨される手順をそのまま盲信せず、実際に動くかを検証する姿勢が AI ペアプロでも必要です。

まとめ

Twilio for Claude を Claude Code に入れて、Video API でのブラウザ通話実装を題材にその使用感を検証しました。MCP は API リファレンス検索を AI から自動化する手段として有用でした。一方の Skills は得意領域では強い反面、Video のようなカバレッジ外の機能では MCP の補完が前提になります。Twilio for Claude を導入するか検討している方の参考になれば幸いです。

ウェビナーのご案内

クラスメソッドでは Twilio の活用に関するウェビナーを開催しています。

seminar image

Twilio for Claude を含む Twilio の最新トピックや実装事例に興味のある方は、ぜひ Twilio ウェビナー にアクセスしてみてください。


生成AI活用はクラスメソッドにお任せ

過去に支援してきた生成AIの支援実績100+を元にホワイトペーパーを作成しました。御社が抱えている課題のうち、どれが解決できて、どのようなサービスが受けられるのか?4つのフェーズに分けてまとめています。どうぞお気軽にご覧ください。

生成AI資料イメージ

無料でダウンロードする

この記事をシェアする

関連記事