Genkit MCP を使った AI アプリケーションの外部拡張
はじめに
生成 AI アプリを素早くかつ安全に外部システムへ拡張する方法として、Anthropic が提唱した Model Context Protocol (MCP) が注目を集めています。
本記事では、Google Firebase チーム製の AI オーケストレーションフレームワーク Genkit に実装されている Genkit MCP プラグインを使い、最小構成で AI アプリと外部サービスを連携させる手順をまとめます。
この記事で扱うこと
- Genkit MCP の構成と役割
- MCP クライアント／サーバーを最小コードで実装
- Cloud Run functions へのデプロイとオブザーバビリティ
この記事で扱わないこと
- MCP そのものの詳細仕様 (優れた解説記事が既に多数あるため)
- AI モデルのチューニング方法
Genkit MCP のおおまかな構成
| 立ち位置 | 役割 | 実際に使用するメソッド |
|---|---|---|
| MCP ホスト | LLM アプリ本体 (ここでは Genkit) | - |
| MCP クライアント | 外部 MCP サーバーへ接続しツール / リソース を呼び出す | mcpClient() |
| MCP サーバー | Genkit 側で定義したツール / プロンプトを外部へ公開 | mcpServer() |
開発環境のセットアップ
mkdir genkit-mcp-sample
cd genkit-mcp-sample
npm init -y
npm install typescript @types/node --save-dev
npx tsc --init
npm i genkit genkitx-mcp firebase-functions @genkit-ai/googleai
mkdir -p src
touch src/index.ts src/client.ts src/google-maps-flow.ts
export GEMINI_API_KEY=<your API key>
export GOOGLE_MAPS_API_KEY=<your API key>
その他詳細な設定に関しては下記リポジトリを参照してください。
Genkit MCP クライアントを実装する
以下は Google Maps Platform の MCP Server をローカル子プロセスで起動し、Geocoding API ツールを呼び出す例です。
import { mcpClient } from 'genkitx-mcp'
export const mapsClient = mcpClient({
name: 'maps',
serverProcess: {
command: 'npx',
args: ['-y', '@modelcontextprotocol/server-google-maps'],
env: {
...process.env as Record<string, string>,
GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY || '',
},
},
})
起動後、maps/geocode や maps/place_search といったツールが Genkit Developer UI に自動で登録されます。
Genkit を使用した実装
まずは、Genkit の 1 関数を示す Flow を実装します。
import { z } from 'genkit'
import { ai } from "."
export const googleMapsFlow = ai.defineFlow({
name: 'google-maps-flow',
inputSchema: z.string(),
}, async (prompt) => {
const { text } = await ai.generate({
prompt,
tools: [
'maps/maps_geocode',
// ↓ Register tools as needed below ↓
// 'maps/maps_reverse_geocode',
// 'maps/maps_search_places',
// 'maps/maps_place_details',
// 'maps/maps_distance_matrix',
// 'maps/maps_elevation',
// 'maps/maps_directions',
]
})
return text
})
次に、Genkit Flow の登録を行います。
import { genkit } from 'genkit'
import { gemini25FlashPreview0417 } from '@genkit-ai/googleai'
import { defineSecret } from 'firebase-functions/params'
import { logger } from 'genkit/logging'
import { mapsClient } from './client'
import { onCallGenkit } from 'firebase-functions/https'
import { googleMapsFlow } from './google-maps-flow'
// Set logging level to debug for detailed operation logs
logger.setLogLevel(`debug`)
// API keys stored in Google Cloud Secret Manager
export const googleAIapiKey = defineSecret(`GOOGLE_GENAI_API_KEY`)
export const mapsApiKey = defineSecret(`GOOGLE_MAPS_API_KEY`)
// Initialize Genkit
export const ai = genkit({
plugins: [ mapsClient ],
model: gemini25FlashPreview0417,
})
export const callGoogleMaps = onCallGenkit({
secrets: [ googleAIapiKey ],
region: 'asia-northeast1',
cors: true,
},
googleMapsFlow
)
Genkit Developer UI でローカル環境で動作確認
npx genkit start -o -- tsx --watch src/index.ts
東京スカイツリーの座標を聞いてみます。
すると、座標が返ってきたことが確認できました。
Cloud Run functions (for Firebase) にデプロイ
Genkit は Cloud Run functions for Firebase (2nd Gen = Cloud Run) と相性が良く、コマンド一発で簡単に対象の Google Cloud / Firebase プロジェクトへデプロイすることができます。
firebase deploy --only functions
オブザーバビリティ
Genkit 開発サーバで動かす間は Genkit Developer UI の Monitoring タブ だけで、「LLM → ツール呼び出し → 外部 MCP Server」というフローが一望できます。
これによって、Google Maps Platform の MCP Server の maps/maps_geocode がコールされていることを確認できました。
本番デプロイ後は、Firebase コンソールの Genkit メニュー から同様の確認が可能です。
詳細はこちらを参照してください。
Discussion