Token Flow Studio

Inspiration

What it does

How I built it

Challenges I ran into

Accomplishments that I'm proud of

What I learned

What's next for Token Flow Studio

Inspiration

Hackathon builders juggle many small tools; we wanted a single-page composable workspace that shows how tokens flow through an LLM agent pipeline.

What it does

Token Flow Studio ingests prompt/response traces, visualizes per-stage token usage, and exposes a shareable demo link so teammates can replay the same flow.

How I built it

Vanilla JS front end with a local trace parser, deployed as a static bundle; the public demo bundle is linked below and the build pipeline runs fully offline.

Challenges I ran into

Keeping the trace parser dependency-free while supporting streaming responses.

Accomplishments that I'm proud of

Sub-second rendering of 100k-token traces in the browser with zero backend cost.

What I learned

Client-side token accounting is accurate enough to catch real prompt-bloat issues before they hit the bill.

What's next for Token Flow Studio

Stage-level cost forecasting and a plugin API.

Built With

• agents
• ai
• llm