Kite
Mar 2026 → Mar 2026
A reference implementation of the AG-UI protocol a chat interface whose purpose is not merely to respond, but to make the ordinarily invisible machinery of agent communication legible.
Kite is an AI-powered data exploration assistant that helps you discover and visualize information about any topic. Ask questions about weather, crypto prices, GitHub repositories, or news, and Kite fetches real-time data and builds interactive dashboards.
Architecture
- Client: React 19 UI with streaming chat. Renders AI responses as JSON-defined UI components.
- Server: TanStack Start server functions handle requests, rate limiting, and proxy to the AI.
- AI: ToolLoopAgent orchestrates tool calls, formats responses as JSON UI specs.
- Tools: Server-side functions fetch real data (weather APIs, 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
Available Tools
| Tool | Data Source | Dashboard Components |
|---|---|---|
getWeather |
WeatherAPI | Metric, Table |
getGitHubRepo |
GitHub API | Card, Metric, Table |
getGitHubPullRequests |
GitHub API | Table, Badge |
getCryptoPrice |
CoinGecko | Metric, Table |
getCryptoPriceHistory |
CoinGecko | LineChart, AreaChart |
getHackerNewsTop |
Hacker News API | Table, Badge, Link |
webSearch |
Exa search | Stack, Accordion, Tabs |
Component Library
The AI can generate these components via JSON specs:
Layout: Stack, Grid, Card, Tabs, Accordion Content: Heading, Text, Badge, Separator, Callout, Link Data: Metric, Table, BarChart, LineChart, PieChart Input: Button, RadioGroup, SelectInput, TextInput 3D: Scene3D, Sphere, Box, Cone, Torus, Light, Stars, Label3D
Components support data binding via { "$state": "/path" } syntax. The AI stores fetched data in state, then binds components to it.
Website Source Code