Display - PraisonAI

Control how your agents show their work with display callbacks.

Quick Start

Agent with Custom Display

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?");

Agent with UI Integration

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

Tool Calls
Error Handling
Reflection

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");

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

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

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

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

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

import { errorLogs, clearErrorLogs } from 'praisonai';

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

// Clear error logs
clearErrorLogs();

Common Patterns

Custom Logger
UI Integration
File Logger

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

import { registerDisplayCallback } from 'praisonai';

// Update React state
registerDisplayCallback((message, context) => {
  setMessages(prev => [...prev, {
    text: message,
    agent: context?.agentName,
    type: context?.level
  }]);
});

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

DisplayContext

Display context and callback types

FlowDisplay

Flow visualization class

Best Practices

Use appropriate log levels

Use error for failures, warning for issues, info for status, debug for development.

Keep callbacks lightweight

Sync callbacks run in the main thread - avoid blocking operations.

Use async for I/O

Observability

Full observability integration

Streaming

Stream agent responses

JavaScript

​Quick Start

​Display with Agent Features

​Callback System

​Register Callbacks

​Display Context

​Flow Display

​Error Logs

​Common Patterns

​API Reference