AGUI Protocol - PraisonAI

Build visual interfaces for your agents with the AGUI (Agent GUI) protocol.

Quick Start

Create an AGUI Instance

import { AGUI } from 'praisonai';

const agui = new AGUI({
  name: "Assistant UI",
  description: "Visual interface for the assistant"
});

console.log(agui.getName());  // "Assistant UI"

Integrate with Agent

import { Agent, AGUI } from 'praisonai';

const agui = new AGUI({
  name: "Research UI",
  description: "Research assistant interface"
});

const agent = new Agent({
  name: "Researcher",
  instructions: "Help with research tasks"
});

AGUI Configuration

interface AGUIConfig {
  name: string;           // UI name
  description?: string;   // UI description
}

AGUI Class

import { AGUI } from 'praisonai';

const agui = new AGUI({
  name: "My Agent UI",
  description: "A beautiful agent interface"
});

// Get the UI name
const name = agui.getName();

Common Patterns

Chat Interface
Dashboard

import { AGUI, Agent } from 'praisonai';

class ChatUI {
  private agui: AGUI;
  private agent: Agent;
  
  constructor() {
    this.agui = new AGUI({
      name: "Chat UI",
      description: "Conversational interface"
    });
    
    this.agent = new Agent({
      name: "ChatBot",
      instructions: "Be helpful and friendly"
    });
  }
  
  async sendMessage(message: string): Promise<string> {
    return await this.agent.start(message);
  }
}

import { AGUI, Agent } from 'praisonai';

class DashboardUI {
  private agui: AGUI;
  private agents: Map<string, Agent> = new Map();
  
  constructor() {
    this.agui = new AGUI({
      name: "Dashboard",
      description: "Multi-agent dashboard"
    });
  }
  
  addAgent(name: string, agent: Agent) {
    this.agents.set(name, agent);
  }
  
  async queryAgent(name: string, query: string) {
    const agent = this.agents.get(name);
    if (!agent) throw new Error(`Agent ${name} not found`);
    return await agent.start(query);
  }
}

Best Practices

Use descriptive names

Give your AGUI instances clear, descriptive names for better debugging.

Separate UI from logic

Keep AGUI configuration separate from agent business logic.

A2A Protocol

Agent-to-Agent communication

Streaming

Stream agent responses

JavaScript

​Quick Start

​AGUI Configuration

​AGUI Class

​Common Patterns

​Best Practices

​Related