Workbench Configuration

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

Configuration

Custom Route

Serve the Workbench at a different path:

const workbench = createWorkbench({
  route: '/dev',
});

Authentication

Protect the Workbench with an API key:

const workbench = createWorkbench({
  apiKey: process.env.WORKBENCH_API_KEY,
});

Set the AGENTUITY_WORKBENCH_APIKEY environment variable to enable authentication. Requests without a valid Bearer token will be rejected.

Embedding in Your Frontend

The 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