はじめに
こんにちは、株式会社キカガク CTO 室のたかはしです。みなさん、AI の最新情報の出るペースやすごさにそろそろお疲れではありませんか？今ですと GPT-4o の画像生成が話題ですね。
息抜きに MCP 触ってみませんか？楽しいですよ。（追い打ち）
今回作るもの
ということでこの記事では Vercel の AI SDK 4.2 で MCP 機能が追加されたので、 Google カレンダーで予定確認ができたり、予定追加ができたりするチャットアプリの解説をしていきます。
よくある天気を聞く MCP を使うとかのほうが簡単なのですが、わざわざ MCP でなくてもいいなと思い、一手間必要ですがわりと簡単に実装できるので、ぜひ試してみてください。
「今日の予定を確認して」と伝えるときちんと教えてくれ、予定を追加することも可能です。
サンプルのリポジトリは以下です。
useChat やツールについては以下の記事を参考にしてください。
また、今回ではローカルに Google カレンダーと接続している MCP を用意して使っているので、以下のリポジトリから準備してみてください。
実装解説
主にクライアント、サーバーの 2 ファイルで解説できます。
クライアント側の実装
クライアント側のコードは比較的シンプルです。Vercel AI SDK の useChat フックを使用して、チャットインターフェースを構築しています。ストリーミングにも対応しています。
// ChatInterface.tsx
"use client";
import { useChat } from "@ai-sdk/react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { MemoizedMarkdown } from "./MemoizedMarkdown";
import { Send } from "lucide-react";
export default function ChatInterface() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: "/api/chat",
experimental_throttle: 50,
});
return (
<div className="flex flex-col h-full">
<div className="flex-1 p-4 overflow-y-auto space-y-4">
{messages.length === 0 ? (
<div className="flex items-center justify-center h-full">
<p className="text-gray-500 text-center">
Try asking something like "Check my schedule for today".
<br />
This assistant can integrate with Google Calendar.
</p>
</div>
) : (
messages.map((message) => (
<div key={message.id} className="break-words max-w-4xl mx-auto">
<div
className={`p-3 rounded ${
message.role === "user"
? "bg-gray-100 ml-auto max-w-[80%]"
: "bg-gray-50 max-w-[80%]"
}`}
>
<MemoizedMarkdown id={message.id} content={message.content} />
</div>
</div>
))
)}
</div>
<div className="border-t p-3">
<form onSubmit={handleSubmit} className="flex gap-2 max-w-4xl mx-auto">
<Input
type="text"
value={input}
onChange={handleInputChange}
placeholder="Enter your task or instruction..."
className="flex-1"
/>
<Button
type="submit"
disabled={!input.trim()}
variant="default"
size="sm"
>
<Send size={16} className="mr-1" /> Send
</Button>
</form>
</div>
</div>
);
}
サーバー側の実装
サーバー側では、MCP クライアントを初期化し、Google カレンダーと連携しています。
-
experimental_createMCPClientを使用して MCP クライアントを作成 -
StdioMCPTransportで Google カレンダー MCP と接続 -
mcpClient.tools()で利用可能なツールのリストを取得 -
streamText関数でストリーミングに対応したレスポンスを生成
// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import {
experimental_createMCPClient as createMCPClient,
streamText,
} from "ai";
import { Experimental_StdioMCPTransport as StdioMCPTransport } from "ai/mcp-stdio";
import { NextRequest, NextResponse } from "next/server";
export async function POST(req: NextRequest) {
const mcpClient = await createMCPClient({
transport: new StdioMCPTransport({
command: "env",
args: [
"node",
process.env.GOOGLE_CALENDAR_MCP_PATH ||
"path/to/google-calendar-mcp/build/index.js",
],
}),
});
try {
const { messages } = await req.json();
const tools = await mcpClient.tools();
// Generate text using OpenAI
const result = streamText({
model: openai("gpt-4o"),
tools,
messages,
system: `You are a productivity assistant. Use the following tools to help users manage their tasks:
1. Google Calendar: For scheduling appointments and events
Format your responses using Markdown, especially utilizing these elements:
- Headings (#, ##)
- Bullet points (- or 1.)
- Code blocks (\`\`\`)
- Bold (**bold**) and italic (*italic*)
Note: When using Google Calendar, always use "primary" as the calendar ID.
When performing calendar operations, always specify "primary" for the calendarId parameter.
Example: mcp_MCP_Google_Calendar_list_events({calendarId: "primary"})
Today's date is ${new Date().toISOString().split("T")[0]}.`,
maxSteps: 10,
onFinish: async () => {
await mcpClient.close();
},
});
return result.toDataStreamResponse();
} catch (error) {
console.error("Error processing chat:", error);
return NextResponse.json(
{ error: "An error occurred while processing the request" },
{ status: 500 }
);
}
}
MCP の動作について
MCP（Model-Component-Protocol）は、LLM と外部ツールを接続するための標準化されています。今回の実装では、以下のように動いています。
- ユーザーがクライアントからメッセージを送信
- サーバー側で MCP クライアントが初期化され、Google カレンダー MCP と接続
- MCP から利用可能なツール情報を取得
- OpenAI モデルがユーザーのメッセージを解釈し、必要に応じて MCP ツールを呼び出す
- Google カレンダー API と連携して予定の取得や作成などの操作を実行
- 結果をユーザーに返却
MCP の大きなメリットは、LLM と外部サービスの連携が標準化された方法で行えることです。Vercel AI SDK 4.2 では MCP をサポートすることで、様々な外部サービスとシームレスに連携できるようになりました。
例えば、Google カレンダーから予定を取得して、メールで空き時間を送信するといったことも可能です。
まとめ
Vercel AI SDK 4.2 で追加された MCP 機能を使うことで、Google カレンダーと連携したチャットアプリを比較的簡単に実装できました。
- クライアント側は
useChatフックで UI を構築 - サーバー側は MCP を使って Google カレンダーと連携
- AI モデルが自然言語を解釈して適切なカレンダー操作を実行
ぜひお試しください！
キカガク CTO 室とは？
株式会社キカガクの CTO 室は、生成 AI の活用と業務効率化の推進を担う中核部門です。
社内外の課題解決に向けた技術戦略を実行するため、以下の 2 つのチームで構成されています。
AI/LLM チーム
高度な自然言語処理や生成 AI 技術を駆使し、実用的なソリューションの開発・運用を担当しています。
Corporate IT チーム
社内 IT インフラの整備と、業務システムの統合・最適化を推進し、全社的なデジタルトランスフォーメーションを実現します。
エンジニア募集中！
株式会社キカガクは、教育を軸に人材領域で企業の DX を支援することで、未来の可能性を切り拓いています。
最先端の技術を駆使しながら、社会にインパクトを与えるプロジェクトに挑戦できる情熱あるエンジニアを募集しています！
求める人物像
-
技術に情熱がある方
最新の AI/LLM 技術、クラウド技術、Web 開発などに興味を持ち、常に学び続ける姿勢のある方 -
チャレンジ精神旺盛な方
新しいアイデアや技術に積極的に取り組み、実装から改善まで自ら動ける方 -
チームプレイヤー
多様なメンバーと協力し、課題解決に努められる方
ここが魅力！
-
最新技術に触れられる環境
生成 AI、自然言語処理、クラウドプラットフォームなど、業界最先端の技術に日常的に関われます。 -
自律性と成長を促す文化
自らのアイデアを形にできる自由な環境で、キャリアアップを支援します。 -
社会にインパクトを与えるプロジェクト
教育と人材の領域で企業の DX を推進するプロジェクトに参加し、社会に貢献できます。
応募方法
ご興味のある方は、ぜひ 採用情報ページ をご覧ください。
話を聞いてみたいという方も、カジュアル面談の応募をお待ちしております！
Discussion