CopilotKitをMastraと統合する
CopilotKitは、カスタマイズ可能なAIコパイロットをアプリケーションに素早く統合するためのReactコンポーネントを提供します。Mastraと組み合わせることで、双方向の状態同期とインタラクティブなUIを特徴とする洗練されたAIアプリを構築できます。
CopilotKitの概念、コンポーネント、高度な使用パターンについて詳しく学ぶには、CopilotKitドキュメント をご覧ください。
このガイドでは、2つの異なる統合アプローチを紹介します：
- 別のReactフロントエンドを持つMastraサーバーにCopilotKitを統合する
- Next.jsアプリにCopilotKitを統合する
Mastra Server
React依存関係をインストール
Reactフロントエンドで、必要なCopilotKitパッケージをインストールします：
npm
npm install @copilotkit/react-core @copilotkit/react-uiCopilotKitコンポーネントを作成
Reactフロントエンドでコンポーネントを作成します：
components/copilotkit-component.tsx
import { CopilotChat } from "@copilotkit/react-ui";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";
export function CopilotKitComponent({ runtimeUrl }: { runtimeUrl: string}) {
return (
<CopilotKit
runtimeUrl={runtimeUrl}
agent="weatherAgent"
>
<CopilotChat
labels={{
title: "Your Assistant",
initial: "Hi! 👋 How can I assist you today?",
}}
/>
</CopilotKit>
);
}依存関係をインストール
まだMastraサーバーをセットアップしていない場合は、はじめにガイドに従って新しいMastraプロジェクトをセットアップしてください。
MastraサーバーでCopilotKit統合用の追加パッケージをインストールします：
npm
npm install @copilotkit/runtime @ag-ui/mastraMastraサーバーを設定
CopilotKitのランタイムエンドポイントを含むようにMastraインスタンスを設定します：
src/mastra/index.ts
import { Mastra } from "@mastra/core/mastra";
import { registerCopilotKit } from "@ag-ui/mastra";
import { weatherAgent } from "./agents/weather-agent";
type WeatherRuntimeContext = {
"user-id": string;
"temperature-scale": "celsius" | "fahrenheit";
};
export const mastra = new Mastra({
agents: { weatherAgent },
server: {
cors: {
origin: "*",
allowMethods: ["*"],
allowHeaders: ["*"]
},
apiRoutes: [
registerCopilotKit<WeatherRuntimeContext>({
path: "/copilotkit",
resourceId: "weatherAgent",
setContext: (c, runtimeContext) => {
runtimeContext.set("user-id", c.req.header("X-User-ID") || "anonymous");
runtimeContext.set("temperature-scale", "celsius");
}
})
]
}
});ReactアプリでのUsage
MastraサーバーのURLを使用してReactアプリでコンポーネントを使用します：
App.tsx
import { CopilotKitComponent } from "./components/copilotkit-component";
function App() {
return (
<CopilotKitComponent runtimeUrl="http://localhost:4111/copilotkit" />
);
}
export default App;未来の構築を始めましょう！
次のステップ
- CopilotKit Documentation - 完全なCopilotKitリファレンス
- React Hooks with CopilotKit - 高度なReact統合パターン
- Next.js Integration with Mastra - フルスタックNext.jsセットアップガイド