Observability

Monitor CopilotKit with first‑class observability hooks that emit structured signals for chat events, user interactions, and runtime errors. Send these signals straight to your existing stack, including Sentry, Datadog, New Relic, and OpenTelemetry, or route them to your analytics pipeline. The hooks expose stable schemas and IDs so you can join agent events with app telemetry, trace sessions end to end, and alert on failures in real time. Works with Copilot Cloud via publicApiKey, or self‑hosted via publicLicenseKey.

Quick Start

All observability hooks require a publicLicenseKey or publicAPIkey - Get yours free at https://cloud.copilotkit.ai

Chat Observability Hooks

Track user interactions and chat events with comprehensive observability hooks:

import { CopilotChat } from "@copilotkit/react-ui";
import { CopilotKit } from "@copilotkit/react-core";

export default function App() {
  return (
    <CopilotKit
      publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
      // OR
      publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
    >
      <CopilotChat
        observabilityHooks={{
          onMessageSent: (message) => {
            console.log("Message sent:", message);
            analytics.track("chat_message_sent", { message });
          }, 
          onChatExpanded: () => {
            console.log("Chat opened");
            analytics.track("chat_expanded");
          }, 
          onChatMinimized: () => {
            console.log("Chat closed");
            analytics.track("chat_minimized");
          }, 
          onFeedbackGiven: (messageId, type) => {
            console.log("Feedback:", type, messageId);
            analytics.track("chat_feedback", { messageId, type });
          }, 
        }} 
      />
    </CopilotKit>
  );
}

Error Observability

Monitor system errors and performance with error observability hooks:

import { CopilotKit } from "@copilotkit/react-core";

export default function App() {
  return (
    <CopilotKit
      publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
      // OR
      publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
      onError={(errorEvent) => {
        // Send errors to monitoring service
        console.error("CopilotKit Error:", errorEvent);

        // Example: Send to analytics
        analytics.track("copilotkit_error", {
          type: errorEvent.type,
          source: errorEvent.context.source,
          timestamp: errorEvent.timestamp,
        });
      }} 
      showDevConsole={false} // Hide dev console in production
    >
      {/* Your app */}
    </CopilotKit>
  );
}

Observability Features

CopilotChat Observability Hooks

Track user interactions, chat behavior and errors with comprehensive observability hooks (requires a publicLicenseKey if self-hosted or publicAPIkey if using CopilotCloud):

import { CopilotChat } from "@copilotkit/react-ui";

<CopilotChat
  observabilityHooks={{
    onMessageSent: (message) => {
      console.log("Message sent:", message);
      // Track message analytics
      analytics.track("chat_message_sent", { message });
    },
    onChatExpanded: () => {
      console.log("Chat opened");
      // Track engagement
      analytics.track("chat_expanded");
    },
    onChatMinimized: () => {
      console.log("Chat closed");
      // Track user behavior
      analytics.track("chat_minimized");
    },
    onMessageRegenerated: (messageId) => {
      console.log("Message regenerated:", messageId);
      // Track regeneration requests
      analytics.track("chat_message_regenerated", { messageId });
    },
    onMessageCopied: (content) => {
      console.log("Message copied:", content);
      // Track content sharing
      analytics.track("chat_message_copied", { contentLength: content.length });
    },
    onFeedbackGiven: (messageId, type) => {
      console.log("Feedback given:", messageId, type);
      // Track user feedback
      analytics.track("chat_feedback_given", { messageId, type });
    },
    onChatStarted: () => {
      console.log("Chat generation started");
      // Track when AI starts responding
      analytics.track("chat_generation_started");
    },
    onChatStopped: () => {
      console.log("Chat generation stopped");
      // Track when AI stops responding
      analytics.track("chat_generation_stopped");
    },
    onError: (errorEvent) => {
      console.log("Error occurred", errorEvent);
      // Log error
      analytics.track("error_event", errorEvent);
    },
  }}
/>;

Available Observability Hooks:

onMessageSent(message) - User sends a message
onChatExpanded() - Chat is opened/expanded
onChatMinimized() - Chat is closed/minimized
onMessageRegenerated(messageId) - Message is regenerated
onMessageCopied(content) - Message is copied
onFeedbackGiven(messageId, type) - Thumbs up/down feedback given
onChatStarted() - Chat generation starts
onChatStopped() - Chat generation stops
onError(errorEvent) - Error events and system monitoring

Requirements:

✅ Requires a publicLicenseKey (when self-hosting) or publicApiKey from Copilot Cloud
✅ Works with CopilotChat, CopilotPopup, CopilotSidebar, and all pre-built components

Important: Observability hooks will not trigger without a valid key. This is a security feature to ensure observability hooks only work in authorized applications.

Error Event Structure

The onError handler receives detailed error events with rich context:

interface CopilotErrorEvent {
  type:
    | "error"
    | "request"
    | "response"
    | "agent_state"
    | "action"
    | "message"
    | "performance";
  timestamp: number;
  context: {
    source: "ui" | "runtime" | "agent";
    request?: {
      operation: string;
      method?: string;
      url?: string;
      startTime: number;
    };
    response?: {
      endTime: number;
      latency: number;
    };
    agent?: {
      name: string;
      nodeName?: string;
    };
    messages?: {
      input: any[];
      messageCount: number;
    };
    technical?: {
      environment: string;
      stackTrace?: string;
    };
  };
  error?: any; // Present for error events
}

Common Observability Patterns

Chat Event Tracking

<CopilotChat
  observabilityHooks={{
    onMessageSent: (message) => {
      // Track message analytics
      analytics.track("chat_message_sent", {
        messageLength: message.length,
        timestamp: Date.now(),
        userId: getCurrentUserId(),
      });
    },
    onChatExpanded: () => {
      // Track user engagement
      analytics.track("chat_expanded", {
        timestamp: Date.now(),
        userId: getCurrentUserId(),
      });
    },
    onFeedbackGiven: (messageId, type) => {
      // Track feedback for AI improvement
      analytics.track("chat_feedback", {
        messageId,
        feedbackType: type,
        timestamp: Date.now(),
      });
    },
  }}
/>

Combined Event and Error Tracking

<CopilotKit
  publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
  // OR
  publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
  onError={(errorEvent) => {
    // Error observability
    if (errorEvent.type === "error") {
      console.error("CopilotKit Error:", errorEvent);
      analytics.track("copilotkit_error", {
        error: errorEvent.error?.message,
        context: errorEvent.context,
      });
    }
  }}
>
  <CopilotChat
    observabilityHooks={{
      onMessageSent: (message) => {
        // Event tracking
        analytics.track("chat_message_sent", { message });
      },
      onChatExpanded: () => {
        analytics.track("chat_expanded");
      },
    }}
  />
</CopilotKit>

Error Observability Patterns

Basic Error Logging

<CopilotKit
  publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
  // OR
  publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
  onError={(errorEvent) => {
    console.error("[CopilotKit Error]", {
      type: errorEvent.type,
      timestamp: new Date(errorEvent.timestamp).toISOString(),
      context: errorEvent.context,
      error: errorEvent.error,
    });
  }}
>
  {/* Your app */}
</CopilotKit>

Integration with Monitoring Services

// Example with Sentry
import * as Sentry from "@sentry/react";

<CopilotKit
  publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
  // OR
  publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
  onError={(errorEvent) => {
    if (errorEvent.type === "error") {
      Sentry.captureException(errorEvent.error, {
        tags: {
          source: errorEvent.context.source,
          operation: errorEvent.context.request?.operation,
        },
        extra: {
          context: errorEvent.context,
          timestamp: errorEvent.timestamp,
        },
      });
    }
  }}
>
  {/* Your app */}
</CopilotKit>;

Custom Error Analytics

<CopilotKit
  publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
  // OR
  publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
  onError={(errorEvent) => {
    // Track different error types
    analytics.track("copilotkit_event", {
      event_type: errorEvent.type,
      source: errorEvent.context.source,
      agent_name: errorEvent.context.agent?.name,
      latency: errorEvent.context.response?.latency,
      error_message: errorEvent.error?.message,
      timestamp: errorEvent.timestamp,
    });
  }}
>
  {/* Your app */}
</CopilotKit>

Development vs Production Setup

Development Environment

<CopilotKit
  runtimeUrl="http://localhost:3000/api/copilotkit"
  publicLicenseKey={process.env.NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY} // Self-hosted
  // OR
  publicApiKey={process.env.NEXT_PUBLIC_COPILOTKIT_API_KEY} // Using Copilot Cloud
  showDevConsole={true} // Show visual errors
  onError={(errorEvent) => {
    // Simple console logging for development
    console.log("CopilotKit Event:", errorEvent);
  }}
>
  <CopilotChat
    observabilityHooks={{
      onMessageSent: (message) => {
        console.log("Message sent:", message);
      },
      onChatExpanded: () => {
        console.log("Chat expanded");
      },
    }}
  />
</CopilotKit>

Production Environment

<CopilotKit
  runtimeUrl="https://your-app.com/api/copilotkit"
  publicLicenseKey={process.env.NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY} 
  // OR
  publicApiKey={process.env.NEXT_PUBLIC_COPILOTKIT_API_KEY} 
  showDevConsole={false} // Hide from users
  onError={(errorEvent) => {
    // Production error observability
    if (errorEvent.type === "error") {
      // Log critical errors
      logger.error("CopilotKit Error", {
        error: errorEvent.error,
        context: errorEvent.context,
        timestamp: errorEvent.timestamp,
      });

      // Send to monitoring service
      monitoring.captureError(errorEvent.error, {
        extra: errorEvent.context,
      });
    }
  }}
>
  <CopilotChat
    observabilityHooks={{
      onMessageSent: (message) => {
        // Track production analytics
        analytics.track("chat_message_sent", {
          messageLength: message.length,
          userId: getCurrentUserId(),
        });
      },
      onChatExpanded: () => {
        analytics.track("chat_expanded");
      },
      onFeedbackGiven: (messageId, type) => {
        // Track feedback for AI improvement
        analytics.track("chat_feedback", { messageId, type });
      },
    }}
  />
</CopilotKit>

Getting Started with CopilotKit Premium

To use observability hooks (event hooks and error observability), you'll need a CopilotKit Premium account:

Sign up for free at https://cloud.copilotkit.ai
Get your public license key (for self-hosting), or public API key from the dashboard

Add it to your environment variables:

NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY=ck_pub_your_key_here
# OR
NEXT_PUBLIC_COPILOTKIT_API_KEY=ck_pub_your_key_here

Use it in your CopilotKit provider:

<CopilotKit 
   publicLicenseKey={process.env.NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY}
   // OR
   publicApiKey={process.env.NEXT_PUBLIC_COPILOTKIT_API_KEY}
   >
  <CopilotChat
    observabilityHooks={{
      onMessageSent: (message) => console.log("Message:", message),
      onChatExpanded: () => console.log("Chat opened"),
    }}
  />
</CopilotKit>

CopilotKit Premium is free to get started and provides production-ready infrastructure for your AI copilots, including comprehensive observability capabilities for tracking user behavior and monitoring system health.

Quick Start

All observability hooks require a publicLicenseKey or publicAPIkey - Get yours free at https://cloud.copilotkit.ai

Chat Observability Hooks

Track user interactions and chat events with comprehensive observability hooks:

import { CopilotChat } from "@copilotkit/react-ui";
import { CopilotKit } from "@copilotkit/react-core";

export default function App() {
  return (
    <CopilotKit
      publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
      // OR
      publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
    >
      <CopilotChat
        observabilityHooks={{
          onMessageSent: (message) => {
            console.log("Message sent:", message);
            analytics.track("chat_message_sent", { message });
          }, 
          onChatExpanded: () => {
            console.log("Chat opened");
            analytics.track("chat_expanded");
          }, 
          onChatMinimized: () => {
            console.log("Chat closed");
            analytics.track("chat_minimized");
          }, 
          onFeedbackGiven: (messageId, type) => {
            console.log("Feedback:", type, messageId);
            analytics.track("chat_feedback", { messageId, type });
          }, 
        }} 
      />
    </CopilotKit>
  );
}

Error Observability

Monitor system errors and performance with error observability hooks:

import { CopilotKit } from "@copilotkit/react-core";

export default function App() {
  return (
    <CopilotKit
      publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
      // OR
      publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
      onError={(errorEvent) => {
        // Send errors to monitoring service
        console.error("CopilotKit Error:", errorEvent);

        // Example: Send to analytics
        analytics.track("copilotkit_error", {
          type: errorEvent.type,
          source: errorEvent.context.source,
          timestamp: errorEvent.timestamp,
        });
      }} 
      showDevConsole={false} // Hide dev console in production
    >
      {/* Your app */}
    </CopilotKit>
  );
}

Observability Features

CopilotChat Observability Hooks

Track user interactions, chat behavior and errors with comprehensive observability hooks (requires a publicLicenseKey if self-hosted or publicAPIkey if using CopilotCloud):

import { CopilotChat } from "@copilotkit/react-ui";

<CopilotChat
  observabilityHooks={{
    onMessageSent: (message) => {
      console.log("Message sent:", message);
      // Track message analytics
      analytics.track("chat_message_sent", { message });
    },
    onChatExpanded: () => {
      console.log("Chat opened");
      // Track engagement
      analytics.track("chat_expanded");
    },
    onChatMinimized: () => {
      console.log("Chat closed");
      // Track user behavior
      analytics.track("chat_minimized");
    },
    onMessageRegenerated: (messageId) => {
      console.log("Message regenerated:", messageId);
      // Track regeneration requests
      analytics.track("chat_message_regenerated", { messageId });
    },
    onMessageCopied: (content) => {
      console.log("Message copied:", content);
      // Track content sharing
      analytics.track("chat_message_copied", { contentLength: content.length });
    },
    onFeedbackGiven: (messageId, type) => {
      console.log("Feedback given:", messageId, type);
      // Track user feedback
      analytics.track("chat_feedback_given", { messageId, type });
    },
    onChatStarted: () => {
      console.log("Chat generation started");
      // Track when AI starts responding
      analytics.track("chat_generation_started");
    },
    onChatStopped: () => {
      console.log("Chat generation stopped");
      // Track when AI stops responding
      analytics.track("chat_generation_stopped");
    },
    onError: (errorEvent) => {
      console.log("Error occurred", errorEvent);
      // Log error
      analytics.track("error_event", errorEvent);
    },
  }}
/>;

Available Observability Hooks:

onMessageSent(message) - User sends a message
onChatExpanded() - Chat is opened/expanded
onChatMinimized() - Chat is closed/minimized
onMessageRegenerated(messageId) - Message is regenerated
onMessageCopied(content) - Message is copied
onFeedbackGiven(messageId, type) - Thumbs up/down feedback given
onChatStarted() - Chat generation starts
onChatStopped() - Chat generation stops
onError(errorEvent) - Error events and system monitoring

Requirements:

✅ Requires a publicLicenseKey (when self-hosting) or publicApiKey from Copilot Cloud
✅ Works with CopilotChat, CopilotPopup, CopilotSidebar, and all pre-built components

Important: Observability hooks will not trigger without a valid key. This is a security feature to ensure observability hooks only work in authorized applications.

Error Event Structure

The onError handler receives detailed error events with rich context:

interface CopilotErrorEvent {
  type:
    | "error"
    | "request"
    | "response"
    | "agent_state"
    | "action"
    | "message"
    | "performance";
  timestamp: number;
  context: {
    source: "ui" | "runtime" | "agent";
    request?: {
      operation: string;
      method?: string;
      url?: string;
      startTime: number;
    };
    response?: {
      endTime: number;
      latency: number;
    };
    agent?: {
      name: string;
      nodeName?: string;
    };
    messages?: {
      input: any[];
      messageCount: number;
    };
    technical?: {
      environment: string;
      stackTrace?: string;
    };
  };
  error?: any; // Present for error events
}

Common Observability Patterns

Chat Event Tracking

<CopilotChat
  observabilityHooks={{
    onMessageSent: (message) => {
      // Track message analytics
      analytics.track("chat_message_sent", {
        messageLength: message.length,
        timestamp: Date.now(),
        userId: getCurrentUserId(),
      });
    },
    onChatExpanded: () => {
      // Track user engagement
      analytics.track("chat_expanded", {
        timestamp: Date.now(),
        userId: getCurrentUserId(),
      });
    },
    onFeedbackGiven: (messageId, type) => {
      // Track feedback for AI improvement
      analytics.track("chat_feedback", {
        messageId,
        feedbackType: type,
        timestamp: Date.now(),
      });
    },
  }}
/>

Combined Event and Error Tracking

<CopilotKit
  publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
  // OR
  publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
  onError={(errorEvent) => {
    // Error observability
    if (errorEvent.type === "error") {
      console.error("CopilotKit Error:", errorEvent);
      analytics.track("copilotkit_error", {
        error: errorEvent.error?.message,
        context: errorEvent.context,
      });
    }
  }}
>
  <CopilotChat
    observabilityHooks={{
      onMessageSent: (message) => {
        // Event tracking
        analytics.track("chat_message_sent", { message });
      },
      onChatExpanded: () => {
        analytics.track("chat_expanded");
      },
    }}
  />
</CopilotKit>

Error Observability Patterns

Basic Error Logging

<CopilotKit
  publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
  // OR
  publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
  onError={(errorEvent) => {
    console.error("[CopilotKit Error]", {
      type: errorEvent.type,
      timestamp: new Date(errorEvent.timestamp).toISOString(),
      context: errorEvent.context,
      error: errorEvent.error,
    });
  }}
>
  {/* Your app */}
</CopilotKit>

Integration with Monitoring Services

// Example with Sentry
import * as Sentry from "@sentry/react";

<CopilotKit
  publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
  // OR
  publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
  onError={(errorEvent) => {
    if (errorEvent.type === "error") {
      Sentry.captureException(errorEvent.error, {
        tags: {
          source: errorEvent.context.source,
          operation: errorEvent.context.request?.operation,
        },
        extra: {
          context: errorEvent.context,
          timestamp: errorEvent.timestamp,
        },
      });
    }
  }}
>
  {/* Your app */}
</CopilotKit>;

Custom Error Analytics

<CopilotKit
  publicApiKey="ck_pub_your_key" // - Use publicApiKey for Copilot Cloud
  // OR
  publicLicenseKey="ck_pub_your_key" // - Use publicLicenseKey for self-hosted
  onError={(errorEvent) => {
    // Track different error types
    analytics.track("copilotkit_event", {
      event_type: errorEvent.type,
      source: errorEvent.context.source,
      agent_name: errorEvent.context.agent?.name,
      latency: errorEvent.context.response?.latency,
      error_message: errorEvent.error?.message,
      timestamp: errorEvent.timestamp,
    });
  }}
>
  {/* Your app */}
</CopilotKit>

Development vs Production Setup

Development Environment

<CopilotKit
  runtimeUrl="http://localhost:3000/api/copilotkit"
  publicLicenseKey={process.env.NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY} // Self-hosted
  // OR
  publicApiKey={process.env.NEXT_PUBLIC_COPILOTKIT_API_KEY} // Using Copilot Cloud
  showDevConsole={true} // Show visual errors
  onError={(errorEvent) => {
    // Simple console logging for development
    console.log("CopilotKit Event:", errorEvent);
  }}
>
  <CopilotChat
    observabilityHooks={{
      onMessageSent: (message) => {
        console.log("Message sent:", message);
      },
      onChatExpanded: () => {
        console.log("Chat expanded");
      },
    }}
  />
</CopilotKit>

Production Environment

<CopilotKit
  runtimeUrl="https://your-app.com/api/copilotkit"
  publicLicenseKey={process.env.NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY} 
  // OR
  publicApiKey={process.env.NEXT_PUBLIC_COPILOTKIT_API_KEY} 
  showDevConsole={false} // Hide from users
  onError={(errorEvent) => {
    // Production error observability
    if (errorEvent.type === "error") {
      // Log critical errors
      logger.error("CopilotKit Error", {
        error: errorEvent.error,
        context: errorEvent.context,
        timestamp: errorEvent.timestamp,
      });

      // Send to monitoring service
      monitoring.captureError(errorEvent.error, {
        extra: errorEvent.context,
      });
    }
  }}
>
  <CopilotChat
    observabilityHooks={{
      onMessageSent: (message) => {
        // Track production analytics
        analytics.track("chat_message_sent", {
          messageLength: message.length,
          userId: getCurrentUserId(),
        });
      },
      onChatExpanded: () => {
        analytics.track("chat_expanded");
      },
      onFeedbackGiven: (messageId, type) => {
        // Track feedback for AI improvement
        analytics.track("chat_feedback", { messageId, type });
      },
    }}
  />
</CopilotKit>

Getting Started with CopilotKit Premium

To use observability hooks (event hooks and error observability), you'll need a CopilotKit Premium account:

Sign up for free at https://cloud.copilotkit.ai
Get your public license key (for self-hosting), or public API key from the dashboard

Add it to your environment variables:

NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY=ck_pub_your_key_here
# OR
NEXT_PUBLIC_COPILOTKIT_API_KEY=ck_pub_your_key_here

Use it in your CopilotKit provider:

<CopilotKit 
   publicLicenseKey={process.env.NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY}
   // OR
   publicApiKey={process.env.NEXT_PUBLIC_COPILOTKIT_API_KEY}
   >
  <CopilotChat
    observabilityHooks={{
      onMessageSent: (message) => console.log("Message:", message),
      onChatExpanded: () => console.log("Chat opened"),
    }}
  />
</CopilotKit>

Observability
Premium

Quick Start

Chat Observability Hooks

Error Observability

Observability Features

CopilotChat Observability Hooks

Error Event Structure

Common Observability Patterns

Chat Event Tracking

Combined Event and Error Tracking

Error Observability Patterns

Basic Error Logging

Integration with Monitoring Services

Custom Error Analytics

Development vs Production Setup

Development Environment

Production Environment

Getting Started with CopilotKit Premium

On this page

Observability
Premium

Quick Start

Chat Observability Hooks

Error Observability

Observability Features

CopilotChat Observability Hooks

Error Event Structure

Common Observability Patterns

Chat Event Tracking

Combined Event and Error Tracking

Error Observability Patterns

Basic Error Logging

Integration with Monitoring Services

Custom Error Analytics

Development vs Production Setup

Development Environment

Production Environment

Getting Started with CopilotKit Premium

On this page

ObservabilityPremium

On this page

ObservabilityPremium

On this page

Observability
Premium

Observability
Premium