tessl/npm-copilotkit--react-ui

Production-ready React UI components library for building deeply-integrated AI assistants and copilots

Overview

Eval results

Files

Development Console

Name: tessl/npm-copilotkit--react-ui
Author: tessl

Development tools for debugging and monitoring CopilotKit applications. The dev console provides version checking, update notifications, and debug utilities.

Capabilities

CopilotDevConsole

Development console component that displays version information, update notifications, and debug menu. Automatically shown in development mode unless disabled.

/**
 * Development console for debugging CopilotKit applications
 * Automatically displays in development mode based on CopilotKit context configuration
 * @returns Rendered dev console or null if hidden/disabled
 */
function CopilotDevConsole(): JSX.Element | null;

Features:

Version Checking: Automatically checks for new CopilotKit versions
Update Notifications: Displays alerts when updates are available with severity levels (low, medium, high)
Debug Menu: Provides options to:
- Log readable context to console
- Log registered actions to console
- Log messages to console
- Copy installation command for updates
- Hide the dev console
Advisory Messages: Shows important notices about breaking changes or security updates

Controlling Display:

The dev console is controlled via the showDevConsole prop in the CopilotKit provider:

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

function App() {
  return (
    <CopilotKit
      runtimeUrl="/api/copilotkit"
      showDevConsole={true} // Enable in production (default: true in dev, false in prod)
    >
      <YourApp />
      <CopilotDevConsole />
    </CopilotKit>
  );
}

Default Behavior:

Development: Automatically shown when process.env.NODE_ENV === 'development'
Production: Hidden by default, can be enabled with showDevConsole={true}

Usage Example - Always Show:

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

function App() {
  return (
    <CopilotKit
      runtimeUrl="/api/copilotkit"
      showDevConsole={true}
    >
      <YourApp />
      <CopilotDevConsole />
    </CopilotKit>
  );
}

Usage Example - Always Hide:

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

function App() {
  return (
    <CopilotKit
      runtimeUrl="/api/copilotkit"
      showDevConsole={false}
    >
      <YourApp />
      {/* CopilotDevConsole not included */}
    </CopilotKit>
  );
}

Usage Example - Conditional Display:

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

function App() {
  const isDev = process.env.NODE_ENV === "development";
  const isStaging = process.env.NEXT_PUBLIC_ENV === "staging";

  return (
    <CopilotKit
      runtimeUrl="/api/copilotkit"
      showDevConsole={isDev || isStaging}
    >
      <YourApp />
      <CopilotDevConsole />
    </CopilotKit>
  );
}

shouldShowDevConsole

Utility function to determine whether the dev console should be displayed. Checks the showDevConsole configuration and environment.

/**
 * Determines if dev console should be shown based on configuration
 * Re-exported from @copilotkit/react-core for convenience
 * @param showDevConsole - Configuration value from CopilotKit provider (optional)
 * @returns Whether dev console should be displayed
 */
function shouldShowDevConsole(showDevConsole?: boolean): boolean;

Usage Example:

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

function CustomDevTools({ enabled }: { enabled: boolean }) {
  if (!shouldShowDevConsole(enabled)) {
    return null;
  }

  return (
    <div className="dev-tools">
      <h3>Development Tools</h3>
      {/* Custom dev tools UI */}
    </div>
  );
}

Version Information

Type for representing version information displayed in the dev console.

Note: This type is internal and not directly exported. It's provided here for reference when working with version checking features.

interface CopilotKitVersion {
  /** Current installed version */
  current: string;

  /** Latest available version from npm/CDN */
  latest: string;

  /** Update urgency level */
  severity: "low" | "medium" | "high";

  /** Optional advisory message about the update */
  advisory: string | null;

  /** Timestamp of last version check */
  lastChecked: number;
}

Severity Levels:

low: Minor updates, non-breaking changes, optional upgrade
medium: Recommended updates with new features or improvements
high: Critical updates, security fixes, or breaking changes requiring attention

Usage in Console:

The dev console automatically fetches and displays version information:

// Example version data structure
const versionInfo: CopilotKitVersion = {
  current: "1.10.6",
  latest: "1.12.0",
  severity: "medium",
  advisory: "This update includes new chat customization options and performance improvements.",
  lastChecked: Date.now(),
};

Debug Menu Options

The dev console provides several debug utilities accessible through the menu:

Log Readables: Logs all readable context (shared state) registered with CopilotKit to the browser console. Useful for debugging context availability.

// Console output example
{
  readables: [
    { key: "user", value: { name: "Alice", role: "admin" } },
    { key: "document", value: { id: "doc-123", title: "My Document" } }
  ]
}

Log Actions: Logs all registered CopilotKit actions to the browser console. Shows available actions, their parameters, and descriptions.

// Console output example
{
  actions: [
    {
      name: "saveDocument",
      description: "Save the current document",
      parameters: { title: "string", content: "string" }
    },
    {
      name: "searchUsers",
      description: "Search for users by name",
      parameters: { query: "string" }
    }
  ]
}

Log Messages: Logs all chat messages to the browser console. Shows full message history with metadata.

// Console output example
{
  messages: [
    { id: "msg-1", role: "user", content: "Hello", timestamp: 1234567890 },
    { id: "msg-2", role: "assistant", content: "Hi there!", timestamp: 1234567891 }
  ]
}

Copy Install Command: Copies the appropriate package manager command to install the latest version to clipboard:

npm install @copilotkit/react-core@latest @copilotkit/react-ui@latest
# or
pnpm add @copilotkit/react-core@latest @copilotkit/react-ui@latest
# or
yarn add @copilotkit/react-core@latest @copilotkit/react-ui@latest

Hide Console: Hides the dev console for the current session. Can be shown again by refreshing the page (if still in dev mode) or programmatically.

Styling the Dev Console

The dev console can be styled using CSS custom properties:

interface CopilotKitCSSProperties {
  /** Dev console background color */
  "--copilot-kit-dev-console-bg"?: string;

  /** Dev console text color */
  "--copilot-kit-dev-console-text"?: string;
}

Usage Example:

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotDevConsole, CopilotKitCSSProperties } from "@copilotkit/react-ui";

function App() {
  const styles: CopilotKitCSSProperties = {
    "--copilot-kit-dev-console-bg": "#1a1a1a",
    "--copilot-kit-dev-console-text": "#00ff00",
  };

  return (
    <div style={styles}>
      <CopilotKit runtimeUrl="/api/copilotkit" showDevConsole={true}>
        <YourApp />
        <CopilotDevConsole />
      </CopilotKit>
    </div>
  );
}

Or with CSS:

.app-container {
  --copilot-kit-dev-console-bg: #1a1a1a;
  --copilot-kit-dev-console-text: #00ff00;
}

/* Alternative theme */
.light-theme {
  --copilot-kit-dev-console-bg: #ffffff;
  --copilot-kit-dev-console-text: #333333;
}

Best Practices

Development:

Keep dev console enabled during development for easy debugging
Use the debug menu to inspect readables, actions, and messages
Monitor update notifications to stay current with CopilotKit releases

Production:

Disable dev console in production builds for cleaner UI
Consider enabling for specific testing/staging environments
Use environment variables to control visibility

Debugging Workflow:

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

function App() {
  // Enable in dev and staging
  const showConsole =
    process.env.NODE_ENV === "development" ||
    process.env.NEXT_PUBLIC_ENV === "staging";

  return (
    <CopilotKit
      runtimeUrl="/api/copilotkit"
      showDevConsole={showConsole}
    >
      <YourApp />
      {/* Dev console helps debug integration issues */}
      <CopilotDevConsole />
    </CopilotKit>
  );
}

Version Check Behavior

The dev console automatically checks for updates:

First Load: Checks immediately on mount
Caching: Caches version info in localStorage to avoid excessive API calls
Cache Duration: 1 hour - will only re-check after the cache expires
Update Check: Re-checks when cache expires or on first load after clearing localStorage
Display: Shows notification badge when updates are available

Version Check Source:

The console fetches version information from the CopilotKit API (https://api.cloud.copilotkit.ai/check-for-updates) to compare with the installed version. This helps developers stay aware of important updates without manual checking. The check is non-blocking and failures are silently ignored to prevent disrupting development.

Troubleshooting

Dev Console Not Showing:

Check showDevConsole prop in CopilotKit provider
Verify CopilotDevConsole component is rendered
Check if console was manually hidden via debug menu
Verify NODE_ENV is set correctly

Version Check Failed:

Check network connectivity
Verify CDN accessibility
Check browser console for fetch errors
May be blocked by ad blockers or privacy extensions

Debug Menu Not Working:

Ensure CopilotKit context is properly initialized
Check that actions/readables are registered
Verify console access permissions in browser

Install with Tessl CLI

npx tessl i tessl/npm-copilotkit--react-ui@1.10.1

docs

message-components.md

types.md

README.md

tile.json