Concepts Components Blog Roadmap
Get Started
On this page

The Ultimate Stack: Integrating A2UI with CopilotKit

Build a full-stack AI Agent with React, CopilotKit, and A2UI. The production-ready way to ship Generative UI.

The Power Couple: If A2UI is the HTML (the protocol), then CopilotKit is the Browser (the runtime). Together, they are the fastest way to build production-grade AI assistants.

This guide demonstrates how to build a full-stack Restaurant Booking Agent.

  • Backend: Python Agent (using Google Gen AI SDK).
  • Frontend: React + CopilotKit.
  • Protocol: A2UI streaming over standard HTTP.

Architecture: The “Sandwich”

  1. Top Bun (UI): CopilotKit handles the chat window, state management, and message history.
  2. Meat (Protocol): A2UI defines the JSON components (<RestaurantCard />).
  3. Bottom Bun (Brain): Python Agent decides when to show the card.

A2UI + CopilotKit Architecture

Step 1: Define Your “UI Vocabulary”

First, tell the system what UI components exist. In your Python backend, define the schema. This teaches the LLM that it can “speak” in restaurant-card objects.

# agent/restaurant_finder/prompt_builder.py

A2UI_SCHEMA = r'''
{
  "title": "A2UI Message Schema",
  "properties": {
    "surfaceUpdate": { 
      "description": "Show a component (e.g., card, chart)", 
      ... 
    }
  }
}
'''

Step 2: Configure the Agent

Bind the schema to your Agent’s system instruction.

# agent/restaurant_finder/agent.py

class RestaurantAgent:
    def __init__(self, base_url: str):
        # 1. Load the base instructions ("You are a helpful assistant")
        self.instruction = BASE_INSTRUCTION
        # 2. Append the A2UI grammar ("Here is how you draw a card")
        self.instruction += get_ui_prompt(base_url, A2UI_SCHEMA)

Step 3: Frontend Rendering

On the React side, you don’t need to parse streams manually. CopilotKit does it for you.

// page.tsx (Next.js)
import { CopilotKit } from "@copilotkit/react-core"; 
import { CopilotSidebar } from "@copilotkit/react-ui";
import { RestaurantCard } from "./components/RestaurantCard";

export default function BookingPage() {
  return (
    <CopilotKit url="/api/copilotkit">
      <CopilotSidebar 
        defaultOpen={true}
        labels={{ title: "Restaurant Agent" }}
      >
        {/* Your Main App Content */}
        <div className="p-10">
           <h1>Welcome to FoodFinder</h1>
        </div>
      </CopilotSidebar>
    </CopilotKit>
  );
}

Note: You’ll need to register RestaurantCard in your CopilotKit configuration.

See it in Action

Next Steps