Paper-to-Playground

Paper-to-Playground is a generative UI agent that turns any arXiv paper into an interactive playground. The user pastes a paper URL, and the agent reads the paper, identifies the core contribution, and generates a paper-specific interactive interface live — different paper, different rendered UI.

Instead of returning text or a chatbot response, the agent emits a structured UISpec JSON describing which interactive components a reader needs to understand that specific paper. The frontend renders that spec dynamically using a library of 12 primitive components (heatmap, slider, chart, dropdown, text_input, image_display, comparison_pair, code_block, graph_viz, button, text_block, annotation).

For example: an attention paper generates a sentence input + multi-head dropdown + live attention heatmap. A LoRA paper generates a rank slider + performance chart + parameter comparison cards. A diffusion paper generates a noise-step slider + image scrubber. The UI is composed by the agent per paper — no hardcoded templates, no per-paper code branches.

This directly addresses the hackathon’s core thesis: agents that don’t just return text but render complete, interactive interfaces natively from agent output. Built solo in 6 hours.

Stack: Next.js 14, TypeScript, CopilotKit, AG-UI, LangGraph TS, Tailwind + shadcn/ui, Recharts, Gemini 2.5 Flash, deployed on Vercel. CopilotKit + AG-UI provide the agent-to-frontend transport so the agent’s structured UI spec streams directly to React components without intermediate prompt parsing.