React で CopilotKit を使用する
CopilotKitは、カスタマイズ可能なAIコパイロットをアプリケーションに素早く統合するためのReactコンポーネントを提供します。 Mastraと組み合わせることで、双方向の状態同期とインタラクティブなUIを備えた高度なAIアプリを構築できます。
Mastraプロジェクトを作成する
LLM CONTEXT: This Tabs component shows commands for creating a new Mastra project using different package managers. Each tab displays the command for that specific package manager to create a Mastra project. This is the first step in setting up Mastra with CopilotKit for building AI copilot applications. All commands create the same Mastra project but use different package manager syntax. */}
npx
bash copy npx create-mastra@latest プロジェクトをスキャフォールディングする際は、agentの例を選択してください。これにより、天気エージェントが提供されます。
詳細なセットアップ手順については、インストールガイドを参照してください。
基本セットアップ
MastraとCopilotKitの統合には、主に2つのステップが含まれます：バックエンドランタイムのセットアップとフロントエンドコンポーネントの設定です。
npm
bash copy npm install @copilotkit/runtime ランタイムのセットアップ
Mastraのカスタム API ルートを活用して、MastraサーバーにCopilotKitのランタイムを追加できます。
現在のバージョンの統合では、MastraClientを活用してMastraエージェントをCopilotKitのAGUI形式にフォーマットします。
npm
bash copy npm install @mastra/agui@alpha 次に、CopilotKit用のカスタム API ルートでMastraインスタンスを更新しましょう。
import { Mastra } from "@mastra/core/mastra";
import { PinoLogger } from "@mastra/loggers";
import { LibSQLStore } from "@mastra/libsql";
import {
CopilotRuntime,
copilotRuntimeNodeHttpEndpoint,
ExperimentalEmptyAdapter,
} from "@copilotkit/runtime";
import { registerCopilotKit } from "@mastra/agui";
import { weatherAgent } from "./agents";
const serviceAdapter = new ExperimentalEmptyAdapter();
export const mastra = new Mastra({
agents: { weatherAgent },
storage: new LibSQLStore({
// stores telemetry, evals, ... into memory storage,
// if you need to persist, change to file:../mastra.db
url: ":memory:",
}),
logger: new PinoLogger({
name: "Mastra",
level: "info",
}),
server: {
// We will be calling this from a Vite App. Allow CORS
cors: {
origin: "*",
allowMethods: ["*"],
allowHeaders: ["*"],
},
apiRoutes: [
registerCopilotKit({
path: "/copilotkit",
resourceId: "weatherAgent",
setContext: (c, runtimeContext) => {
// Add whatever you need to the runtimeContext
runtimeContext.set("user-id", c.req.header("X-User-ID"));
runtimeContext.set("temperature-scale", "celsius");
}
}),
],
},
});このセットアップにより、MastraサーバーでCopilotKitが実行されるようになりました。mastra devでMastraサーバーを起動できます。
UIの設定
CopilotKitのReactコンポーネントをインストールします：
npm
bash copy npm install @copilotkit/react-core @copilotkit/react-ui
次に、CopilotKitのReactコンポーネントをフロントエンドに追加します。
import { CopilotChat } from "@copilotkit/react-ui";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";
export function CopilotKitComponent() {
return (
<CopilotKit
runtimeUrl="http://localhost:4111/copilotkit"
agent="weatherAgent"
>
<CopilotChat
labels={{
title: "Your Assistant",
initial: "Hi! 👋 How can I assist you today?",
}}
/>
</CopilotKit>
);
}コンポーネントをレンダリングして、未来の構築を始めましょう！
他のフレームワーク（NextJS）での使用
Mastra Serverを経由せずにAGUIを活用することも可能です。
// import your mastra instance from dir
import { mastra } from "../path/to/mastra";
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
export const POST = async (req: NextRequest) => {
// Clone the request before reading the body
const clonedReq = req.clone();
const body = await clonedReq.json();
const resourceId = body.resourceId || "TEST";
const mastraAgents = getAGUI({
mastra,
resourceId,
});
const runtime = new CopilotRuntime({
agents: mastraAgents,
});
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter: new ExperimentalEmptyAdapter(),
endpoint: "/api/copilotkit",
});
// Use the original request for handleRequest
return handleRequest(req);
};