DOCSEARCHbyAlgolia
Submit Docs

Agent UI

repository·main·Indexed 23 days ago

https://github.com/agno-agi/agent-ui

A modern chat interface built with Next.js, Tailwind CSS, and TypeScript, designed to interact with AgentOS instances via the Agno platform. It provides capabilities for visualizing agent reasoning, tool calls, and multi-modal content (images, video, and audio). The package includes APIs for managing agents, teams, and sessions, as well as a library of custom UI components and utility functions for audio decoding and Tailwind class merging.

Tokens
5.1K
Snippets
12
Records
33
Agent score
83%

What's inside agent-ui

  1. Agent UI Features and Capabilities

    main

    Agent UI is a modern chat interface built with Next.js, Tailwind CSS, and TypeScript. Key capabilities include:

    • AgentOS Integration: Connect to local or live AgentOS instances.
    • Real-time Interaction: Supports real-time streaming and a modern chat interface.
    • Agent Transparency: Visualizes tool calls, results, and reasoning steps (when available).
    • Contextual Awareness: Supports references/sources used by the agent.
    • Multi-modality: Handles images, video, and audio content.
    • Customization: Built with Tailwind CSS and shadcn/ui for easy styling.

  2. Connect Agent UI to AgentOS

    main

    Agent UI acts as a chat interface for AgentOS instances. To connect, follow these steps:

    1. Configure the Endpoint

    By default, Agent UI attempts to connect to http://localhost:7777. To change this:

    • Hover over the endpoint URL in the left sidebar.
    • Click the edit option to modify the connection settings.

    2. Choose Your Environment

    • Local Development: Use http://localhost:7777 or your custom local port.
    • Production: Enter your production AgentOS HTTPS URL.

    3. Test the Connection

    Agent UI automatically attempts to connect once the endpoint is configured. If successful, your agents will appear in the chat interface. If connection fails, ensure your AgentOS instance is running and accessible.

  3. Install Agent UI

    main

    You can install Agent UI using either the automatic scaffolding tool or by manually cloning the repository.

    Automatic Installation (Recommended)

    Use the create-agent-ui CLI to scaffold a new project:

    npx create-agent-ui@latest

    Manual Installation

    1. Clone the repository:
    git clone https://github.com/agno-agi/agent-ui.git
cd agent-ui
    1. Install dependencies using pnpm:
    pnpm install
    1. Start the development server:
    pnpm dev
    1. Access the UI at http://localhost:3000.
    npx create-agent-ui@latest

  4. Configure Authentication for AgentOS

    main

    If your AgentOS instance requires authentication, you can provide a security token using one of two methods. The token is included as a Bearer token in all API requests.

    Option 1: Environment Variable (Recommended)

    Set the NEXT_PUBLIC_OS_SECURITY_KEY environment variable in your .env.local file or your shell environment. This is the same variable used by AgentOS.

    NEXT_PUBLIC_OS_SECURITY_KEY=your_auth_token_here

    Option 2: UI Configuration

    1. Locate the "Auth Token" section in the left sidebar.
    2. Click the token field to edit it.
    3. Enter your authentication token.

    Note: Tokens configured via the UI are stored in the local global store.

    NEXT_PUBLIC_OS_SECURITY_KEY=your_auth_token_here

  5. Decode base64 audio data with decodeBase64Audio()

    main

    The decodeBase64Audio function converts a base64-encoded audio string into a usable browser URL (Blob URL) for playback in <audio> elements or other media players.

    It supports standard encoded formats (like audio/mpeg) and raw audio/pcm16 data. If audio/pcm16 is provided, the function automatically wraps the raw bytes in a WAV header to ensure compatibility with standard web audio players.

    Parameters

    • base64String (string): The base64 encoded audio data.
    • mimeType (string): The MIME type of the audio. Defaults to 'audio/mpeg'. Use 'audio/pcm16' for raw 16-bit PCM data.
    • sampleRate (number): The sample rate in Hz. Defaults to 44100. Required when using audio/pcm16.
    • numChannels (number): The number of audio channels. Defaults to 1 (mono). Required when using audio/pcm16.

    Returns

    • string: A URL.createObjectURL representing the decoded audio blob.

  6. Fetch teams with getTeamsAPI

    main
    Use getTeamsAPI to retrieve a list of available teams from the AgentOS. It accepts a base endpoint and an optional authToken. If the request fails, it returns an empty array and triggers a toast error notification.

  8. Configure IconProps for the Icon component

    main

    When using the Icon component, you can customize its appearance using the IconProps interface.

    • type: A required IconType string identifying which icon to render.
    • size: An optional size preset. Supported values are 'xs', 'sm', 'md', 'lg', 'dot', 'xxs', and 'default'.
    • className: An optional string for applying CSS classes (e.g., via Tailwind).
    • color: An optional string for specifying the icon color.
    • disabled: An optional boolean to indicate if the icon should be in a disabled state.

  9. Process RunResponse and RunResponseContent

    main

    When receiving updates from the AgentOS, the payload typically follows the RunResponse or RunResponseContent interface. These objects contain the current state of the run, including:

    • event: The current RunEvent.
    • content: The text or object content being generated.
    • messages: An array of ModelMessage objects representing the conversation history.
    • tools / tool: Information about active or completed tool calls.
    • extra_data: Contains reasoning_steps, reasoning_messages, and references for advanced agent capabilities.
    • images, videos, audio: Multimedia data associated with the response.
    export interface RunResponse {
  content?: string | object
  content_type: string
  context?: MessageContext[]
  event: RunEvent
  event_data?: object
  messages?: ModelMessage[]
  metrics?: object
  model?: string
  run_id?: string
  agent_id?: string
  session_id?: string
  tool?: ToolCall
  tools?: Array<ToolCall>
  created_at: number
  extra_data?: AgentExtraData
  images?: ImageData[]
  videos?: VideoData[]
  audio?: AudioData[]
  response_audio?: ResponseAudio
}

  11. Delete an agent session with deleteSessionAPI

    main

    Use deleteSessionAPI to remove a specific session from the AgentOS.

    Parameters:

    • base: The base URL of the AgentOS.
    • dbId: The database ID to include as a query parameter.
    • sessionId: The unique identifier for the session to delete.
    • authToken (optional): Bearer token for authentication.

    Returns the fetch Response object. Throws an error if the response is not OK.