AI 生成 UI で始めるマルチチャネルチャット：v0 × Twilio Conversations 実践

はじめに

近年、自然言語を用いた Web UI 開発の手法として、Vercel 社が提供する v0（ブイゼロ） が大きな注目を集めています。生成 AI によって洗練された UI を即座に生成できることから、特にフロントエンドのプロトタイピングや MVP 構築において高い関心を集めており、エンジニアリングチームにおける導入検討も進んでいます。

しかし、v0 によって高品質なチャット画面を生成できたとしても、その UI が実際にどのようなバックエンドと接続され、どのようにユーザーとのリアルタイムな会話を処理するかについては、設計上の重要な課題として残っています。そこで本記事では、Twilio Conversations をバックエンドに採用することで、SMS・Web チャットといった異なるチャネルを横断して会話を管理できるシステムを構築する手法をご紹介します。

Twilio Conversations は、単なるチャット API ではなく、チャネルを問わず一貫した会話体験を提供することを主眼に設計されたマルチチャネル対応の通信プラットフォームであり、以下のような特徴を備えています。

• SMS、WhatsApp、LINE、WebSocket ベースのチャットなどを単一 API で統合
• 会話ごとに一意の Conversation ID をもち、チャネル間の履歴を同期
• ユーザー参加・退出、Webhooks、発話ログなどの一元的な制御が可能

対象読者

• v0 で生成された UI に実用的なバックエンドを接続したいと考えている方
• 複数のチャネル（例：SMS と Web チャット）をまたいだユーザー対応を一元化したい方
• Twilio Conversations の活用例を通じて、実務での導入可能性を評価したい方
• 業務用チャット基盤のモックを短期間で構築・検証したい技術担当者

想定されるユースケース

• 顧客対応窓口として、SMS 経由での問い合わせを Web UI 上で一元的に処理したい
• 社内オペレーターが、チャネルを意識せずに複数の問い合わせを同時にさばけるようにしたい
• ノーコード生成された UI（v0）と柔軟な通信バックエンド（Twilio）を連携させたプロトタイプを、短期間で検証・改善したい
• SMS や LINE などチャネル起点のコミュニケーションを、Web 側に統合・履歴化して残したい

本記事のゴール

本記事の目的は、以下のステップを通じて、v0 × Twilio Conversations を組み合わせたマルチチャネル対応チャットアプリケーションのプロトタイプを、最小限の実装で構築することにあります。

1. v0 で Web チャット UI を生成・カスタマイズする
2. Twilio Conversations を用いて、SMS 起点の会話を自動生成・管理する
3. Webhook を利用して、会話イベントをフロントエンドと同期する
4. 複数チャネルをまたぐ実運用に近いチャットフローを検証可能な形で完成させる

v0 とは

v0 は、Vercel 社が提供する自然言語駆動型の Web UI コード生成ツールです。開発者は、プロンプトを入力することで、React（Next.js）＋Tailwind CSS ベースの UI コンポーネントを即座に生成・取得できます。

Figma ライクな直感的インターフェースを備えており、生成された UI は即座に画面上でプレビュー・調整できます。UI 生成の過程でコードを直接記述する必要はなく、必要に応じて生成されたコードをエクスポートして、任意のプロジェクトに組み込むことが可能です。

v0 の動作イメージ（16 倍速）

主な特徴

• 自然言語によるプロンプト駆動型の UI 開発
  「チャットアプリのインターフェースを作って」 「チケット一覧画面を作って」など、簡単な指示で構成済みの UI が生成されます。

• Next.js / Tailwind CSS ベースのコード出力
  フロントエンドの実運用でそのまま利用可能なレベルのコードが出力されます。

• ShadCN UI との統合
  標準コンポーネント群として ShadCN UI を採用しており、デザイン性と機能性を両立した UI が初期状態で提供されます。

• デザインからコーディングまでのプロセス短縮
  Figma → コーディングという従来の分業プロセスを、1 ステップで実現します。

活用場面

• MVP（Minimum Viable Product）の構築：短期間での画面試作やプロダクト検証
• 業務アプリケーションの管理画面やダッシュボードのひな型生成
• フロントエンド開発の初期段階における構成検討と開発高速化

Twilio とは

Twilio は、米国発の通信 API プラットフォームであり、電話・SMS・チャット・ビデオ通話などのリアルタイムコミュニケーションを、開発者が自らのアプリケーションに柔軟に統合できるようにするための各種 API／SDK を提供しています。

従来、通信系のシステムを自前で構築・運用するには、高額な設備投資と煩雑なプロトコル管理が必要でした。Twilio はこれらを抽象化し、HTTP ベースの API 呼び出しだけで SMS 送信・音声通話・チャットセッションの作成などを可能にすることで、クラウド時代の通信実装を根本的に変革しました。

提供されている主なサービス群

Twilio Conversations の位置づけ

本記事で扱う Twilio Conversations は、複数のチャネル（SMS、Web チャット、WhatsApp 等）にまたがる会話を統一的に扱えるメッセージング基盤です。特徴的なのは、単なる「メッセージ送信 API」ではなく、以下のような会話単位での抽象化・制御が行える設計になっている点です。

• チャネルを超えて会話を統合管理（例：Web チャットと SMS の履歴を同一スレッドとして扱う）
• 「Conversation」という単位でメッセージ・参加者・状態を一元的に管理
• Webhook や SDK を用いたリアルタイムイベント処理に対応
• チャットアプリの UI に必要な入力中表示・既読管理などの補助機能も充実

Twilio Conversations は単なる通信 API を超えて、会話のライフサイクルを設計単位として捉えられる点が大きな強みです。これにより、チャネルごとに分断されがちなコミュニケーションを、ユーザー中心の体験に再構成することが可能になります。

構成全体と実装アプローチ

本構成では、チャネル起点で発生したメッセージ（例：SMS）を契機として、Twilio Conversations 上に会話を生成し、その情報を Web 側と共有する形をとっています。これにより、ユーザーは SMS で問い合わせを開始し、オペレーターは Web UI からその問い合わせにリアルタイムで返信できるようになります。

実装の流れ

このプロトタイプでは、以下の順序で実装・構築を進めていきます。

1. Twilio 上で Messaging Service を作成し、Conversations の準備を行う
2. /sms-webhook エンドポイントを設置し、SMS 受信をトリガーに会話スレッドを生成
3. Conversations API を使って、Web 側で新しい会話を参照・参加できるようにする
4. v0 により生成したチャット UI に、Twilio Conversations SDK を組み込み、チャット機能を完成させる

この構成により、ユーザーは SMS、オペレーターは Web チャットという異なるチャネルを通じながらも、一貫した会話をリアルタイムに継続できる仕組みが実現されます。

Twilio 側の準備

まずは、Twilio Conversations を活用するための事前準備として、Twilio Console 上で以下の設定を行います。

SMS 対応の電話番号を取得する

Twilio Conversations では、SMS 経由のメッセージを Conversation に取り込むために、SMS 対応の Twilio 電話番号が必要です。Twilio Console の Phone Numbers > Manage > Active Numbers から、SMS 対応の番号を検索・購入してください。取得した番号は、後ほど Webhook や Messaging Service に紐付けて使用します。

Messaging Service を作成する

SMS 経由の通信を Conversations に橋渡しするためには、Messaging Service を介した構成が推奨されます。以下の手順で Messaging Service を作成します。

1. Messaging > Services > [Create Messaging Service] を選択
2. 任意の名前を指定して設定
3. [Add Sender] で購入した Twilio 電話番号を「Senders」に追加
4. 作成後、Integration > Incoming Messages で Send a webhook を選択。Request URL には、この後作成するエンドポイント URL（/sms-webhook）を設定
   

この Webhook URL は、SMS 受信時にサーバー側のロジックを呼び出すために必要となります。

Conversations Service を作成する

Twilio Conversations は、Conversations Service（チャットインスタンス） の中に複数の Conversation（会話スレッド）を管理する構造になっています。Conversations > Manager > Services > [Create new Service] から作成します。

作成後 Service SID（ISxxxxxxxxxx）は、以降の Conversation 作成時に必要となるため控えておいてください。

開発用 API キー

v0 側の Web チャット UI で SDK を用いて Conversation に参加する場合、Twilio では Access Token による認証が必要です。

• API keys&tokens にアクセスし、 API Key を作成
• Key SID と Secret を控えておく

SMS 受信をトリガーに Conversation を生成する

Twilio Conversations を活用する上で、ユーザーから送信された SMS をトリガーとして会話スレッド（Conversation）を自動生成する仕組みが求められます。Twilio では、Messaging Service に対して Webhook を設定することで、このようなトリガー処理を簡潔に実装できます。Twilio Functions を使用して /sms-webhook を構築し、以下のフローを実現します。

1. SMS を受信
2. 送信元の電話番号をキーとして新規 Conversation を作成（または既存を再利用）
3. Conversation に SMS 送信者を参加者として追加

Twilio Functions プロジェクトの作成

Functions & Assets → Services → [Create Service] から新しい Function サービスを作成します。任意のサービス名（例：conversation-hooks）を設定してください。

/sms-webhook エンドポイントを追加

Service 作成後、以下のような構成で Function を追加します。Add + > Add Function で /sms-webhook エンドポイントを作成します。

// /sms-webhook
exports.handler = async function (context, event, callback) {
  const client = context.getTwilioClient();
  const serviceSid = context.CONVERSATIONS_SERVICE_SID;

  const fromNumber = event.From; // ユーザーの SMS 発信元
  const toNumber = event.To;     // Twilio 番号（Messaging Service 経由でも使用される）

  try {
    // 既存 Conversation が存在するかチェック（簡易な属性検索または永続化による判定が必要）
    const conversations = await client.conversations.v1
      .services(serviceSid)
      .conversations.list({
        limit: 20,
      });

    let conversation = conversations.find((c) => c.friendlyName === fromNumber);

    if (!conversation) {
      // Conversation を作成
      conversation = await client.conversations.v1
        .services(serviceSid)
        .conversations
        .create({
          friendlyName: fromNumber,
          attributes: JSON.stringify({ origin: 'sms' }),
        });

      // SMS 参加者を追加
      await client.conversations.v1
        .conversations(conversation.sid)
        .participants.create({
          'messagingBinding.address': fromNumber,
          'messagingBinding.proxyAddress': toNumber,
        });
    }

    // 返信メッセージ（任意）
    const twiml = new Twilio.twiml.MessagingResponse();
    twiml.message('メッセージを受け取りました。担当者がチャットで応答します。');

    return callback(null, twiml);
  } catch (err) {
    console.error('Conversation webhook error:', err);
    return callback(err);
  }
};

Messaging Service に Webhook を紐付け

エンドポイントのメニューから Copy URL を選択してエンドポイント URL を取得します。

/sms-webhook の URL を、Messaging Service の Incoming Messages 設定に入力します。タイプは HTTP Post とします。

Twilio Functions に必要なエンドポイントを追加する

v0 側の Web チャット UI との接続に必要となるエンドポイント群を Twilio Functions 上に追加し、バックエンド基盤を整備していきます。今回の構成で必要な主なエンドポイントは以下の通りです。

以下では、それぞれの役割と実装例を順に紹介します。

/token：Web クライアント向けトークン発行

このエンドポイントは、Web 側からの SDK 初期化時に使用され、認証付きのチャットセッションを確立するために 一時的な JWT トークンを返却します。

// /token
const twilio = require('twilio');

exports.handler = async function (context, event, callback) {
  const AccessToken = twilio.jwt.AccessToken;
  const ChatGrant = AccessToken.ChatGrant;

  const { ACCOUNT_SID, API_KEY, API_SECRET, CONVERSATIONS_SERVICE_SID } = context;
  const identity = event.identity || 'user_' + Math.random().toString(36).slice(2, 10);

  const chatGrant = new ChatGrant({ serviceSid: CONVERSATIONS_SERVICE_SID });
  const token = new AccessToken(ACCOUNT_SID, API_KEY, API_SECRET, { identity });
  token.addGrant(chatGrant);

  const response = new Twilio.Response();
  response.appendHeader('Content-Type', 'application/json');

  // CORS ヘッダー（本番運用時は `*` ではなく適切なオリジンに絞ってください）
  response.appendHeader('Access-Control-Allow-Origin', '*');
  response.appendHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');

  response.setBody({
    token: token.toJwt(),
    identity,
  });

  return callback(null, response);
};

/conversations：会話一覧の取得

オペレーター用 UI でチャットルーム一覧を表示するためには、現在進行中の Conversation を取得する必要があります。

ファイル名: /conversations

// /conversations
exports.handler = async function (context, event, callback) {
  const client = context.getTwilioClient();
  const serviceSid = context.CONVERSATIONS_SERVICE_SID;

  const response = new Twilio.Response();
  response.appendHeader('Content-Type', 'application/json');

    // CORS ヘッダー（本番運用時は `*` ではなく適切なオリジンに絞ってください）
  response.appendHeader('Access-Control-Allow-Origin', '*');
  response.appendHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');

  try {
    const conversations = await client.conversations.v1
      .services(serviceSid)
      .conversations
      .list({
         limit: 50 
      });

    const result = conversations.map(c => ({
      sid: c.sid,
      friendlyName: c.friendlyName,
      state: c.state,
      dateCreated: c.dateCreated,
    }));

    response.setBody(result);
    return callback(null, response);
  } catch (err) {
    console.error('Error fetching conversations:', err);
    response.setStatusCode(500);
    response.setBody({ error: 'Internal Server Error' });
    return callback(null, response);
  }
};

/join：会話への参加

Web チャット側で特定の Conversation に参加し、リアルタイム通信を開始するための処理です。

ファイル名: /join

// /join
exports.handler = async function (context, event, callback) {
  const client = context.getTwilioClient();
  const serviceSid = context.CONVERSATIONS_SERVICE_SID;

  const response = new Twilio.Response();
  response.appendHeader('Content-Type', 'application/json');

  // CORS ヘッダー（本番運用時は `*` ではなく適切なオリジンに絞ってください）
  response.appendHeader('Access-Control-Allow-Origin', '*');
  response.appendHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');

  const { conversationSid, identity } = event;

  try {
    await client.conversations.v1
      .services(serviceSid)
      .conversations(conversationSid)
      .participants.create({ identity });

    response.setBody({ status: 'joined' });
    return callback(null, response);
  } catch (err) {
    if (err.code === 50433) {
      response.setBody({ status: 'already_joined' });
      return callback(null, response);
    }

    console.error('Error joining conversation:', err);
    response.setStatusCode(500);
    response.setBody({ error: 'Failed to join conversation' });
    return callback(null, response);
  }
};

エンドポイントの公開

エンドポイントの鍵マークをクリックして Public を選択し、エンドポイントを公開します。

環境変数の設定

Environmental Variables に次の値を設定します。

一連の設定が完了したら [Deploy All] をクリックします。

v0 による UI 生成と動作確認

ここまでの手順で、Twilio 上に SMS 起点で Conversation を生成し、Web チャット UI 側でそれらを操作するための API 群（/token, /conversations, /join）が整備されました。ここからは、v0 により生成した Web UI に Twilio Conversations SDK を組み込み、実際のチャット機能を稼働させる工程を解説します。

v0 に渡すプロンプトの工夫

v0 は非常に強力な UI 生成ツールですが、自然言語による指示の精度に出力結果が大きく依存するという特徴があります。そのため、生成されるコードを高い再利用性・保守性のあるものにするためには、あらかじめ 設計思想・API スキーマ・ディレクトリ構成・コンポーネント構造などを適切にプロンプトに含めることが重要です。

以下に、今回のチャットアプリ構築に適したプロンプト例を示します。

以下の条件に従って、Twilio Conversations を用いた Web チャットオペレーター UI を実装してください。

## 要件

1. src/app/page.tsx に、現在アクティブな会話スレッド一覧を表示してください。
   - GET https://conversation-hooks-****.twil.io/conversations エンドポイントから以下の形式でデータが返ってきます：
     [
       {
         "sid": "CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
         "friendlyName": "+819012345678",
         "state": "active",
         "dateCreated": "2024-01-01T12:34:56Z"
       },
       ...
     ]

   - 表形式で一覧を表示し、各行をクリックするとその会話の詳細画面に遷移してください。
   - 参考: /conversations エンドポイントの実装
     \`\`\`
// /conversations
exports.handler = async function (context, event, callback) {
  const client = context.getTwilioClient();
  const serviceSid = context.CONVERSATIONS_SERVICE_SID;

  const response = new Twilio.Response();
  response.appendHeader('Content-Type', 'application/json');

    // CORS ヘッダー（本番運用時は `*` ではなく適切なオリジンに絞ってください）
  response.appendHeader('Access-Control-Allow-Origin', '*');
  response.appendHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');

  try {
    const conversations = await client.conversations.v1
      .services(serviceSid)
      .conversations
      .list({
         limit: 50 
      });

    const result = conversations.map(c => ({
      sid: c.sid,
      friendlyName: c.friendlyName,
      state: c.state,
      dateCreated: c.dateCreated,
    }));

    response.setBody(result);
    return callback(null, response);
  } catch (err) {
    console.error('Error fetching conversations:', err);
    response.setStatusCode(500);
    response.setBody({ error: 'Internal Server Error' });
    return callback(null, response);
  }
};\`\`\`

2. 会話の詳細画面は `src/app/chat/page.tsx` に実装してください。
   - クエリパラメータで `conversationSid` を受け取り、Twilio Conversations SDK を使ってその会話に参加し、メッセージ履歴と送信機能を提供してください。
   - 送受信したメッセージを `src/components/ChatBox.tsx` にて表示し、モダンでスムーズなアニメーション（フェードイン・スライド・入力中のバブルなど）を用いたチャット UI を実装してください。
   - 画面下部にメッセージ入力欄（Shadcn の Input）と送信ボタンを配置してください。

3. Twilio Conversations SDK を使ってリアルタイム同期を実現します。
   - クライアントトークンは `https://conversation-hooks-****.twil.io/token` エンドポイントで取得します（`identity` を送ると JWT が返ってきます）。
   - 参考: /token エンドポイントの実装
     \`\`\`
// /token
const twilio = require('twilio');

exports.handler = async function (context, event, callback) {
  const AccessToken = twilio.jwt.AccessToken;
  const ChatGrant = AccessToken.ChatGrant;

  const { ACCOUNT_SID, API_KEY, API_SECRET, CONVERSATIONS_SERVICE_SID } = context;
  const identity = event.identity || 'user_' + Math.random().toString(36).slice(2, 10);

  const chatGrant = new ChatGrant({ serviceSid: CONVERSATIONS_SERVICE_SID });
  const token = new AccessToken(ACCOUNT_SID, API_KEY, API_SECRET, { identity });
  token.addGrant(chatGrant);

  const response = new Twilio.Response();
  response.appendHeader('Content-Type', 'application/json');

  // CORS ヘッダー（本番運用時は `*` ではなく適切なオリジンに絞ってください）
  response.appendHeader('Access-Control-Allow-Origin', '*');
  response.appendHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');

  response.setBody({
    token: token.toJwt(),
    identity,
  });

  return callback(null, response);
};\`\`\`
   - 会話への参加は `https://conversation-hooks-****.twil.io/join` に `conversationSid` と `identity` を POST することで実現します。
   - 参考: /join エンドポイントの実装
     \`\`\`
// /join
exports.handler = async function (context, event, callback) {
  const client = context.getTwilioClient();
  const serviceSid = context.CONVERSATIONS_SERVICE_SID;

  const response = new Twilio.Response();
  response.appendHeader('Content-Type', 'application/json');

  // CORS ヘッダー（本番運用時は `*` ではなく適切なオリジンに絞ってください）
  response.appendHeader('Access-Control-Allow-Origin', '*');
  response.appendHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');

  const { conversationSid, identity } = event;

  try {
    await client.conversations.v1
      .services(serviceSid)
      .conversations(conversationSid)
      .participants.create({ identity });

    response.setBody({ status: 'joined' });
    return callback(null, response);
  } catch (err) {
    if (err.code === 50433) {
      response.setBody({ status: 'already_joined' });
      return callback(null, response);
    }

    console.error('Error joining conversation:', err);
    response.setStatusCode(500);
    response.setBody({ error: 'Failed to join conversation' });
    return callback(null, response);
  }
};\`\`\`

4. 生成されたコードは、Next.js の App Router 構成で構築してください。
   - `app/page.tsx`: 会話一覧画面
   - `app/chat/page.tsx`: チャット画面（必要に応じて動的セグメント化も可）
   - `components/ChatBox.tsx`: メッセージバブルを表示するコンポーネント

## 参考

Twilio Conversations のクライアント実装に関しては、以下のドキュメントを参照してください：
https://www.twilio.com/docs/conversations/javascript/quickstart

このチャット UI は、SMS 経由で開始された Twilio Conversation に、Web オペレーターが参加するためのインターフェースです。SMS を起点とした問い合わせに対して、Web UI から一貫した会話体験を提供するために設計されています。

動作イメージ（20 倍速）

ローカル環境での検証

画面左上のダウンロードボタンを押し、 npx コマンドをコピーします。

コピーしたコマンドを実行しローカルに環境をコピーします。

npx shadcn add "https://****"
√ What is your project named? ... v0-twilio-demo
√ Creating a new Next.js project.
√ Which color would you like to use as the base color? » Neutral
√ Writing components.json.
√ Checking registry.
√ Installing dependencies.
√ The file utils.ts already exists. Would you like to overwrite? ... yes
√ The file page.tsx already exists. Would you like to overwrite? ... yes

コピーが完了したら実行し、 localhost:3000 で動作を確認します。

cd v0-twilio-demo
npm run dev

今回の出力結果では、トップページで会話の一覧が確認できました。

Conversation 作成の検証

Twilio 番号に SMS を送信し、 Conversation が生成されることを確認します。Conversation をクリックしてチャットウインドウを開き、チャットウインドウでメッセージを入力すると、 SMS へ返信されることが確認できました。

まとめ

本記事では、v0 による UI 生成と Twilio Conversations によるマルチチャネル会話管理を組み合わせたチャットアプリケーションのプロトタイプ構築手法を紹介しました。自然言語による UI 開発と、堅牢な通信基盤を融合させることで、SMS などの従来型チャネルと Web チャットをスムーズに接続する環境が構築可能であることを示しました。特に以下の点で、迅速な検証や MVP 開発に適したアーキテクチャが実現されました。

• v0 を活用した 高速な UI プロトタイピング
• Twilio Functions による 軽量なバックエンド構築
• Conversations API を活用した 会話単位でのメッセージ統合
• Web と SMS 間の リアルタイムなチャネル連携

このような構成は、小規模チームでのチャットサービス開発や、業務用チャットオペレーションの試験導入において、大きな導入効果を期待できます。

今後の展望

本プロトタイプは最小限の構成で構築されていますが、以下のような機能拡張・応用展開が可能です。

• 新規メッセージ通知の実装
  Webhook 連携により、新しい問い合わせを Slack や メールなどで通知

• 会話メタ情報の管理
  各 Conversation に対してタグ・対応状況・担当者などの属性を持たせ、管理画面でのフィルタリングや分析を可能にする

• 会話終了処理やアーカイブ機能
  対応完了後の会話を非表示にしたり、履歴として保存したりすることで、実運用に近づける

• 他チャネルとの統合（例：LINE・WhatsApp）
  Twilio Conversations のチャネル拡張性を活かし、より多様な問い合わせチャネルを一元管理可能にする

• セキュリティ強化
  トークンの有効期限管理、CORS 対応の最適化、Function エンドポイントの認証保護などを段階的に導入

今後は、こうした機能を段階的に実装しつつ、実環境でのユーザビリティ検証や拡張性テストを進めることで、より洗練されたチャット運用基盤へと育てていくことが期待されます。