Quickstart

TailoredContent, TailoredContentOption, } from "@/components/react/tailored-content.tsx"; UserIcon, PaintbrushIcon, WrenchIcon, RepeatIcon, } from "lucide-react";

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

Clone the A2A starter template

git clone https://github.com/copilotkit/with-a2a-a2ui.git

Install dependencies

pnpm install

Configure your environment

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

GEMINI_API_KEY=your_gemini_api_key
Info

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

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.
2087950ee