Sparky

Overview

Sparky is a conversational interface I built for exploring the Spark blockchain. Instead of navigating pages and filters, users ask questions in natural language and get back live data rendered as interactive UI components directly in the chat.

It’s built on the Vercel AI SDK and talks to the same Sparkscan APIs that power the main block explorer.

How it works

Chat + structured output

The AI model receives a system prompt with a component catalog, network context, and the user’s current viewport state. When a user asks something like “show me the top tokens” or “what does this address hold?”, the model decides whether to:

1. Render a UI component - most display requests map to a self-fetching component (tables, charts, cards). The model outputs a JSON spec; the client renders it.
2. Call a tool - for analytical questions that need raw data, the model calls Sparkscan or Flashnet API tools, then writes a text summary.
3. Delegate to a subagent - complex queries requiring 3+ tool calls get handed off to a deep analysis subagent that runs autonomously and returns structured findings.

Component system

Components are defined in a catalog using @json-render - a schema-driven system where the LLM outputs typed JSON specs and the client renders them as React components. The catalog includes:

• Explorer components: network stats, address summaries, token detail cards, transaction flows (via React Flow)
• Tables: latest transactions, token holders, wallet leaderboards, with sorting/filtering/pagination
• Charts: balance history, volume trends, token distribution (via Recharts)
• Layout primitives: grids with column spans, inline vs. panel placement

Each component self-fetches its data from the Sparkscan API, so the model never needs to fetch data just to display it.

Context awareness

Every user message includes metadata about what’s currently on screen, the viewport size, and the user’s timezone. The model uses this to avoid redundant data fetches and to reference visible data directly - if a user says “that first token”, it knows what they’re looking at.

Tech stack