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.
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>
);
}