> ## Documentation Index
> Fetch the complete documentation index at: https://praison.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# AGUI Protocol

> Agent GUI protocol for building visual agent interfaces

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

```mermaid theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
graph LR
    subgraph "AGUI Architecture"
        A[👤 User] --> B[🖥️ GUI]
        B --> C[🔌 AGUI]
        C --> D[🤖 Agent]
        D --> E[📤 Response]
        E --> B
    end
    
    classDef user fill:#6366F1,stroke:#7C90A0,color:#fff
    classDef gui fill:#F59E0B,stroke:#7C90A0,color:#fff
    classDef agui fill:#189AB4,stroke:#7C90A0,color:#fff
    classDef agent fill:#8B0000,stroke:#7C90A0,color:#fff
    classDef response fill:#10B981,stroke:#7C90A0,color:#fff
    
    class A user
    class B gui
    class C agui
    class D agent
    class E response
    classDef agent fill:#8B0000,color:#fff
    classDef tool fill:#189AB4,color:#fff
```

## Quick Start

**1. Create an AGUI Instance**

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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 theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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 theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
interface AGUIConfig {
  name: string;           // UI name
  description?: string;   // UI description
}
```

***

## AGUI Class

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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

> [tab] Chat Interface
>
> ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
> 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);
>   }
> }
> ```

> [tab] Dashboard
>
> ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
> 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

> [card] [AGUI](https://praison.ai/docs/sdk/reference/typescript/classes/AGUI.md)
>
> AGUI protocol class reference

***

## Best Practices

> [accordion] Use descriptive names
>
> Give your AGUI instances clear, descriptive names for better debugging.

> [accordion] Separate UI from logic
>
> Keep AGUI configuration separate from agent business logic.

***

## Related

> [card] [A2A Protocol](https://praison.ai/docs/js/advanced/a2a.md)
>
> Agent-to-Agent communication

> [card] [Streaming](https://praison.ai/docs/js/streaming.md)
>
> Stream agent responses


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.