designaigenerative-uiagentsstreamingchattool-callsuxdedalusharnessUpdated 2026-07-04

AI-Native Design Patterns

Agent interfaces are not forms with a chat box glued on. They are observable work surfaces: streaming output, tool calls, approvals, resumable state, provenance, and generated UI all need first-class design.

Use this page when building surfaces where an agent, not a fixed wizard, drives the workflow: Dedalus, Loop, Agent Machines, wiki search, coding harness UIs, and any product that exposes tool-using AI.

Control Levels for Generative UI

Generative UI means the model influences what appears on screen at runtime. There are three control levels:

Level Model freedom Production stance
Static components Model chooses from predefined components Safest default for tools, search, cards, charts
Declarative specs Model emits JSON against a renderer/catalog Best balance for product surfaces and json-render
Open-ended UI Model emits HTML/CSS/app code Use only inside sandboxes or authoring tools

Kevin's default is catalog-constrained UI: the agent can choose and populate components, but identity and behavior come from the design system. This pairs with Constraints over Context and Sigil UI.

Core Surface Patterns

  • Streaming text: reserve line height, keep the scroll position predictable, and mark output regions politely for assistive tech.
  • Thinking/status states: show concrete work ("Searching wiki", "Reading 4 files", "Running tests") instead of a vague spinner.
  • Tool-call cards: display tool name, state, inputs, outputs, errors, retry affordance, and provenance. Collapse noisy details after completion.
  • Activity timeline: multi-step agents need an audit trail, not an opaque transcript.
  • Approvals: destructive or external side effects need reviewable inputs, confirm/cancel, and a clear "what happens next."
  • Citations: attach source chips or inline provenance to claims that depend on retrieval or web research.
  • Stop/cancel: the user must be able to stop a run honestly. A disabled stop button is just a prop in a tiny tragedy.
  • Edit-and-resend: users should be able to revise intent without restarting from scratch.
  • Regenerate/fork: useful for creative outputs; risky for stateful tool runs unless the run is idempotent.
  • Dynamic trays: keep advanced actions in contextual, reversible trays instead of turning the base surface into a settings wall.

For the broader product boundary, start with Agent Product Surface. This page owns the design patterns; the product-surface page owns the operator contract.

Consistency Before Personalization

Adaptive interfaces should not move core product structure just because an AI model can guess a user's next action. Gabriel's dynamic-interface critique is the hard product constraint: feature discovery is already one of the hardest parts of software, and moving a single familiar button can confuse an enterprise workflow. Source: X/@gabriel1, 2026-06-27

The viable pattern is consistent structure with generative payloads: stable navigation, stable commands, stable approval/cancel locations, and stable object models; personalized data, ordering, copy, suggestions, and minor visual texture can adapt inside those rails. Dynamic UI should make the user's current job clearer, not turn the interface into a new puzzle on every run.

View original tweet

Progressive Disclosure With Trays

Dynamic Trays is the current reference pattern for advanced actions that need to stay near the object they operate on. The X boost-post artifact shows a base post, a boost setup tray, nested payment and region trays, and a final confirm/cancel step without making the underlying product UI carry every option at rest. For agent surfaces, the same rule applies to tool settings, model/provider choices, approvals, cost controls, and scoped permissions: reveal the advanced surface when the user is already taking that action, preserve the object behind it, and make back/cancel obvious. Source: X/@benjitaylor, 2026-06-26; Source: Benji Taylor, "Family Values"

View original tweet

Runtime State Model

Agent UI should expose state explicitly:

The UI should not imply linear chat when the underlying run is a graph with retries, approvals, pauses, and resumptions.

Latency Is a Design Material

Agent latency is variable. Design for perceived progress:

  • Stream partial results when they are useful.
  • Use skeletons for incoming structured components.
  • Show durable step state for long-running tasks.
  • Persist runs so refreshes and navigation do not lose work.
  • Prefer optimistic UI only for reversible local actions.
  • Do not animate progress if the action is actually stuck; show the last real event.

Generated Component Rules

Generated UI must inherit the same design system as hand-authored UI:

  • Components come from a fixed catalog.
  • Tokens come from Design System / Design Tokens.
  • Layout uses stable dimensions to avoid streaming layout shift.
  • Tool cards and citations have compact variants.
  • Errors and empty states are designed, not dumped from exceptions.

For TypeScript app surfaces, Vercel AI SDK remains the natural UI stack: useChat, typed message parts, tool states, and now AI SDK 7 HarnessAgent for embedding mature harnesses while keeping AI SDK-compatible streams. For OpenAI-centered orchestration, OpenAI Agents SDK owns agent definitions, tools, handoffs, guardrails, sessions, tracing, and human-in-the-loop.

Vercel AI Elements is useful as the IRL component vocabulary for these surfaces: conversation, message, prompt input, response, reasoning, source/citation, tool, task, actions, branch, and loader components. Treat those as a reference taxonomy even when using a different implementation. Source: Vercel AI Elements docs, https://ai-sdk.dev/elements, 2026-06-19

Copilotkit and AG-UI Protocol cover the adjacent "agent frontend" lane: embedded copilots, component-aware generative UI, Slack/Teams/Open Tag surfaces, streaming replies, approval events, and full thread context. The design implication is that every agent surface needs a typed state/event vocabulary before it needs decorative chat chrome. Source: X/@ataiiam, 2026-06-25; Source: GitHub/npm, 2026-06-30

JSON Render -- Generative UI Framework + AI SDK HarnessAgent is the current concrete route for coding-harness generative UI. The Chris Tate demo shows Claude Code, Codex, and Pi returning rendered charts, sections, comparison tables, and bars while working in a sandbox. Product implication: do not render long agent results as markdown by default when a catalog-constrained UI can expose the proof more clearly. Source: X/@ctatedev, 2026-06-15; Source: local video artifact review, 2026-07-01

OpenUI -- Generative UI Language and Runtime is the adjacent compact-language route: define a component library, generate the system prompt from that library, stream OpenUI Lang, then render the typed component tree progressively. Use it when token efficiency and streamability are the core constraint; keep the same product rule as json-render: the model chooses inside a fixed component catalog, not arbitrary JSX. Source: thesysdev/openui, 2026-07-03

Screenshot-to-UI Replication

Screenshot replication prompts are useful when they become an evaluation rubric, not when copied as magic words. The @Amank1412 artifact tells the agent to match colors, type sizes, weights, spacing, radius, padding, shadows, gradients, icons, navigation, images, component dimensions, pressed states, scroll behavior, responsiveness, and the final rendered output. The durable pattern is reference-screen parity: extract visual tokens from the screenshot, rebuild the component hierarchy, include interaction states, then verify the rendered result against the source image. Use this for internal design recreation, QA, and migration work where the source screen is allowed to be copied; avoid it for unauthorized product cloning. Source: X/@Amank1412, 2026-03-16; Source: local image artifact review, 2026-07-03

View original tweet

Design Systems As Constraints

Agent-era design systems should constrain the space of possible UI, not merely document preferred choices. Polar's Orbit post frames docs as probabilistic context and typed design decisions as guarantees: if a value is not a design decision, it should not typecheck. Linear's StyleX migration adds the operational side: codemods and agents can move a large surface area, while humans resolve ambiguous interaction behavior. Source: X/@emilwidlund, 2026-06-16; Source: X/@kenneth_skovhus, 2026-06-23

Deep review on 2026-06-30 kept the Orbit/StyleX signal in the design-system layer rather than spawning a new skill. The action item for agents is to route generated React UI through typed tokens, lintable props, and narrow escape hatches; the exact StyleX migration should still be decided per product. Version check: @stylexjs/stylex latest remained 0.19.0 on npm as of 2026-07-01, published 2026-06-16. GitHub releases lagged npm (0.17.5 on 2026-01-21), so implementation should check package/docs directly. Source: npm registry; GitHub facebook/stylex, 2026-07-01

The product-design workflow is also changing. A Ramp playbook bookmark turns Figma into step 4 of 5: start with an LLM to clarify the problem, validate assumptions with users and support evidence, prototype the real interaction with AI tools, bring the surviving concept into Figma for system alignment, then iterate against usability tests, analytics, session recordings, adoption, and friction. The reviewed image matters because it names the handoff: "Figma becomes the place where ideas are refined, not invented." For the actual "talk to users" message, use Customer Feedback Emails: specific, personal, low-friction asks get more replies than generic research blasts. Source: X/@aakashgupta and local image review, 2026-07-04; Source: X/@snowmaker, 2026-06-21

The Oluwaphilemon workflow bookmark adds the visual-art-direction variant: use Figma to create inspiration visuals, use Claude Design for the initial build, then use Claude Code for iteration and polish. The reviewed video shows a dark portfolio/agency site concept with sculptural 3D imagery, glitching pixel text, animated artifact sections, and dense motion mood. The important pattern is sequencing: visual taste and references constrain the first agent, then the coding agent turns the chosen direction into a maintainable implementation. Source: X/@Oluwaphilemon1, 2026-05-13; Source: local video artifact review, 2026-07-01

View original tweet
View original tweet
View original tweet
View original tweet

The Anthropic wedding-site bookmark adds the private-archive variant of the same loop: Claude Code analyzed 12 years of iMessages, then Claude Design turned the resulting aggregate patterns into a guest-facing website. The artifact works because it edits the data into a keepsake narrative: counts, yearly message rhythm, hourly heatmap, "I love you" count, and emoji vocabulary are presented as relationship story, not as a raw analytics dashboard. Source: X/@helloitsaustin, 2026-05-05; Source: local image artifact review, 2026-07-02

Design rule: personal archive UX needs stronger governance than normal analytics. Keep the model on aggregate or consented excerpts, redact sensitive raw messages, and make the output legible as a story only after deciding who is allowed to see it. Agent speed is not the achievement if it turns private history into accidental surveillance.

View original tweet
View original tweet

Copilot Design System: focus handoff

Copilot Design System adds the clearest current large-product reference for AI-native design systems. The useful model is not Microsoft's visual style; it is the separation of presence, memory, attention, and shared awareness across Dynamic Action Button, Chat, On-Canvas, and Suggested User Actions. The Throw & Catch pattern is a focus handoff: when the assistant moves between surfaces, the user should see where the agent is focused and remain in control. Source: Microsoft Design, 2026; X/@qianjiang___, 2026-06-16

Design implication: every multi-surface agent UI needs a focus owner. Chat, tool cards, inline suggestions, canvas edits, and command palette actions should not all behave as if they own the run. Source: Copilot Design System, 2026-06-30

Performance constraints

Agent UI must satisfy Performance Budgets even when the underlying run is slow:

  • local controls should still react immediately,
  • streaming should not cause layout shift,
  • tool cards should use stable dimensions,
  • long logs should virtualize or collapse,
  • expensive generated components should load behind skeletons,
  • cancel/pause controls should never wait on the model loop.

Kevin Product Defaults

  • No product tours. Let the first useful action be obvious.
  • Navigation should be reachable in three steps or fewer.
  • Persistent, resumable state is mandatory for long-running agent work.
  • Tooltips are minimal; provenance beats explanation.
  • Copy is active voice and short.
  • Risky actions reassure before loss and provide one-click cancel.
  • Cmd+K is the natural command surface for agent tools.

Where This Sits

Agent Machines and Loop need AI-native UI as an operating surface, not a chat demo. Sigil UI supplies token constraints; Vercel AI SDK and OpenAI Agents SDK supply runtime primitives; Durable Agent Execution Architecture supplies resumability; Agent Memory Patterns supplies continuity.

Timeline

Related Pages

Agent Product SurfacePerformance BudgetsFrontier Stack 2026Sigil UIFrontend and Design SkillsInterface Micro-PolishDesign SystemDynamic TraysCopilot Design SystemStyleXFigma MotionClaude Code HarnessVercel AI SDKOpenAI Agents SDKAI SDK HarnessAgentCopilotkitAG-UI ProtocolAgent GUIsHuman-in-the-Loop ControlAgent MachinesLoopX Bookmark Ingest 2026-06-29Customer Feedback EmailsOpenUI -- Generative UI Language and Runtime

25 pages link here

AG-UI ProtocolConceptsAgent GUIsDesignAgent Product SurfaceConceptsAstryx Design SystemDesignBrain CapsulesMetaClickyToolsCopilot Design SystemDesignCopilotKitToolsCreative Web Interaction ReferencesDesignCustomer Feedback EmailsConceptsDesign SystemDesignDesign System MapDesignDynamic TraysDesignGT NextToolsHitchhiker's Guide to Agentic AIResearchOpenUI -- Generative UI Language and RuntimeToolsPrompt RecipesDesignSettings and Admin SurfacesDesignStyleXToolsVercel AI SDKToolsWiki Concept Coverage MapMetaX Bookmark Ingest 2026-06-29ResearchX Bookmarks: AI Agents & Tools (Jan 2025 – Jun 2026)ToolsX Bookmarks: CSS & Frontend TechniquesToolsX Bookmarks: Design & UI (Feb–Jun 2026)Design