School Tutor

A demo project showcasing how AG-UI and CopilotKit connect a React frontend to AI agents, using Google ADK as the agent framework. The result is an interactive tutoring app that generates practice problems for students — but the real focus is the integration pattern between these technologies.

Key technologies demonstrated:

• AG-UI — Agent-UI protocol bridging the frontend and backend agent communication
• CopilotKit — React components and hooks for building agent-powered UIs (sidebar chat, shared state via useCoAgent)
• Google ADK — Agent Development Kit for defining and orchestrating AI agents (powered by Gemini models)

What It Does

1. A student describes a topic they want to practice (e.g. "Geometry problems for a 9-year-old")
2. The AI tutor asks clarifying questions about level, scope, and focus areas
3. Practice problems are generated with varying difficulty — some include SVG visual hints
4. Students answer each problem interactively and get instant feedback
5. The tutor can generate additional problems or adjust difficulty based on the conversation

Architecture

The app runs two servers concurrently:

Server	Port	Description
Next.js frontend	3000	React UI with CopilotKit sidebar for chat + problem display
FastAPI agent backend	8000	Google ADK agents that handle tutoring logic and problem generation

Agents:

• TutorAgent (gemini-2.5-flash) — Main conversational agent. Gathers topic details, orchestrates problem generation, and iterates with the student.
• ProblemGeneratorAgent (gemini-3-flash-preview) — Generates structured problem collections with questions, answers, answer types, and optional SVG hints.

The frontend communicates with the backend through a /api/copilotkit proxy route. Agent state (topic statement, generated problems) is synced to the UI via CopilotKit's useCoAgent hook.

Prerequisites

• Node.js 18+
• Python 3.12+
• A Google API Key

Getting Started

1. Install dependencies:

pnpm install

This automatically runs install:agent via postinstall, which creates a Python .venv inside the agent/ directory and installs Python dependencies with uv.

2. Set your Google API key:

export GOOGLE_API_KEY="your-google-api-key-here"

3. Start the development servers:

pnpm dev

This launches both the Next.js UI and the ADK agent server concurrently.