Praison AI

AGUI Protocol

Agent GUI protocol for building visual agent interfaces

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

Diagram

AGUI Architecture

👤 User

🖥️ GUI

🔌 AGUI

🤖 Agent

📤 Response

Quick Start

  1. Create an AGUI Instance
    typescript
    import { AGUI } from 'praisonai';

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

console.log(agui.getName());  // "Assistant UI"
  2. Integrate with Agent
    typescript
    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

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

AGUI Class

typescript
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

typescript
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);
  }
}

Dashboard

typescript
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);
  }
}

API Reference

AGUI

AGUI protocol class reference

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.

Related

A2A Protocol

Agent-to-Agent communication

 Streaming

Stream agent responses