MCP Elicitation UI

A focused prompt surface for Model Context Protocol interactions. The UI pauses the workflow, renders JSON Schema-driven fields, and dispatches the user's answer back to the MCP server.

Overview:

The ElicitationUI component handles dynamic user input collection from MCP servers. For detailed information about elicitation in MCP, see the elicitation documentation.

Installation

Installation

$
npx tambo add elicitation-ui

Note:

The Elicitation UI is automatically included when you use MessageInput. You only need to install it separately if you want to use it standalone or customize its behavior.

Examples

Note on UI Behavior:

When there is only one question, the UI renders without a Submit button and returns the response immediately upon interaction. When there are multiple questions, a Submit button appears and the response is returned when the user clicks Submit.

1. Permission Request (Boolean)

MCP server asks for permission before performing a potentially destructive action.

View request JSON
{
  "message": "Do you want to delete all temporary files?",
  "requestedSchema": {
    "type": "object",
    "properties": {
      "confirm_delete": {
        "type": "boolean",
        "description": "Confirm deletion"
      }
    },
    "required": [
      "confirm_delete"
    ]
  }
}
Do you want to delete all temporary files?
Interact with the UI to preview the response JSON.

2. Disambiguation (Multiple Choice)

Using enumNames to provide user-friendly labels for enum values.

View request JSON
{
  "message": "What would you like to do?",
  "requestedSchema": {
    "type": "object",
    "properties": {
      "task": {
        "type": "string",
        "description": "Select a task",
        "enum": [
          "install",
          "uninstall",
          "update"
        ],
        "enumNames": [
          "Install Python",
          "Uninstall Python",
          "Update Python"
        ]
      }
    },
    "required": [
      "task"
    ]
  }
}
What would you like to do?
Interact with the UI to preview the response JSON.

3. Missing Information (Text Input)

Text field with URI format validation ensuring valid URLs.

View request JSON
{
  "message": "Please provide the API endpoint URL",
  "requestedSchema": {
    "type": "object",
    "properties": {
      "api_url": {
        "type": "string",
        "description": "Enter the API endpoint URL",
        "format": "uri"
      }
    },
    "required": [
      "api_url"
    ]
  }
}
Please provide the API endpoint URL
Interact with the UI to preview the response JSON.

4. Numeric Parameter

Integer input with minimum and maximum constraints.

View request JSON
{
  "message": "How many workers should be started?",
  "requestedSchema": {
    "type": "object",
    "properties": {
      "worker_count": {
        "type": "integer",
        "description": "Number of workers (1-16)",
        "minimum": 1,
        "maximum": 16
      }
    },
    "required": [
      "worker_count"
    ]
  }
}
How many workers should be started?
Interact with the UI to preview the response JSON.

5. Multiple Fields

Database connection configuration with mixed field types and a Submit button.

View request JSON
{
  "message": "Please provide database connection details",
  "requestedSchema": {
    "type": "object",
    "properties": {
      "host": {
        "type": "string",
        "description": "Database host"
      },
      "port": {
        "type": "integer",
        "description": "Database port",
        "minimum": 1,
        "maximum": 65535
      },
      "database": {
        "type": "string",
        "description": "Database name"
      },
      "ssl": {
        "type": "boolean",
        "description": "Use SSL connection?"
      }
    },
    "required": [
      "host",
      "port",
      "database",
      "ssl"
    ]
  }
}
Please provide database connection details
Interact with the UI to preview the response JSON.

6. Email Validation

Email format validation with real-time feedback.

View request JSON
{
  "message": "Please provide your email address",
  "requestedSchema": {
    "type": "object",
    "properties": {
      "email": {
        "type": "string",
        "description": "Enter your email address",
        "format": "email"
      }
    },
    "required": [
      "email"
    ]
  }
}
Please provide your email address
Interact with the UI to preview the response JSON.

7. Optional Information

Mix of required and optional fields. Optional fields are marked with "(optional)".

View request JSON
{
  "message": "Configure report settings",
  "requestedSchema": {
    "type": "object",
    "properties": {
      "report_name": {
        "type": "string",
        "description": "Report name"
      },
      "include_charts": {
        "type": "boolean",
        "description": "Include charts in report? (optional)"
      },
      "recipients": {
        "type": "string",
        "description": "Email recipients (optional)"
      }
    },
    "required": [
      "report_name"
    ]
  }
}
Configure report settings
Interact with the UI to preview the response JSON.

8. Deployment Configuration

Complex configuration with enum, boolean, and integer fields for deployment settings.

View request JSON
{
  "message": "Configure deployment settings",
  "requestedSchema": {
    "type": "object",
    "properties": {
      "environment": {
        "type": "string",
        "description": "Deployment environment",
        "enum": [
          "staging",
          "production"
        ]
      },
      "enable_monitoring": {
        "type": "boolean",
        "description": "Enable monitoring?"
      },
      "replicas": {
        "type": "integer",
        "description": "Number of replicas",
        "minimum": 1,
        "maximum": 10
      }
    },
    "required": [
      "environment",
      "enable_monitoring",
      "replicas"
    ]
  }
}
Configure deployment settings
Interact with the UI to preview the response JSON.

Component API

ElicitationUI

PropTypeDefaultDescription
requestTamboElicitationRequest-The active elicitation payload from the MCP server. Includes the display message plus a JSON Schema describing required inputs.
onResponse(response: TamboElicitationResponse) => void-Callback fired when the user accepts, declines, or cancels the elicitation. Receives the action plus any form data.
classNamestring-Optional wrapper classes for tailoring spacing or layout in your app shell.

Schema Reference

Elicitation requests describe each field with JSON Schema. The UI currently supports the following primitives:

Boolean

Renders yes/no buttons. Single-field boolean requests auto-submit on selection.

String enum

Renders choice buttons. Provide enumNames to override the labels shown in the UI.

String

Renders a text input. Supports minLength, maxLength, pattern, and formats like email, uri, date, and date-time.

Number or integer

Renders a number input with minimum, maximum, and default value support.

Each field can include a description for its label and a default for pre-filled values. Mark required fields on the root schema's required array.

Type Details

Boolean{ type: "boolean" }

Renders as a switch or checkbox. Ideal for yes/no questions and permission requests.

String{ type: "string" }

Text input field. Supports format validation (email, uri, date-time) and pattern matching. Use enum for predefined choices.

Integer / Number{ type: "integer" }

Numeric input with validation. Supports minimum, maximum, multipleOf constraints.

Enum{ type: "string", enum: [...] }

Dropdown or radio group for predefined choices. Use enumNames for display labels.

Behavior

Single-entry mode

One boolean or enum field suppresses the submit bar and resolves immediately after the user selects a choice.

Multi-field mode

Multiple fields or freeform text inputs render submit, decline, and cancel actions. Submit stays disabled until every required field validates.

Validation feedback

Errors display inline once the user interacts with a field. The component enforces every schema constraint before calling onResponse.