Skip to main content
Control how your agents show their work with display callbacks.

​
Quick Start

1

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

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

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

​
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

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

​
API Reference

DisplayContext

Display context and callback types

FlowDisplay

Flow visualization class

​
Best Practices

Use error for failures, warning for issues, info for status, debug for development.
Sync callbacks run in the main thread - avoid blocking operations.
Register async callbacks for network requests or file operations.

Observability

Full observability integration

Streaming

Stream agent responses