Workbench Configuration

This page covers advanced Workbench configuration and embedding. For basic setup and testing agents, see Testing with Workbench.

Configuration

Configure Workbench in your agentuity.config.ts:

import type { AgentuityConfig } from '@agentuity/cli';
 
export default {
  workbench: {
    route: '/workbench',
    headers: {},
  },
} satisfies AgentuityConfig;

Custom Route

Serve Workbench at a different path:

import type { AgentuityConfig } from '@agentuity/cli';
 
export default {
  workbench: {
    route: '/dev',
  },
} satisfies AgentuityConfig;

Authentication

Protect Workbench with an API key by setting the AGENTUITY_WORKBENCH_APIKEY environment variable:

# .env
AGENTUITY_WORKBENCH_APIKEY=your-secret-key

When set, requests to Workbench without a valid Bearer token will be rejected.

Embedding in Your Frontend

Workbench exports React components you can embed in your own application:

import { App } from '@agentuity/workbench';
import '@agentuity/workbench/styles';
import { encodeWorkbenchConfig } from '@agentuity/core/workbench';
 
const config = encodeWorkbenchConfig({
  route: '/workbench',
  headers: {},
});
 
function MyApp() {
  return <App configBase64={config} />;
}

For custom layouts, the package also exports individual components:

• Chat - The conversation area
• Schema - Schema viewer panel
• WorkbenchProvider + useWorkbench - Context and hooks for full control

Debug Logging

Enable debug logging in the browser console:

localStorage.setItem('AGENTUITY_LOG_LEVEL', 'debug');

Valid levels: debug, info, warn, error. Refresh the page after setting.

Next Steps

• Testing with Workbench: Basic setup and test prompts
• React Hooks: Build custom agent UIs
• Local Development: Dev server options