CopilotKit

Quickstart

Turn your A2A Agents into an agent-native application in 10 minutes.

Start with your coding agent#

Use this prompt to connect your A2A agent to CopilotKit and verify a working conversation. Your coding agent will follow this guide in your project, or you can work through the manual steps below.

Prerequisites#

Before you begin, you'll need the following:

  • A Google Gemini API key
  • Node.js 20+
  • Python 3.9+
  • Your favorite package manager

Getting started#

Set up CopilotKit Intelligence#

Sign in to managed Intelligence. Managed setup uses a server-side project API key and does not issue COPILOTKIT_LICENSE_TOKEN. You will connect the app after you clone it below.

Clone the A2A starter template#

git clone https://github.com/copilotkit/with-a2a-a2ui.git
cd with-a2a-a2ui
npx copilotkit@latest project select

project select creates or selects an Intelligence project and writes its server-side API key to .env as CPK_INTELLIGENCE_API_KEY.

Install dependencies#

pnpm install

Configure your environment#

Create a .env file in your agent directory and add your Google API key:

agent/.env
GEMINI_API_KEY=your_gemini_api_key

What about other models?

The starter template is configured to use Google's Gemini by default, but you can modify it to use any language model supported by ADK.

Start the development server#

npm run dev
pnpm dev
yarn dev
bun dev

This will start both the UI and agent servers concurrently.

🎉 Start chatting!#

Your AI agent is now ready to use! Navigate to localhost:3000 and start prompting it:

Show me chinese restaurants in NYC
Troubleshooting
  • If you're having connection issues, try using 0.0.0.0 or 127.0.0.1 instead of localhost
  • Make sure your agent is running on port 10002
  • Check that your Google API key is correctly set

Open Inspector and confirm setup#

On localhost, click the Inspector button in the corner of the app.

  1. Open Agents, then Agent. Your agent is listed.
  2. Send a chat message. Open Agents, then AG-UI Events. Events are moving.
  3. Open Threads. The list is unlocked (Intelligence is on), or locked with Enable Intelligence (Intelligence is off).

More detail: Inspector.

What's next?#

Now that you have your basic agent setup, explore these advanced features:

🎨

Add some generative UI

Render declarative UI components with A2UI.