Pair PM - Generative UI Global Hackathon: Agentic Interfaces
AI Tinkerers - Seattle
Hackathon Showcase

Pair PM

Team consisting of an Intellect Design Arena AI engineer, a Michigan Tech biomedical ML researcher, and a T-Mobile Agentic AI PM skilled in PyTorch, RAG, and computer vision.

3 members Watch Demo

Most AI tools make you chat with them. Pair-PM flips that entirely: it watches you write a product spec and silently builds the diagram, asks the hard questions, and drafts the engineering handoff — without you ever opening a chat window.
What It Does
You open a document and start typing a PRD. As you write, an agent reads your prose in real time and does three things simultaneously:

Draws the user flow — Every time you describe a user action (“they open the filter,” “they pick a date range”), the agent adds a node to a live flow diagram beside your text. Existing nodes stay put; new ones animate in with a green flash. The diagram grows additively as your story grows.
Posts reviewer comments — When the agent spots an ambiguity, it drops a comment card tied to the exact sentence it questions. Hover the card and the relevant diagram node pulses yellow, showing you precisely which part of the flow is under review.
Generates an engineering handoff — Click one button and the diagram swaps for a Spec Card containing a cleaned-up PRD, acceptance criteria in Given/When/Then format, and a resolved Q&A log. Copy it as a Linear ticket in one click.

Why It’s Different: Generative UI, Not Generative Chat
Pair-PM is not a chatbot, and that distinction is the entire point. There is no “ask the AI” step, no prompt box, no turn-taking. Instead, the interface is the collaboration: the document, the diagram, and the review cards form one live, reactive surface. The agent doesn’t answer prompts — it reacts to your writing.
This is what genuine generative UI looks like in practice. Every keystroke you make is an implicit instruction. The agent continuously interprets your prose and pushes structured output — nodes, edges, comment cards — directly into the UI as first-class interactive components. A ReactFlow canvas renders a live flowchart that no user ever manually drew. Framer Motion animates each new node into existence so you can see exactly what the agent just understood. The UI isn’t displaying the agent’s response; it is the agent’s response.
Technical Execution
The frontend is a Next.js app combining three rendering layers: a TipTap rich-text editor for prose authoring, a ReactFlow canvas for the live diagram, and Framer Motion for state-change animations. These layers are kept in sync through CopilotKit v2’s AG-UI runtime — not via chat messages, but via a shared JSON state object that both the agent and the frontend read and write to simultaneously.
The agent is built on LangGraph and powered by the OpenAI API. As document text streams in, the LangGraph agent parses intent, extracts user-flow steps, identifies ambiguities, and emits structured updates back through CopilotKit’s streaming connection. A custom validation middleware sits between the agent and the UI: if the agent ever emits malformed JSON mid-stream, the middleware silently holds the last valid canvas state rather than crashing the diagram — keeping the experience seamless even during edge-case agent behavior.
The engineering handoff is generated on demand: a single button triggers a final agent pass that consolidates the diagram state, resolved comments, and document text into a structured Spec Card with BDD-formatted acceptance criteria and a clean Q&A log, ready to paste into Linear.
The Stack
Frontend framework: Next.js
Rich-text editor: TipTap
Live diagram canvas: ReactFlow
Animations: Framer Motion
Agent framework: LangGraph
LLM: OpenAI API
Generative UI protocol: CopilotKit v2 + AG-UI shared state
Reliability: Custom middleware + JSON validation layer
The Core Innovation
The AG-UI protocol is what makes the generative UI paradigm possible here. Rather than serializing agent output as chat text that the frontend then tries to parse and render, AG-UI treats the diagram state, comment cards, and spec output as live shared state that the agent writes to and the UI subscribes to. The result is a product management tool where the AI’s understanding of your document is always visible, always spatially linked to your text, and always one step ahead of you — not because it answered a question, but because it never stopped reading.

AI Tinkerers CopilotKit Google DeepMind LangChain OpenAI