AskVio

Right now AskVio (askvio.app) is an embeddable chatbot for ecommerces which only reply with text. Now it will reply with UIs.
When a visitor on a SaaS product page asks “which plan fits my team?”, AskVio won’t anymore write a paragraph, it will render a live, interactive plan-comparison card. When they ask “how much would 8,000 conversations cost?”, it will generate a pricing calculator with pre-filled sliders they can drag in real time. When they want to book a demo, it will render a booking calendar for the next five business days, lets them select a slot, and confirms on the spot. Three completely different bespoke UIs, generated on-demand from the same embedded widget: no pre-built templates, no static flows.

Why this is genuinely beyond chat

The judging criterion we kept coming back to is: “Would this have been impossible with a plain chatbot?” A standard chatbot answering “which plan?” with a bullet list creates friction: the user still has to mentally map the answer back to the pricing page and decide. AskVio collapses the answer and the decision into a single rendered interface. The widget doesn’t just inform; it closes the loop. That’s what generative UI unlocks that text cannot.

Technical execution

The stack is fully wired end-to-end:

CopilotKit v2 powers the chat runtime, durable thread persistence (via CopilotKit Intelligence on Postgres + Redis), and the useFrontendTool({ render }) API that makes agent-to-UI binding declarative. Each of the three generative components (PlanPicker, PricingCalculator, BookingSlots) is registered as a frontend tool with a Zod schema and a React render function — the agent calls the tool with structured args, and CopilotKit streams the component into the chat bubble in real time.
AG-UI is the protocol connecting the Python agent to the React frontend through the Hono BFF. Every agent turn emits typed AG-UI events (ToolCallStart, ToolCallArgs, ToolCallEnd) that CopilotKit deserializes and routes to the matching render function. This is what makes the UI streaming feel instantaneous — the component can begin rendering before the agent has finished emitting its full tool call.
LangGraph (via the gemini-flash-react runtime) is the agent execution layer. The agent receives the visitor’s message, the system prompt identifies which of the three tools to call and how to populate its props (e.g. pre-fill the conversations slider with a number the visitor mentioned), and LangGraph orchestrates the tool-call loop back through CopilotKit Middleware.
Gemini Flash-Lite is the underlying model — fast, cost-efficient, and capable enough to reliably route questions to the right component and extract structured props from natural language.
Originality

The framing is what makes this distinct from generic “chat with data” submissions. AskVio demonstrates a concrete, commercially viable pattern: the embeddable widget as a generative UI surface. Every SaaS website has a chat widget. None of them generate purpose-built decision tools on the fly. The demo proves the pattern across three archetypes — comparison (PlanPicker), computation (PricingCalculator), and scheduling (BookingSlots) — each a fundamentally different UI shape produced from the same widget entry point. You install AskVio once and your visitors get an infinite set of specialized interfaces, each built for their exact question.

Agent-to-UI responsiveness

The agent’s system prompt explicitly forbids text answers for the three supported question types: “NEVER answer plan questions in text — always call this tool.” This is a deliberate design constraint that forces the generative UI to do the work text can’t. The agent also pre-populates tool props intelligently — if a visitor mentions “15 people”, the PlanPicker renders with teamSize=15 and the Growth plan highlighted. If they say “annual pricing”, the PricingCalculator opens with the annual toggle pre-set. The interface is not just generated; it’s pre-filled with the visitor’s context, making it immediately actionable rather than requiring a second round of input.

This project is built on top of the official CopilotKit Generative UI Hackathon Starter Kit (the public template provided to all participants), which supplied the infrastructure scaffolding: Next.js frontend, Hono BFF, CopilotKit Intelligence Docker stack, and LangGraph agent boilerplate wired with Gemini and AG-UI.

Everything built on top of that scaffold was created during the hackathon: the three generative UI components (PlanPicker, PricingCalculator, BookingSlots), the AskVio product demo page, the frontend tool registrations via useFrontendTool, the AskVio-specific system prompt, and the synthetic plan/pricing/availability data layer.

AskVio (askvio.app) is our existing production product - an embeddable AI assistant widget - developed independently over the past four months. No code from the AskVio production codebase was used here. This repo is a from-scratch prototype, built in a new public repository, demonstrating a new capability (generative UI) that AskVio does not currently have in production. The connection to AskVio is conceptual: the demo shows what AskVio could look like if its widget rendered interactive UI instead of text answers. We were transparent about this framing throughout the build.