Agent Ui

Agent Ui is a community skill for building user interfaces that display and control AI agent interactions, covering real-time status rendering, tool call visualization, conversation threading, and agent state management in frontend applications.

What Is This?

Overview

Agent Ui provides patterns for constructing frontend interfaces that present AI agent activity to users. It covers real-time message streaming with typing indicators, tool call display that shows what actions the agent is executing, conversation thread management for multi-turn interactions, agent state visualization including progress and status indicators, and error presentation that surfaces agent failures clearly. The skill enables developers to build transparent agent UIs where users can observe and control agent behavior.

Who Should Use This

This skill serves frontend developers building chat interfaces that expose agent tool usage, teams creating dashboards that monitor autonomous agent workflows, and engineers designing user controls for pausing, resuming, or redirecting agent execution.

Why Use It?

Problems It Solves

Standard chat UIs hide agent tool calls, leaving users uncertain about what the agent is doing. Streaming responses need careful state management to avoid flickering or incomplete renders. Agent errors displayed as raw JSON confuse non-technical users. Multi-step agent workflows lack progress indicators that show which step is currently executing.

Core Highlights

Message streaming renders partial responses incrementally with smooth transitions. Tool call cards display each agent action with its parameters and results. Status indicators show agent state transitions from thinking to executing to complete. Error boundaries catch agent failures and present user-friendly messages with retry options.

How to Use It?

Basic Usage

import { useState, useCallback } from "react";

interface AgentMessage {
  id: string;
  role: "user" | "agent";
  content: string;
  toolCalls?: ToolCall[];
  status: "pending" | "streaming" | "complete" | "error";
}

interface ToolCall {
  name: string;
  params: Record<string, unknown>;
  result?: string;
  status: "running" | "done" | "failed";
}

function useAgentChat() {
  const [messages, setMessages] = useState<AgentMessage[]>([]);
  const [isRunning, setIsRunning] = useState(false);

  const sendMessage = useCallback(async (text: string) => {
    const userMsg: AgentMessage = {
      id: crypto.randomUUID(),
      role: "user",
      content: text,
      status: "complete",
    };
    setMessages((prev) => [...prev, userMsg]);
    setIsRunning(true);

    const agentMsg: AgentMessage = {
      id: crypto.randomUUID(),
      role: "agent",
      content: "",
      status: "streaming",
      toolCalls: [],
    };
    setMessages((prev) => [...prev, agentMsg]);
    setIsRunning(false);
  }, []);

  return { messages, isRunning, sendMessage };
}

Real-World Examples

interface AgentStepProps {
  toolCall: ToolCall;
}

function ToolCallCard({ toolCall }: AgentStepProps) {
  const statusIcon = {
    running: "...",
    done: "[ok]",
    failed: "[err]",
  }[toolCall.status];

  return (
    <div className="tool-call-card">
      <div className="tool-header">
        <span className="tool-name">{toolCall.name}</span>
        <span className="tool-status">{statusIcon}</span>
      </div>
      <pre className="tool-params">
        {JSON.stringify(toolCall.params, null, 2)}
      </pre>
      {toolCall.result && (
        <div className="tool-result">{toolCall.result}</div>
      )}
    </div>
  );
}

function AgentMessageView({ msg }: { msg: AgentMessage }) {
  return (
    <div className={`message message-${msg.role}`}>
      <div className="message-content">{msg.content}</div>
      {msg.toolCalls?.map((tc, i) => (
        <ToolCallCard key={i} toolCall={tc} />
      ))}
      {msg.status === "streaming" && (
        <span className="typing-indicator">Thinking</span>
      )}
    </div>
  );
}

Advanced Tips

Use optimistic rendering for user messages while the agent processes, then update with confirmed state when the response arrives. Group related tool calls into collapsible sections to reduce visual clutter during complex multi-step operations. Implement keyboard shortcuts for common agent controls like stop, retry, and clear conversation.

When to Use It?

Use Cases

Build a developer assistant UI that shows each code analysis and file edit the agent performs. Create an agent monitoring dashboard that displays real-time status of autonomous workflows across multiple agents. Design a customer-facing chat interface where agent tool usage is presented as transparent action steps.

Related Topics

React component patterns, real-time UI updates, WebSocket integration, chat interface design, and agent observability dashboards.

Important Notes

Requirements

A React or similar component framework for building the interface. WebSocket or SSE connection to the agent backend for real-time updates. CSS framework or design system for consistent visual presentation.

Usage Recommendations

Do: show agent thinking and tool execution states to build user trust and transparency. Provide stop and retry controls that let users interrupt or restart agent operations. Render streaming text incrementally to give immediate feedback during generation.

Don't: hide tool calls from users who need to understand what the agent is doing. Block the UI thread during agent processing, which makes the interface feel unresponsive. Display raw JSON errors to end users without formatting them into readable messages.

Limitations

Complex agent workflows with many concurrent tool calls can overwhelm the UI without careful layout design. Streaming performance depends on the WebSocket connection quality. Agent state management adds frontend complexity compared to simple request-response chat interfaces.