Socrates

Socrates is a generative UI agent that kills the static dashboard. Describe any research or comparison question in natural language — for example, “Compare Tesla and Ford Q4 revenue, margins, and delivery numbers” — and Socrates does not reply with text. Instead, it generates an entire interactive dashboard at runtime: live charts, sortable data tables, metric cards, and layout, all decided and rendered by the AI. There are zero pre-built pages. The agent chooses which visualizations best answer the user’s query, injects live data, and presents a fully functional interface that the user can immediately explore, filter, and interact with. This would be impossible in a chat interface because dashboards are spatial, multi-component, and interactive by nature — all properties that chatbots cannot fulfill.

Technical implementation: We used CopilotKit as our core generative UI framework to stream agent-in-the-loop UI components directly into a Next.js frontend. The agent is powered by OpenAI (GPT-4o) with function calling to decide the dashboard schema — which charts (bar, line, pie), which metrics, and what layout grid. We integrated Recharts to render dynamic charts and shadcn/ui for interactive cards and tables. A lightweight backend fetches structured financial data (simulated via JSON server) based on the agent’s output. The key innovation: the entire UI tree — from component types to data bindings — is generated at runtime by the agent, not pre‑configured. The user gets a tailored analytical interface in seconds, not a chatbot monologue.

Our project was built entirely during the hackathon. We used CopilotKit’s official starter template (copilotkit-nextjs-starter) as a boilerplate for the agent-runtime integration, which is permitted and encouraged by the event guidelines. The dashboard generation logic, data fetching layer, component mapping, and interactive features were all created from scratch within the six-hour build window. No prior custom code was reused.