<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"><title>Ju Lin's AI Weblog: Ux</title><subtitle>An independent research notebook on AI engineering, agents, models and the systems around them.</subtitle><id>https://julin.ai/atom/tags/ux/index.xml</id><link rel="self" type="application/atom+xml" href="https://julin.ai/atom/tags/ux/index.xml"/><link rel="alternate" type="text/html" href="https://julin.ai/tags/ux/"/><author><name>Ju Lin</name></author><updated>2026-08-23T00:00:00+12:00</updated><entry><title>What Is Agentic UI?</title><id>https://julin.ai/2026/08/23/agentic-ui/</id><link rel="alternate" type="text/html" href="https://julin.ai/2026/08/23/agentic-ui/"/><published>2026-08-23T00:00:00+12:00</published><updated>2026-08-23T00:00:00+12:00</updated><category term="ux"/><category term="field-notes"/><category term="agentic-ui"/><content type="html">&lt;p&gt;You already know ChatGPT&amp;rsquo;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&amp;rsquo;s reply, many details happen. The interface must show you these details.&lt;/p&gt;
&lt;p&gt;Here is what I believe agentic UI must give you:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Progress.&lt;/strong&gt; Show you where the agent stands in the task, not just that it is working.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tool use.&lt;/strong&gt; Show you which tools ran and what input each one used.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Direction.&lt;/strong&gt; Show you if the reasoning is still on track.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Control.&lt;/strong&gt; If it is not on track, let you stop, redirect, or undo the action.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="ui-styles"&gt;UI styles&lt;/h2&gt;
&lt;p&gt;Here lists a few agentic UI styles.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Chat interface.&lt;/strong&gt; Chat bubbles, streaming responses, expandable tool-call sections, and &amp;ldquo;thinking&amp;rdquo; indicators. Example: &lt;a href="https://chatgpt.com"&gt;ChatGPT&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Copilot interface.&lt;/strong&gt; 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: &lt;a href="https://github.com/microsoft/vscode"&gt;VS Code&lt;/a&gt; Copilot.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Canvas interface.&lt;/strong&gt; Chat on one side, a canvas or file explorer on the other. Must persist artifacts, support versioning, and let you edit them. Examples: &lt;a href="https://chatgpt.com"&gt;ChatGPT Canvas&lt;/a&gt;, &lt;a href="https://claude.ai"&gt;Claude Artifacts&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dashboard interface.&lt;/strong&gt; 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 a &lt;a href="https://github.com/grafana/grafana"&gt;Grafana&lt;/a&gt; dashboard.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Collaborative interface.&lt;/strong&gt; A chat variant that treats humans and agents as peers, with collaborator badges and multiple roles in one thread. Example: &lt;a href="https://github.com/yetone/cumora"&gt;Cumora&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Workflow interface.&lt;/strong&gt; Node-based graphs, common in creative tools. Example: &lt;a href="https://github.com/Comfy-Org/ComfyUI"&gt;ComfyUI&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Terminal interface (TUI).&lt;/strong&gt; Runs fully in the terminal, common for coding agents. Examples: &lt;a href="https://claude.com/claude-code"&gt;Claude Code&lt;/a&gt;, &lt;a href="https://cursor.com"&gt;Cursor&lt;/a&gt;, &lt;a href="https://github.com/openai/codex"&gt;Codex&lt;/a&gt;, &lt;a href="https://github.com/Aider-AI/aider"&gt;Aider&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="ui-components"&gt;UI components&lt;/h2&gt;
&lt;p&gt;Regardless of style, most agentic UIs draw from the same set of primitive components:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Agent status indicator.&lt;/strong&gt; Shows the agent&amp;rsquo;s current state, such as Thinking, Searching, Coding, or Waiting.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Streaming response.&lt;/strong&gt; Exposes output incrementally as it&amp;rsquo;s generated.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Reasoning display.&lt;/strong&gt; A dedicated area for the model&amp;rsquo;s reasoning, like &lt;code&gt;&amp;lt;think&amp;gt;...&amp;lt;/think&amp;gt;&lt;/code&gt; output.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tool use visualization.&lt;/strong&gt; Shows which tool ran and what input it used.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Approval gate.&lt;/strong&gt; Pauses for human approval before a risky action runs — human-in-the-loop control.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Scheduled-task card.&lt;/strong&gt; Asks whether to create a background task that tracks an event.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Compaction.&lt;/strong&gt; Shown when the conversation nears the context window&amp;rsquo;s limit.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Completion.&lt;/strong&gt; Reports what got done, such as &amp;ldquo;Done: 13 sites checked, 4 options found.&amp;rdquo;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Error.&lt;/strong&gt; Handles failures gracefully: tool errors, hallucinations, an aborted plan, or a max-turn limit reached.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Questionnaire.&lt;/strong&gt; Pops up a short question list when the agent is uncertain, so you can fill in the gaps.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Generative UI.&lt;/strong&gt; The agent picks a native component, such as a stock quote, weather card, or data chart.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Input.&lt;/strong&gt; More than a textarea: file select, thinking-level control, model switch, dictation, and send/steer/pause buttons.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Sources drawer.&lt;/strong&gt; Collects the evidence the agent consulted.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;MCP/tool list.&lt;/strong&gt; Lists the tools and MCP servers available to the agent.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This list will keep growing as people discover fun, engaging agentic UX. I&amp;rsquo;ll update it every now and then. :P&lt;/p&gt;
&lt;h2 id="ui-frameworks"&gt;UI frameworks&lt;/h2&gt;
&lt;p&gt;A few frameworks stand out for building agentic UI today:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://github.com/vercel/ai"&gt;Vercel ai-sdk&lt;/a&gt;.&lt;/strong&gt; 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://github.com/CopilotKit/CopilotKit"&gt;CopilotKit&lt;/a&gt;.&lt;/strong&gt; Getting popular too. It is built around a protocol called &lt;a href="https://github.com/ag-ui-protocol/ag-ui"&gt;ag-ui&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://github.com/assistant-ui/assistant-ui"&gt;assistant-ui&lt;/a&gt;.&lt;/strong&gt; It supports multiple backends, such as ai-sdk, ag-ui, and LangChain.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://github.com/gradio-app/gradio"&gt;Gradio&lt;/a&gt;.&lt;/strong&gt; Popular for building AI and ML prototypes quickly. You will see lots of Gradio apps on Hugging Face Spaces.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://github.com/streamlit/streamlit"&gt;Streamlit&lt;/a&gt;.&lt;/strong&gt; Popular for building data dashboards. It has a simple mental model, but it is hard to extend and cannot expose an API.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href="https://github.com/Chainlit/chainlit"&gt;Chainlit&lt;/a&gt;.&lt;/strong&gt; It has native LangChain support, an out-of-the-box experience, and little boilerplate.&lt;/li&gt;
&lt;/ul&gt;</content></entry></feed>