話題のMCPを使ってモバイルオーダーアプリを作ってみた

はじめに

昨年11月にAnthropic社が提唱したMCP（Model Context Protocol）が話題ですね。MCPは、AIモデルとアプリケーション間のコミュニケーションを標準化する新しいプロトコルです。

株式会社Samuraiでは、オムニチャネルを管理するためのパッケージシステム「Airbeyond」を提供しています。商品情報や注文情報、会員情報などを一元管理できるこのシステムは、モバイルオーダーを導入したい飲食店様やECサイトを運営する企業様に広くご利用いただいています。

そこで、MCPを活用したモバイルオーダーアプリのプロトタイプをサクッと開発しましたので、その体験をご紹介します。

MCPとは？

MCPは、AI言語モデルと様々なサービス・アプリケーション間の連携を簡単にするプロトコルです。これにより、AIモデルが外部のツールや情報源にアクセスでき、より実用的なアプリケーションを構築できるようになります。

アプリ概要

今回実装するのは、飲食店のモバイルオーダーアプリです。
お客様がおすすめメニューを確認し、注文を行うことができるシンプルなアプリケーションです。

機能

1. おすすめメニュー表示機能

   • おすすめ商品を表示

2. 注文機能

   • メニューと数量を指定して注文
   • 合計金額の計算
   • 注文確認メッセージの表示

使用技術

公式のチュートリアルがあり、学習コストを抑えて実装することができます。また、SDKがPython、TypeScript、Ruby、Javaなどの主要な言語に対応しているため、開発者は普段使い慣れた言語でスムーズに開発を始めることができそうです。

https://modelcontextprotocol.io/introduction

今回はTypeScriptのSDKを使って実装してみました。

プロジェクト構成

mobile-order/
├── src/
│   └── index.ts          # メインサーバーコード
├── build/                # ビルド出力
├── package.json          # プロジェクト設定
└── tsconfig.json         # TypeScript設定

実装内容

※ package.jsonやtsconfig.jsonの設定、npmパッケージのインストールについてはチュートリアルの手順通りですので、ここではindex.tsの内容のみをご紹介します。

メニューデータの定義

まず、提供するメニューを定義します。

const MENU = {
  "ハンバーグ": { price: 1000, recommended: true },
  "チキンカツ": { price: 800, recommended: false },
  "ピザ": { price: 900, recommended: true },
  "サラダ": { price: 500, recommended: false }
};

各メニューには価格とおすすめフラグを設定し、レコメンド機能で活用しています。

MCPサーバーの初期化

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

const server = new McpServer({
  name: "mobile-order-app",
  version: "1.0.0",
  capabilities: {
    resources: {},
    tools: {},
  },
});

MCPサーバーは非常にシンプルに初期化できます。名前とバージョンを指定するだけで基本的な設定が完了します。

ツールの定義

MCPでは、AIが使用できる「ツール」を定義することで機能を実装します。

おすすめメニュー表示ツール

おすすめフラグがtrueの商品を返します。

server.tool(
  "recommend",
  "Display recommended menu items",
  {},
  async () => {
    const recommendedItems = Object.entries(MENU)
      .filter(([_, item]) => item.recommended)
      .map(([name]) => name);

    return {
      content: [
        {
          type: "text",
          text: `本日のおすすめメニュー:\n${recommendedItems.join("\n")}`
        }
      ]
    };
  }
);

注文ツール

引数として商品名（item）と注文数量（quantity）を受け取ります。ツールは合計金額を計算し、注文内容の確認メッセージを返します。

server.tool(
  "order",
  "Order food items",
  {
    item: z.string().describe("The item to order"),
    quantity: z.number().min(1).describe("The quantity of the item to order"),
  },
  async ({ item, quantity }) => {
    const total = menuItem.price * quantity;
    return {
      content: [
        {
          type: "text",
          text: `ご注文ありがとうございます!\n\n` +
                `商品: ${item}${recommendedMark}\n` +
                `数量: ${quantity}\n` +
                `単価: ${menuItem.price}円\n` +
                `合計: ${total}円\n\n` +
                `注文を受け付けました。`
        }
      ]
    };
  }
  );

サーバーの起動

最後に、MCPサーバーの起動部分を実装します。

async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Mobile Order MCP Server running on stdio");
}

main().catch((error) => {
  console.error("Fatal error in main():", error);
  process.exit(1);
});

StdioServerTransportを使用することで、標準入出力を通じてClaude Desktopと通信できるようになります。

以上で実装は完了です。以下のコマンドでビルドを実行します。

$ npm run build

Claude Desktopとの連携

作成したMCPサーバーをClaude Desktopで使用するための設定を行います。
~/Library/Application Support/Claude/claude_desktop_config.json に以下の内容を追記してください。
追記後、Claude Desktopを再起動する必要があります。

{
  "mcpServers": {
    "mobile-order": {
      "command": "node",
      "args": ["/path/to/mobile-order/build/index.js"]
    }
  }
}

動作確認

まずはClaudeにおすすめ商品を聞いてみましょう。

こんな感じでしっかりおすすめフラグtrueの商品が紹介されてますね！商品の特徴をAI側でよしなに補足してくれています。

では、続いて商品の注文を行なってみます。

しっかり商品情報や合計金額が計算されて表示されます！

では最後におまけですが、他のMCPと連携して動作するかも確認してみました。ここではfilesystemと連携できるかを確認します。

問題なく動作しました！注文内容.txtの内容もいい感じに整理されています！

まとめ

今回は簡易版のモバイルオーダーアプリをMCPを使って実装しました。想像以上に簡単に実装でき、AIとの連携も自然に行えました。

今回は簡易版でしたが、拡張機能の一例として下記が挙げられます。

✅ データベース連携 - 在庫管理や注文履歴の管理
✅ セキュリティ強化 - 認証・認可の実装
✅ 決済機能 - 実際の決済処理の追加

MCPを活用することで、音声入力を利用して目の不自由な方でもアプリから注文が可能になったり、システムに不慣れな高齢者の方でも気軽に利用できるようになったりすることが期待されます。一方で、新しい技術であることもあり本番環境での利用にはセキュリティ面での十分な検討が必要です。
適切な検討と対策を行えば、実用的なアプリケーション開発のための強力なツールになるでしょう。今後のMCPの発展と、それを活用したアプリケーション開発の可能性に注目していきたいと思います。