Kite
Mar 2026 → Mar 2026
A reference implementation of the AG-UI protocol: an AI-powered data exploration assistant that fetches real-time data and renders interactive dashboards from JSON-spec UI definitions.
Overview
Kite is an AI-powered data exploration assistant. Ask questions about weather, crypto prices, GitHub repositories, or news, and Kite fetches real-time data and builds interactive dashboards rendered entirely from JSON UI specifications. It serves as a reference implementation of the AG-UI protocol.
Approach
Kite separates concerns across four layers:
- Client: React 19 UI with streaming chat. Renders AI responses as JSON-defined UI components using
@json-render/react. - Server: TanStack Start server functions handle requests, rate limiting, and proxy to the AI layer.
- AI: ToolLoopAgent orchestrates tool calls, formats responses as both text and JSON UI specs.
- Tools: Server-side functions fetch real data from external APIs (weather, GitHub, crypto, web search).
How It Works
- You send a message asking about any topic (weather, crypto, GitHub, etc.)
- The agent calls tools to fetch real, up-to-date data from external APIs
- The agent responds with a conversational summary + a JSON UI specification
- The UI renderer transforms the JSON spec into interactive React components
- You see a dashboard with charts, tables, metrics, and rich content
The UI is defined entirely in JSON. The AI outputs both text and a component tree, which gets rendered by @json-render/react.
Tech Stack
- Framework: TanStack Start (file-based routing, server functions)
- UI: React 19 + shadcn/ui + TailwindCSS 4
- AI: AI SDK with ToolLoopAgent + @ai-sdk/gateway
- Rendering: json-render
- Charts: Recharts + React Three Fiber (3D)
- Rate Limiting: @upstash/redis
- Deployment: Netlify