The Anatomy
How she's built — the organs beneath the skin
Beneath Chloe's animated exterior is a carefully designed system. Here's how all the pieces connect — from the Live2D renderer in your browser to the Solana blockchain millions of miles away.
†System Overview
Hover over each node to see what it does. The connections show how data flows through the system.
†The Layers
CHLOE operates in three distinct layers:
Everything in your browser — Live2D rendering, chat UI, code editor, wallet connection. This is what you see and touch.
Next.js API routes running on the backend. They proxy requests to external services so your API keys stay safe and CORS doesn't block you.
The outside world — Solana blockchain for transactions, Jupiter for swap routing, AI models for conversation intelligence.
†How Data Flows
All data moves in one direction. Here's what happens when you do something:
You Act
Type a message, click swap, move your mouse — any interaction starts here.
Client Processes
Your browser handles immediate reactions (Live2D eye tracking, editor rendering) and sends requests to the API when external data is needed.
Server Proxies
The API server forwards your request to the right external service — Jupiter for swaps, AI for chat, Solana RPC for balances.
Response Returns
Data flows back the same way: external service → server → client → you see the result.
†Space Architecture
Each page in CHLOE is independently structured but shares common infrastructure:
| Space | Client Components | API Dependencies |
|---|---|---|
| Agent | Live2D, Chat, Terminal, AMM Simulator | Chat API, Price API |
| DEX | Swap Form, Portfolio, Price Ticker, Wallet Assistant | Jupiter API, Solana RPC, Price API |
| Coder | Monaco Editor, Live Preview, File Tree, Chat | Code Generation API |
| Docs | Interactive renderer, TOC, Search | None (all static) |
| Labs | Experiment cards, Expression tester | None |