Agent Studio

The Agent Studio at frontend/agentic-workbench/src/components/AgentStudio/ provides a 6-step wizard for creating and configuring AI agents with template selection, tool configuration, prompt engineering, workflow design, and guardrail setup.

Components (16 files)

Component	File	Purpose
`AgentStudio`	`AgentStudio.tsx`	Main wizard container
`TemplateSelector`	`TemplateSelector.tsx`	Agent template selection
`AgentConfigForm`	`AgentConfigForm.tsx`	Basic agent configuration
`ToolSelector`	`ToolSelector.tsx`	Tool discovery and configuration
`PromptEditor`	`PromptEditor.tsx`	Prompt template editor
`ReviewPanel`	`ReviewPanel.tsx`	Configuration review and create
`WorkflowDesigner`	`WorkflowDesigner.tsx`	Visual workflow designer
`WorkflowCanvas`	`WorkflowCanvas.tsx`	React Flow workflow canvas
`WorkflowDesignerNode`	`WorkflowDesignerNode.tsx`	Custom workflow node
`WorkflowNodePalette`	`WorkflowNodePalette.tsx`	Node type catalog
`WorkflowNodeConfigPanel`	`WorkflowNodeConfigPanel.tsx`	Node configuration panel
`WorkflowValidator`	`WorkflowValidator.tsx`	Workflow validation rules
`GuardrailConfigurator`	`GuardrailConfigurator.tsx`	Safety guardrail setup
`PreviewMode`	`PreviewMode.tsx`	Agent test/preview interface
`DeploymentFlow`	`DeploymentFlow.tsx`	Deployment configuration

Wizard Steps

const STEPS = [
  { id: 'template', label: 'Template', description: 'Choose a starting template' },
  { id: 'config', label: 'Configure', description: 'Set up basic configuration' },
  { id: 'tools', label: 'Tools', description: 'Select and configure tools' },
  { id: 'prompts', label: 'Prompts', description: 'Define agent prompts' },
  { id: 'workflow', label: 'Workflows', description: 'Design agent workflows' },
  { id: 'review', label: 'Review', description: 'Review and create' },
];

Agent Configuration

interface AgentConfiguration {
  llm: LLMConfig;
  tools: ToolConfig[];
  prompts: PromptConfig[];
  memory: { type: 'conversation'; maxTokens: number };
  guardrails: {
    inputValidation: boolean;
    outputValidation: boolean;
    contentFiltering: boolean;
  };
}
 
const DEFAULT_LLM_CONFIG: LLMConfig = {
  provider: 'openai',
  model: 'gpt-4-turbo',
  temperature: 0.7,
  maxTokens: 4096,
};

Hooks

useAgentStudioAPI

File: frontend/agentic-workbench/src/components/AgentStudio/useAgentStudioAPI.ts

Integration with the AgentStudioApiClient for template loading, tool discovery, and agent persistence.

useWorkflow

File: frontend/agentic-workbench/src/components/AgentStudio/useWorkflow.ts

Manages the workflow designer state including node CRUD, edge management, and validation.

Overview Workflow Canvas