- Backend: A FastAPI server with Google ADK’s LlmAgent framework and Thesys C1 models
- Frontend: A React interface with C1Chat for rich conversational UI
This guide assumes you have basic knowledge of Python, FastAPI, and React. You’ll also need a Thesys API key from the C1 Console.
Part 1: Backend Implementation
The backend uses Google ADK’s agent framework with LiteLLM to create an intelligent assistant that processes messages and streams responses via Thesys C1.Set up the project structure
We’ll create separate directories for backend and frontend to keep concerns separated. Create a new directory for your Google ADK project:Install Python dependencies
We need FastAPI for the web server, Google ADK for the agent framework, LiteLLM for model integration, and uvicorn for serving the application. Create arequirements.txt file in the backend directory:
backend/requirements.txt
Create configuration
Centralize all configuration in one file to make it easy to manage API keys, models, and settings. ADK uses LiteLLM which expects OpenAI-compatible environment variables. Create aconfig.py file for environment configuration:
backend/config.py
Create the ADK agent
The agent uses Google ADK’s LlmAgent framework with LiteLLM to integrate with OpenAI-compatible APIs (like Thesys). ADK handles session management, streaming, and conversation orchestration. Create the Google ADK assistant agent:backend/agents/assistant.py
__init__.py file:
backend/agents/__init__.py
Create the FastAPI server
The server exposes the/api/chat endpoint that C1Chat will connect to, handling CORS and streaming responses. ADK’s runner handles the heavy lifting of agent execution.
Create the main FastAPI server with streaming support:
backend/main.py
Set up environment variables
Store your Thesys API key securely in environment variables instead of hardcoding it. Create a.env file in the backend directory:
backend/.env
Test the backend
Verify the server starts correctly and the health endpoint responds before building the frontend. Run the backend server:http://localhost:8000. You can test the health endpoint:
Part 2: Frontend Implementation
Now let’s create a React frontend that integrates with our Google ADK backend using C1Chat.Set up the frontend project
We’ll use Vite with React and TypeScript for fast development and type safety. Create a new React project with Vite:Install dependencies
The Thesys GenUI SDK provides the C1Chat component that connects to our backend. Install the necessary packages for C1Chat integration:Create the main App component
C1Chat handles all the UI complexity - just point it to your backend API endpoint. Create the main App component with C1Chat:src/App.tsx
Update the main entry point
Import C1 styles globally to ensure the chat interface renders correctly. Update the main.tsx file to import C1 styles:src/main.tsx
Set up environment variables (optional)
Override the default API URL if your backend runs on a different port or domain. Create a.env file in the frontend directory:
frontend/.env
Run the frontend
Start the development server with hot reload for instant updates during development. With your backend server already running, start the frontend:http://localhost:5173 to interact with your Google ADK + C1Chat application!
Running Both Servers
You’ll need two terminal windows: Terminal 1 - Backend:http://localhost:5173 in your browser.
Understanding Google ADK Integration
This implementation leverages several key components of Google ADK:ADK Components Used
- LlmAgent: The core agent class that orchestrates conversations with instructions and optional tools
- LiteLlm: ADK’s model adapter that supports OpenAI-compatible APIs through LiteLLM
- InMemorySessionService: Manages conversation sessions and history across multiple threads
- Runner: Executes agent operations with streaming support and session management
- StreamingMode.SSE: Server-Sent Events streaming for real-time responses
Why Use Google ADK?
- Model Agnostic: Switch between different LLM providers without changing agent code
- Session Management: Built-in conversation history and state management
- Tool Integration: Easy addition of function calling and external tools
- Production Ready: Includes proper session handling, error management, and streaming
- Framework Features: Leverage ADK’s orchestration, multi-agent support, and extensibility
Adding Tools to Your Agent
You can extend the agent with tools (function calling) by adding them to theLlmAgent:
Example Queries
Try these example queries to test your application:- “Create a task list for planning a vacation”
- “Show me a comparison table of programming languages”
- “Generate a chart showing my weekly expenses”
- “Create a form to collect user feedback”
- “Help me organize my study schedule”
View the code
Find the complete code and more examples on our GitHub repository.