Cedar-OS を Mastra と統合する

Cedar-OS は、最先端の AI ネイティブアプリケーションを構築するために特化して設計された、オープンソースのエージェント型 UI フレームワークです。Cedar は Mastra を念頭に置いて設計しました。

Cedar を使うべき？

私たちが特に重視している柱となる考え方がいくつかあり、詳しくはこちらをご覧ください。

1. 開発者エクスペリエンス

すべてのコンポーネントを shadcn 方式で個別取得 — コードはすべてあなたのもの。自由にスタイルできます
導入してすぐ動作 — チャットコンポーネントを配置するだけで動きます
完全に拡張可能 — 完全にカスタマイズ可能な Zustand ストアアーキテクチャ上に構築。あらゆる内部関数を1行で上書きできます。

2. 真にAIネイティブなアプリケーションの実現

歴史上初めて、プロダクトが命を帯びる時代になりました。私たちは、そんな「生きた」ものづくりをあなたが実現するお手伝いをしたいと考えています。

Spells - ユーザーはキーボードショートカット、マウスイベント、テキスト選択などからAIを起動できます
State Diff Management - エージェントの出力を受け入れる／却下する権限をユーザーに委ねます
Voice Integration - ユーザーが音声であなたのアプリを操作できるようにします

クイックスタート

プロジェクトをセットアップする

Cedar の CLI コマンドを実行します：


npx cedar-os-cli plant-seed

ゼロから始める場合は、モノレポでフロントエンドとバックエンドの両方を含む完全なセットアップが行える Mastra starter テンプレートを選択してください。

すでに Mastra のバックエンドがある場合は、代わりに blank frontend cedar repo オプションを使用してください。

これにより、Cedar のコンポーネントと依存関係一式をダウンロードするオプションが選べます。まずはチャットコンポーネントのいずれかを少なくともダウンロードすることをおすすめします。

アプリを CedarCopilot でラップする

アプリケーションを CedarCopilot のプロバイダーでラップして、Mastra バックエンドに接続します：


import { CedarCopilot } from 'cedar-os';
 
function App() {
	return (
		<CedarCopilot
			llmProvider={{
				provider: 'mastra',
				baseURL: 'http://localhost:4111', // Mastra のデフォルト開発ポート
				apiKey: process.env.NEXT_PUBLIC_MASTRA_API_KEY, // 任意 — バックエンド認証用
			}}>
			<YourApp />
		</CedarCopilot>
	);
}

Mastra のエンドポイントを設定する

Mastra Configuration Options に従って、Cedar と連携するように Mastra バックエンドを設定します。

Mastra サーバー（モノレポの場合は Next.js のサーバーレスルート）でAPI ルートを登録します：


import { registerApiRoute } from '@mastra/core/server';
 
// POST /chat
// チャットの非ストリーミング用デフォルトエンドポイント
registerApiRoute('/chat', {
	method: 'POST',
	// …zod で入力を検証
	handler: async (c) => {
		/* your agent.generate() logic */
	},
});
 
// POST /chat/stream (SSE)
// チャットのストリーミング用デフォルトエンドポイント
registerApiRoute('/chat/stream', {
	method: 'POST',
	handler: async (c) => {
		/* SSE 形式でエージェント出力をストリーミング */
	},
});

Cedar コンポーネントを追加する

Cedar コンポーネントをフロントエンドに組み込みます。詳細は Chat Overview を参照してください。

これでバックエンドとフロントエンドの連携は完了です！Mastra エージェントで AI ネイティブな体験の構築を始めましょう。

さらに詳しく

追加の設定オプションについてはMastra の詳細な統合ガイドをご覧ください（問題が発生した場合の手動インストール手順もこちら）
当社が実装した Mastra 固有の最適化と機能をチェック
- シームレスなイベントストリーミング - Mastra のストリーミングイベントを自動レンダリング
- 音声エンドポイント対応 - 組み込みの音声バックエンド連携
- エンドツーエンドの型安全性 - アプリと Mastra バックエンド間の通信のための型定義
Discord に参加しよう！皆さんの参加をお待ちしています :)