You already know ChatGPT’s style, but it moved away from the old chat interface some time ago. A chat interface works like ping-pong: one message bubble, then another. Agentic UI does not work that way, because it often runs a long process behind the scenes. Between your prompt and the agent’s reply, many details happen. The interface must show you these details.
Here is what I believe agentic UI must give you:
Progress. Show you where the agent stands in the task, not just that it is working.Tool use. Show you which tools ran and what input each one used.Direction. Show you if the reasoning is still on track.Control. If it is not on track, let you stop, redirect, or undo the action.
UI styles #
Here lists a few agentic UI styles.
Chat interface. Chat bubbles, streaming responses, expandable tool-call sections, and “thinking” indicators. Example:ChatGPT.Copilot interface. A sidebar you can show or hide, instead of a full conversational app — a good fit as you evolve an app from non-agentic to agentic. Example:VS CodeCopilot.Canvas interface. Chat on one side, a canvas or file explorer on the other. Must persist artifacts, support versioning, and let you edit them. Examples:ChatGPT Canvas,Claude Artifacts.Dashboard interface. Built for observability — real-time status, resource usage, queue status, warnings — so you can monitor and steer long-running agents. You can start by building aGrafanadashboard.Collaborative interface. A chat variant that treats humans and agents as peers, with collaborator badges and multiple roles in one thread. Example:Cumora.Workflow interface. Node-based graphs, common in creative tools. Example:ComfyUI.Terminal interface (TUI). Runs fully in the terminal, common for coding agents. Examples:Claude Code,Cursor,Codex,Aider.
UI components #
Regardless of style, most agentic UIs draw from the same set of primitive components:
Agent status indicator. Shows the agent’s current state, such as Thinking, Searching, Coding, or Waiting.Streaming response. Exposes output incrementally as it’s generated.Reasoning display. A dedicated area for the model’s reasoning, like<think>...</think>
output.Tool use visualization. Shows which tool ran and what input it used.Approval gate. s for human approval before a risky action runs — human-in-the-loop control.Scheduled-task card. Asks whether to create a background task that tracks an event.Compaction. Shown when the conversation nears the context window’s limit.Completion. Reports what got done, such as “Done: 13 sites checked, 4 options found.”Error. Handles failures gracefully: tool errors, hallucinations, an aborted plan, or a max-turn limit reached.Questionnaire. Pops up a short question list when the agent is uncertain, so you can fill in the gaps.Generative UI. The agent picks a native component, such as a stock quote, weather card, or data chart.Input. More than a textarea: file select, thinking-level control, model switch, dictation, and send/steer/ buttons.Sources drawer. Collects the evidence the agent consulted.MCP/tool list. Lists the tools and MCP servers available to the agent.
This list will keep growing as people discover fun, engaging agentic UX. I’ll update it every now and then. :P
UI frameworks #
A few frameworks stand out for building agentic UI today:
The most widely used framework for production web-based agent UIs. It gives you good low-level control, and I use it in my own work. Its generative UI feature is neat.Vercel ai-sdk.Getting popular too. It is built around a protocol calledCopilotKit.ag-ui.It supports multiple backends, such as ai-sdk, ag-ui, and LangChain.assistant-ui.Popular for building AI and ML prototypes quickly. You will see lots of Gradio apps on Hugging Face Spaces.Gradio.Popular for building data dashboards. It has a simple mental model, but it is hard to extend and cannot expose an API.Streamlit.It has native LangChain support, an out-of-the-box experience, and little boilerplate.Chainlit.