MCP Apps × Vonage で、多言語カスタマーサポートをサポートする MCPサーバーを作ってみた

// server.ts
import {
  registerAppResource,
  registerAppTool,
  RESOURCE_MIME_TYPE,  // = "text/html;profile=mcp-app"
} from "@modelcontextprotocol/ext-apps/server";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";

export function createServer(): McpServer {
  const server = new McpServer({
    name: "Multilingual CS Support",
    version: "1.0.0",
  });

  // ① UI Resource を登録
  const resourceUri = "ui://cs-app/ticket-view.html";
  registerAppResource(
    server,
    resourceUri,   // name（表示名。なんでもいいが、今回はURI をそのまま使用）
    resourceUri,   // uri（リソースの識別子）
    { mimeType: RESOURCE_MIME_TYPE },
    async () => ({
      contents: [{
        uri: resourceUri,
        mimeType: RESOURCE_MIME_TYPE,
        text: await fs.readFile("dist/views/ticket-view.html", "utf-8"),
      }],
    })
  );

  // ② Tool を登録（_meta.ui で UI Resource とリンク）
  registerAppTool(
    server,
    "view_ticket",
    {
      title: "View Ticket",
      description: "Display ticket details with translation",
      inputSchema: {
        ticketId: z.string().describe("Ticket ID (e.g. TK-1001)"),
      },
      _meta: {
        ui: {
          resourceUri,                   // ← UI Resource への参照
          visibility: ["model", "app"],  // LLM と UI の両方から使える
        },
      },
    },
    handleViewTicket  // ハンドラ関数
  );

  return server;
}

// src/tools/view-ticket.ts
export async function handleViewTicket(args: { ticketId: string }) {
  const ticket = getTicketById(args.ticketId);
  const customer = getCustomerById(ticket.customerId);

  // 日本語以外のチケットはOpenAI で翻訳
  const translation = ticket.language !== "ja"
    ? await translateTicket(ticket.id, ticket.body, ticket.language, "ja")
    : null;

  return {
    // テキストフォールバック（UI非対応ホスト向け）
    content: [{
      type: "text",
      text: `Ticket ${ticket.id}: ${ticket.subject}\\n${ticket.body}`,
    }],
    // 構造化データ（iframe の JS に渡される）
    structuredContent: {
      ticket,
      customer,
      translation,
    },
  };
}

// views/ticket-view.ts
import { App } from "@modelcontextprotocol/ext-apps";

const app = new App({ name: "Ticket View", version: "1.0.0" });

// ① サーバーからの structuredContent を受け取って描画
app.ontoolresult = (result) => {
  const { ticket, customer, translation } = result.structuredContent;
  renderTicketView(ticket, customer, translation);
};

// ② UI のボタンにサーバーのツール呼び出しを登録
document.getElementById("btn-reply").addEventListener("click", async () => {
  await app.callServerTool({
    name: "draft_reply",
    arguments: { ticketId: currentTicket.id },
  });
});

// ③ チャットにメッセージを送る（LLM に情報を渡す）イベントを登録
document.getElementById("btn-escalate").addEventListener("click", async () => {
  await app.sendMessage({
    role: "user",
    content: [{
      type: "text",
      text: `チケット ${currentTicket.id} をエスカレーションしてください`,
    }],
  });
});

// ④ テーマ（light/dark）対応
app.onhostcontextchanged = (ctx) => {
  if (ctx.theme) {
    document.documentElement.setAttribute("data-theme", ctx.theme);
  }
};

// ⑤ 接続開始（ハンドラ登録後に呼ぶ）
app.connect();

app.onhostcontextchanged = (ctx) => {
  if (ctx.theme) {
    document.documentElement.setAttribute("data-theme", ctx.theme);
  }
};

// src/services/translator.ts
export async function translateTicket(
  ticketId: string,
  originalText: string,
  originalLanguage: string,
  targetLang: string = "ja"
): Promise<TranslationResult> {
  // 日本語訳と英語バックトランスレーションを並列で実行
  const [translated, backTranslation] = await Promise.all([
    chat(
      `Translate from ${langName(originalLanguage)} to ${langName(targetLang)}. Return ONLY the translation.`,
      originalText
    ),
    chat(
      `Translate from ${langName(originalLanguage)} to English. Return ONLY the translation.`,
      originalText
    ),
  ]);

  return {
    original: originalText,
    originalLanguage,
    translated,
    targetLanguage: targetLang,
    backTranslation,
  };
}

// src/vonage/sms.ts
export async function sendSms(params: SendSmsParams): Promise<SendSmsResult> {
  if (process.env.VONAGE_MOCK === "true") {
    return { success: true, messageUuid: `mock-${Date.now()}` };
  }

  const resp = await vonage.messages.send({
    messageType: "text",
    text: params.text,
    to: params.to,                              // "34612345678"
    from: params.from ?? process.env.VONAGE_SMS_FROM!,
    channel: "sms",
  });
  return { success: true, messageUuid: resp.messageUUID };
}

// src/vonage/voice.ts
export async function makeEscalationCall(params: MakeCallParams): Promise<MakeCallResult> {
  if (process.env.VONAGE_MOCK === "true") {
    return { success: true, callUuid: `mock-call-${Date.now()}` };
  }

  const resp = await vonage.voice.createOutboundCall({
    to: [{ type: "phone", number: params.to }],
    from: { type: "phone", number: process.env.VONAGE_SMS_FROM! },
    ncco: [{
      action: "talk",
      text: params.message,     // TTS で読み上げる内容
      language: params.language ?? "ja-JP",
      style: 0,
      loop: 2,                  // 2 回繰り返し
    }],
  });
  return { success: true, callUuid: resp.uuid };
}