Implementation:Microsoft Autogen Studio Elicitation Dialog

Sources	Microsoft_Autogen
Domains	Frontend React MCP UI Components User Interaction
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The ElicitationDialog component provides an interactive modal dialog for handling Model Context Protocol (MCP) elicitation requests in AutoGen Studio. It dynamically generates form fields based on JSON schemas and allows users to accept, decline, or cancel tool requests that require user input.

The component includes:

Dynamic form field generation based on JSON schemas
Support for multiple field types (string, number, boolean, enum)
Real-time form validation for required fields
Timeout warnings after 25 seconds
Accept/Decline/Cancel action buttons
A companion ElicitationBadge component for displaying pending elicitation counts

Usage

This component is used within the MCP Capabilities Panel to handle interactive tool requests that require user consent or additional parameters. When an MCP server sends an elicitation request, this dialog displays the request details and collects user input before responding to the server.

Code Reference

Source Location

/tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/views/teambuilder/builder/component-editor/fields/workbench/elicitation-dialog.tsx

Signature

interface ElicitationDialogProps {
  request: ElicitationRequest | null;
  onResponse: (response: ElicitationResponse) => void;
  visible: boolean;
  onCancel: () => void;
}

export const ElicitationDialog: React.FC<ElicitationDialogProps> = ({
  request,
  onResponse,
  visible,
  onCancel,
}) => { /* ... */ }

// Companion component
interface ElicitationBadgeProps {
  count: number;
  onClick?: () => void;
}

export const ElicitationBadge: React.FC<ElicitationBadgeProps> = ({
  count,
  onClick,
}) => { /* ... */ }

Import

import { ElicitationDialog, ElicitationBadge } from "./elicitation-dialog";

I/O Contract

Props/Inputs

ElicitationDialog Props:

request (ElicitationRequest | null) - The elicitation request containing schema and message
onResponse (function) - Callback function to send response back to MCP server
visible (boolean) - Controls modal visibility
onCancel (function) - Callback when user cancels the dialog

ElicitationBadge Props:

count (number) - Number of pending elicitations
onClick (function, optional) - Callback when badge is clicked

Outputs

The component generates ElicitationResponse objects with:

type - Always "elicitation_response"
request_id - ID matching the original request
action - "accept", "decline", or "cancel"
data - User-provided form data (only for "accept" actions)
session_id - Session identifier

Usage Examples

// Display elicitation dialog
<ElicitationDialog
  visible={dialogVisible}
  onCancel={handleCancel}
  request={currentElicitation}
  onResponse={handleElicitationResponse}
/>

// Display pending badge
{pendingElicitations.length > 0 && (
  <ElicitationBadge
    count={pendingElicitations.length}
    onClick={() => setDialogVisible(true)}
  />
)}

Field Types Supported

The FormField sub-component renders different inputs based on schema type:

boolean - Renders Checkbox
number/integer - Renders InputNumber with min/max constraints
string (with enum) - Renders Select dropdown
string - Renders standard Input field

Related Pages

Implementation: Studio_MCP_Capabilities_Panel - Parent component that manages elicitation flow
Implementation: Studio_UseMcpWebSocket - WebSocket hook for MCP communication
Implementation: Studio_Workbench_Fields - Main workbench configuration UI

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment