Workbench Configuration

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

Configuration

Configure Workbench via createApp() in your app.ts:

import { createApp } from '@agentuity/runtime';
 
const app = await createApp({
  workbench: true, // Enables at /workbench
});
 
export default app;

The workbench option accepts three forms:

When using the object form, route sets the path (default: /workbench) and headers adds custom headers to workbench responses.

Custom Route

Serve Workbench at a different path:

import { createApp } from '@agentuity/runtime';
 
const app = await createApp({
  workbench: '/dev', // Custom route path
});
 
export default app;

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