> ## 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.

# Display

> Customize how your agents display output

Control how your agents show their work with display callbacks.

```mermaid theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
graph LR
    subgraph "Display System"
        A[🤖 Agent] --> B[📤 Output]
        B --> C{🔔 Callbacks}
        C --> D[📺 Console]
        C --> E[📝 Logger]
        C --> F[🌐 UI]
    end
    
    classDef agent fill:#8B0000,stroke:#7C90A0,color:#fff
    classDef output fill:#F59E0B,stroke:#7C90A0,color:#fff
    classDef callback fill:#189AB4,stroke:#7C90A0,color:#fff
    classDef target fill:#10B981,stroke:#7C90A0,color:#fff
    
    class A agent
    class B output
    class C callback
    class D,E,F target
    classDef agent fill:#8B0000,color:#fff
    classDef tool fill:#189AB4,color:#fff
```

## Quick Start

**1. Agent with Custom Display**

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { Agent, registerDisplayCallback } from 'praisonai';

// Capture all agent output
registerDisplayCallback((message, context) => {
  console.log(`[${context?.agentName}] ${message}`);
});

const agent = new Agent({
  name: "Assistant",
  instructions: "You help with questions",
  verbose: true  // Enable detailed output
});

agent.start("What is AI?");
```

**2. Agent with UI Integration**

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { Agent, registerDisplayCallback } from 'praisonai';

// Send agent output to your UI
registerDisplayCallback((message, context) => {
  updateUI({
    text: message,
    agent: context?.agentName,
    type: context?.level
  });
});

const agent = new Agent({
  name: "ChatBot",
  instructions: "You are a helpful assistant"
});

agent.start("Hello!");
```

***

## Display with Agent Features

> [tab] Tool Calls
>
> ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
> import { Agent, registerDisplayCallback } from 'praisonai';
>
> // Show when agent uses tools
> registerDisplayCallback((message, context) => {
>   if (context?.toolName) {
>     console.log(`🔧 [${context.agentName}] ${context.toolName}: ${message}`);
>   }
> });
>
> const agent = new Agent({
>   name: "Researcher",
>   instructions: "Search for information",
>   tools: [webSearchTool]
> });
>
> agent.start("Find latest AI news");
> ```

> [tab] Error Handling
>
> ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
> import { Agent, registerDisplayCallback } from 'praisonai';
>
> // Capture agent errors
> registerDisplayCallback((message, context) => {
>   if (context?.level === 'error') {
>     console.error(`❌ [${context.agentName}] ${message}`);
>     // Send to error tracking service
>   }
> });
>
> const agent = new Agent({
>   name: "DataAgent",
>   instructions: "Process data reliably"
> });
> ```

> [tab] Reflection
>
> ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
> import { Agent, registerDisplayCallback } from 'praisonai';
>
> // Track agent self-reflection
> registerDisplayCallback((message, context) => {
>   if (context?.level === 'debug') {
>     console.log(`💭 [${context.agentName}] Thinking: ${message}`);
>   }
> });
>
> const agent = new Agent({
>   name: "Analyst",
>   instructions: "Analyze data and explain your reasoning",
>   reflection: true
> });
> ```

***

## Callback System

### Register Callbacks

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { 
  registerDisplayCallback, 
  syncDisplayCallbacks,
  asyncDisplayCallbacks,
  clearDisplayCallbacks 
} from 'praisonai';

// Sync callback
registerDisplayCallback((message, context) => {
  console.log(`[${context?.agentName}] ${message}`);
}, false);

// Async callback
registerDisplayCallback(async (message, context) => {
  await sendToExternalLogger(message, context);
}, true);

// Get all callbacks
const syncCbs = syncDisplayCallbacks();
const asyncCbs = asyncDisplayCallbacks();

// Clear all
clearDisplayCallbacks();
```

### Display Context

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
interface DisplayContext {
  agentName?: string;      // Name of the agent
  toolName?: string;       // Name of the tool (if tool call)
  level?: 'info' | 'warning' | 'error' | 'debug' | 'trace';
  timestamp?: Date;        // When the event occurred
  metadata?: Record<string, any>;  // Additional data
}
```

***

## Flow Display

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { Agent, FlowDisplay } from 'praisonai';

const display = new FlowDisplay({
  showTimestamps: true,
  showAgentNames: true,
  showToolCalls: true,
  colorize: true,
  maxWidth: 80
});

// Track agent workflow
const agent = new Agent({
  name: "Researcher",
  instructions: "Research topics"
});

// Add agent step
display.addAgentStep("Researcher", "Starting research on AI trends");

// Add tool step  
display.addToolStep("web_search", "Searching for latest AI news");

// Add message step
display.addMessageStep("Found 5 relevant articles");

// Render the flow
console.log(display.render());

// Get step count
console.log(`Total steps: ${display.stepCount}`);

// Clear when done
display.clear();
```

***

## Error Logs

```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
import { errorLogs, clearErrorLogs } from 'praisonai';

// Get all error logs
const errors = errorLogs();
console.log(`Total errors: ${errors.length}`);

// Clear error logs
clearErrorLogs();
```

***

## Common Patterns

> [tab] Custom Logger
>
> ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
> import { registerDisplayCallback } from 'praisonai';
>
> // Send to external logging service
> registerDisplayCallback(async (message, context) => {
>   await fetch('https://logs.example.com/api', {
>     method: 'POST',
>     body: JSON.stringify({
>       message,
>       agent: context?.agentName,
>       level: context?.level,
>       timestamp: context?.timestamp
>     })
>   });
> }, true);
> ```

> [tab] UI Integration
>
> ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
> import { registerDisplayCallback } from 'praisonai';
>
> // Update React state
> registerDisplayCallback((message, context) => {
>   setMessages(prev => [...prev, {
>     text: message,
>     agent: context?.agentName,
>     type: context?.level
>   }]);
> });
> ```

> [tab] File Logger
>
> ```typescript theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
> import { registerDisplayCallback } from 'praisonai';
> import fs from 'fs';
>
> registerDisplayCallback((message, context) => {
>   const log = `[${new Date().toISOString()}] ${context?.level}: ${message}\n`;
>   fs.appendFileSync('agent.log', log);
> });
> ```

***

## API Reference

> [card] [DisplayContext](https://praison.ai/docs/sdk/reference/typescript/classes/DisplayContext.md)
>
> Display context and callback types

> [card] [FlowDisplay](https://praison.ai/docs/sdk/reference/typescript/classes/FlowDisplay.md)
>
> Flow visualization class

***

## Best Practices

> [accordion] Use appropriate log levels
>
> Use `error` for failures, `warning` for issues, `info` for status, `debug` for development.

> [accordion] Keep callbacks lightweight
>
> Sync callbacks run in the main thread - avoid blocking operations.

> [accordion] Use async for I/O
>
> Register async callbacks for network requests or file operations.

***

## Related

> [card] [Observability](https://praison.ai/docs/js/observability.md)
>
> Full observability integration

> [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.