Skip to main content

​
Welcome to ADK Utils Example

ADK Utils Example is a modern, high-performance chat application that demonstrates the seamless integration of Google’s Agent Development Kit (ADK) with Next.js 16, React 19, and AI SDK. This project serves as both a practical example and a testing ground for building intelligent, agentic applications.
This project includes an llms.txt file for enhanced discoverability and documentation for AI-assisted development.

​
What is ADK Utils Example?

This application showcases how to build production-ready AI chat interfaces using:
  • Google Agent Development Kit (ADK) for creating intelligent agents
  • @yagolopez/adk-utils for enhanced model support (including Ollama integration)
  • Next.js 16 with the modern App Router and React Server Components
  • AI SDK from Vercel for streamlined AI interactions

​
Key Technologies

Next.js 16

Modern React framework with App Router and React 19

Google ADK

Agent Development Kit for building intelligent agents

ADK Utils

Enhanced utilities including Ollama model support

AI SDK

Vercel’s AI SDK for streamlined integrations

​
What You’ll Build

Following this documentation, you’ll learn how to:
  • Create AI agents with custom tools and capabilities
  • Integrate both cloud-based (Gemini) and local (Ollama) AI models
  • Build responsive, streaming chat interfaces
  • Implement advanced features like Mermaid diagram generation
  • Handle rate limiting and error management
  • Test and debug AI agent interactions

​
Core Features

​
Advanced AI Agents

Built with @google/adk, the application features:
  • Custom function tools (time retrieval, diagram generation, code visualization)
  • Multi-model support (Gemini, Ollama)
  • Intelligent tool selection and execution

​
Enhanced Model Support

The @yagolopez/adk-utils package provides:
  • Seamless Ollama integration within the ADK ecosystem
  • Local LLM execution capabilities
  • Simplified model instantiation
import { LlmAgent } from "@google/adk";

export const agent = new LlmAgent({
  name: "my-agent",
  model: 'gemini-2.5-flash',
  // ... configuration
});

​
Modern Chat UI

A responsive, premium chat interface featuring:
  • Streaming responses with real-time updates
  • Markdown rendering with syntax highlighting
  • Mermaid.js diagrams for visual representations
  • Interactive suggestions and empty state
  • Auto-scroll for seamless user experience
  • Typing indicators for real-time feedback

​
Smart Components

Production-ready features:
  • Rate limiting using @tanstack/react-pacer to protect resources
  • Efficient scrolling with custom hooks
  • Error handling and graceful degradation
  • Responsive design with Tailwind CSS 4

​
Built-in Tools

The example agent comes with three function tools:
  1. get_current_time - Retrieves the current time for any city worldwide
  2. create_mermaid_diagram - Generates visual flowcharts, sequence diagrams, and more
  3. view_source_code - Displays source code examples
These tools demonstrate how to extend your agent’s capabilities with custom functions using Zod schemas for parameter validation.

​
Architecture Overview

The application follows a modern, scalable architecture:

​
Who Should Use This?

This project is perfect for:
  • Developers building AI-powered chat applications
  • Engineers exploring Google’s Agent Development Kit
  • Teams looking to integrate local AI models with Ollama
  • Students learning about modern AI application architecture
  • Researchers prototyping agentic systems

​
Why ADK Utils?

The @yagolopez/adk-utils package solves a critical challenge: seamless integration of Ollama models within the ADK ecosystem. This means you can:
  • Run AI models locally without cloud dependencies
  • Reduce latency and costs
  • Maintain privacy with on-device inference
  • Switch between cloud and local models effortlessly

​
Next Steps

Quickstart

Get up and running in under 5 minutes

Installation

Detailed setup and configuration guide

Architecture

Understand the system architecture

API Reference

Explore the API documentation

​
Tech Stack Summary

  • Next.js 16 - React framework with App Router
  • React 19 - Latest UI library
  • Tailwind CSS 4 - Utility-first styling
  • Lucide React - Icon library
  • @ai-sdk/react - React hooks for AI interactions
  • @google/adk - Agent Development Kit
  • @yagolopez/adk-utils - Enhanced ADK utilities
  • @ai-sdk/google - Google AI SDK integration
  • AI SDK - Vercel’s AI SDK
  • Zod - Schema validation for tool parameters
  • TypeScript 5 - Type safety
  • ESLint - Code quality
  • Prettier - Code formatting
  • Jest - Unit testing
  • Playwright - E2E testing
  • Radix UI - Accessible components
  • Streamdown - Markdown rendering
  • @streamdown/mermaid - Diagram support
  • TanStack Pacer - Rate limiting

​
Open Source

This project is open source and available under the MIT License. Contributions are welcome!

View on GitHub

Star the repository and contribute to the project

Build docs developers (and LLMs) love

Get started for freeTalk to us