Multi-Agent UX: Designing Interfaces Where Multiple AI Models Collaborate

I'm building a product with four collaborating AI agents on LangGraph. Nobody has published design patterns for this. Here's what I've learned about pipelines, conflicts, artifacts, and human-in-the-loop design.

amejia
amejia
· 4 min read

I’m building a product where four AI agents work together. One researches, one analyzes, one generates, one critiques. They run in parallel, pass artifacts to each other, sometimes disagree, and occasionally loop back to redo work. The orchestration is handled by LangGraph. The AI part works.

The hard part is the interface.

Nobody has published design patterns for multi-agent UX because almost nobody is building multi-agent products yet. The few that exist default to chat interfaces with system messages like “Agent 1 is thinking…” — which tells the user nothing and feels like watching a progress bar with extra steps.

After months of iteration, here’s what I’ve learned about designing for systems where multiple AI models collaborate.

The Fundamental Problem: Invisible Orchestration

In a single-agent system, the interaction is simple: user → AI → response. The user’s mental model is a conversation. They know who they’re talking to and what to expect.

In a multi-agent system, the user isn’t talking to one AI — they’re triggering a workflow. Their input might go to a router agent that delegates to a research agent, whose output feeds an analysis agent, whose recommendations get critiqued by a review agent, with the final synthesis going back to the user.

If you show all of this, it’s overwhelming. If you hide all of it, it’s a black box. The design challenge is finding the right level of transparency.

Pattern: The Pipeline View

I landed on a horizontal pipeline as the primary visualization. Each agent gets a labeled stage — “Research,” “Analysis,” “Generation,” “Review” — displayed as connected nodes. The currently active stage pulses. Completed stages get a check mark. Pending stages are dimmed.

The pipeline communicates three things at a glance: where the system is in the process, how much work is left, and what’s happening right now. Users don’t need to understand agents — they understand stages.

The implementation: each agent in the LangGraph workflow emits state updates via server-sent events. The frontend maps agent IDs to stage labels and updates the pipeline in real time. Total frontend code for the pipeline component: 140 lines.

Pattern: Agent Artifacts

Each agent produces an artifact — a tangible output that the user can inspect. The research agent produces a summary of sources. The analysis agent produces key findings. The generation agent produces the draft. The review agent produces a list of suggestions.

I display these as expandable cards below the pipeline. Most users never expand them — they just want the final output. But power users can drill into each agent’s contribution, understand how the system reached its conclusions, and even edit an intermediate artifact to influence downstream agents.

This is the “Summary + Drill-Down” pattern applied to multi-agent systems. The surface is simple. The depth is there when you need it.

Pattern: Conflict Resolution

Sometimes agents disagree. The generation agent produces text that the review agent flags as inaccurate. The research agent finds conflicting sources. The analysis agent’s interpretation differs from the generation agent’s framing.

Hiding these conflicts erodes trust. If the system silently resolves disagreements, users don’t know if the best answer won or just the last answer.

My approach: when agents conflict, surface the disagreement as a decision point. “The research found conflicting information about X. Here are two interpretations. Which should we use?” The user makes the call, and the system proceeds with their choice.

This transforms the multi-agent system from an autonomous pipeline into a human-in-the-loop workflow. The AI does the heavy lifting. The human makes judgment calls at key decision points. Both play to their strengths.

Pattern: Parallel Activity Indicators

Some agent workflows run in parallel — research and data gathering happening simultaneously across multiple sources. Showing these sequentially is dishonest. The user would think the system is slower than it is.

I use a stacked indicator: a compact vertical list showing all currently active agents with real-time status. “Searching web sources… done. Analyzing database records… in progress. Scanning documents… in progress.” Items resolve and collapse as agents complete, and the next pipeline stage activates when all parallel tasks finish.

The animation matters here. Smooth height transitions as items appear and collapse. Subtle progress indicators (not spinners — animated dots that convey “working” without implying a specific duration). The goal is to feel alive and productive, not anxious and uncertain.

Pattern: Retry and Override at the Agent Level

Traditional UX has one retry button: “Try again.” In a multi-agent system, you need retry at the agent level. If the research was good but the analysis missed something, the user should be able to re-run just the analysis agent — not the entire pipeline.

Each agent card in my drill-down view has a “Retry” button and an “Edit” option. Retry re-runs the agent with the same inputs. Edit lets the user modify the agent’s output directly, then re-runs all downstream agents with the edited artifact.

This granular control is the difference between a tool that assists and a tool that frustrates. Users who can intervene at the right level of the pipeline feel in control. Users who can only “regenerate everything” feel like they’re gambling.

What I’d Tell Other Designers

If you’re designing for multi-agent AI, start with these principles:

  1. Show the process, not the agents. Users understand stages and pipelines. They don’t understand “Agent 3 is processing.”
  2. Surface conflicts as decisions. Don’t auto-resolve silently. Let humans make judgment calls.
  3. Default to summary, offer depth. Most users want the output. Power users want the internals. Design for both.
  4. Allow granular retry. Don’t force users to restart the entire pipeline. Let them retry or edit at the agent level.
  5. Animate with purpose. Movement communicates activity. Stillness communicates completion. Use both intentionally.

This is a new discipline. There’s no textbook, no established pattern library, no best-practices guide. We’re writing it right now, one shipped product at a time.