CopilotKit (Next.js) と ADK のセットアップ
$ pnpm dlx copilotkit@latest create -f adk
code:sh
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠙⣿⡛⠻⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠋⠀⠀⠈⢿⡄⠀⠀⠀⠈⠉⠙⣻⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠁⠀⠀⠀⠀⠈⢿⡄⠀⢀⣠⣴⠾⠋⢸⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠁⢀⣀⣀⣀⣀⣤⣤⡾⢿⡟⠛⠉⠀⠀⠀⠀⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡛⠛⠛⠛⠉⠉⠉⠁⠀⢠⡿⣿⡀⠀⠀⠀⠀⠀⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⣰⡟⠀⠸⣧⠀⠀⠀⠀⢠⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄⠀⠀⢀⣼⠏⠀⠀⠀⣿⡀⠀⠀⠀⢸⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠂⣠⡿⠁⠀⠀⠀⠀⢸⡇⠀⠀⠀⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⣡⣾⣿⣄⠀⠀⠀⠀⠀⢸⡇⠀⠀⢰⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⡟⠛⡿⠋⣡⣾⣿⣿⣿⣿⣦⡀⠀⠀⠀⢸⡇⠀⠀⣿⣿⣿⣿
⣿⣿⣿⣿⡿⠿⣿⠷⠂⡀⠘⣿⣿⣿⣿⣿⣿⣿⣷⡀⠀⠀⢸⡇⠀⣼⣿⣿⣿⣿
⣿⣿⠻⢿⡷⠀⠁⠴⣿⣷⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⡄⠀⣾⠇⣴⣿⣿⣿⣿⣿
⡿⠛⠀⠀⢴⣾⣷⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣤⣿⣾⣿⣿⣿⣿⣿⣿
⣷⣾⣿⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
~ Welcome to CopilotKit! ~
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✔ What is your project named? sandbox-adk-state-copilot
✔ Project "sandbox-adk-state-copilot" created successfully!
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🪁🤝🤖 All set!
Your project is ready to explore CopilotKit locally.
Next steps:
• cd sandbox-adk-state-copilot
• Follow the setup instructions in the README.md
Documentation:
プロジェクト名を入力する
? What is your project named?
sandbox-adk-state-copilot とした
$ cd sandbox-adk-state-copilot
$ code .
セットアップ
README.md を見て、セットアップする
フロントエンドの依存関係のインストール
$ pnpm install
バックエンドの依存関係のインストール
$ pnpm install:agent
APIキーの設定
agent/.env に API キーを設定する
code:agent/.env
GOOGLE_API_KEY=your_google_api_key
起動
$ pnpm dev
localhost:3000 にアクセスすればチャットができる!
https://gyazo.com/93bf1e49b870261f542114a0299645e2
よくあるエラー (?)
ポートの競合
もし、8000のポートが競合しているというエラーが出てしまったら、
.env に PORT=8001 のような感じでポートの指定をすることで ADK が 8001 ポートを受け付けるようになる。
CopilotKit のアップデート通知
以下のような表示がされたら、CopilotKit のバージョンが古いよってことだから、アップデートする
npm install @copilotkit/react-core... のところをクリックするとコマンドをコピーできるから、コピーして、pnpm に置き換えて実行する
$ pnpm install @copilotkit/react-core@1.52.1 @copilotkit/react-ui@1.52.1 @copilotkit/react-textarea@1.52.1 && pnpm install @copilotkit/runtime@1.52.1
https://gyazo.com/7e350cc19f5e48a3be6d4b21792244ae