MCP Elicitation

AI chats

About

A dialog that renders a server's mid-run request for structured input (an MCP elicitation), naming the requesting server outside its own message, building a live JSON-schema form for the reply, and refusing to render any field that looks like a credential.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MCP Elicitation to your project and fits it to your theme.

Code

How MCP Elicitation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { McpElicitation } from "@/components/ui/mcp-elicitation";

const ELICIT_SCHEMA = {
  type: "object",
  required: ["environment"],
  properties: {
    environment: {
      type: "string",
      enum: ["staging", "production"],
      description: "Which database to migrate.",
    },
    confirm_backup: {
      type: "boolean",
      description: "A backup was taken in the last hour.",
    },
    api_key: {
      type: "string",
      description: "Needed to authenticate the migration.",
    },
  },
};

export default function McpElicitationDemo() {
  return (
    <div className="w-full max-w-lg">
      <McpElicitation
        server="postgres"
        message="Before running the migration I need to know which environment to target."
        schema={ELICIT_SCHEMA}
        onSubmit={() => {}}
        onDecline={() => {}}
      />
    </div>
  );
}