Skip to main content
The <webmcp-agent> custom element accepts the following attributes to configure its behavior.

​
Attributes

AttributeTypeDefaultDescription
auth-tokenstring—JWT token from your identity provider for authenticated sessions
openbooleanfalseControls the open/closed state of the widget overlay
dev-modeJSON string—Development overrides for LLM API keys and local testing
enable-debug-toolsbooleanfalseExposes debug tools in the widget UI

​
auth-token

The JWT token from your identity provider. When provided, the widget operates in stateful mode with persistent conversation history tied to the user’s identity. 
<webmcp-agent auth-token="eyJhbGciOiJSUzI1NiIs..."></webmcp-agent>
When omitted, the widget runs in stateless mode—messages exist only in memory and are lost on page refresh.
See Identity Providers for details on obtaining JWT tokens from your IDP.

​
open

Controls the visibility of the widget overlay. Set programmatically to show or hide the widget. 
const agent = document.querySelector("webmcp-agent");

// Open the widget
agent?.setAttribute("open", "true");
// Or: agent.open = true;

// Close the widget
agent?.setAttribute("open", "false");
// Or: agent.open = false;
In React, you can bind this to state: 
const [isOpen, setIsOpen] = useState(false);

<webmcp-agent auth-token={token} open={isOpen} />

​
dev-mode

A JSON string containing development overrides. Useful for local development and testing. 
<webmcp-agent
  dev-mode='{"anthropicApiKey":"sk-ant-...","openaiApiKey":"sk-...","useLocalApi":true}'
></webmcp-agent>
PropertyTypeDescription
anthropicApiKeystringDirect Anthropic API key for development
openaiApiKeystringDirect OpenAI API key for development
useLocalApibooleanPoint to local development API server
Never use dev-mode in production. LLM API keys embedded in HTML are visible to users.

​
enable-debug-tools

When set to true, exposes debugging controls in the widget UI for inspecting state and troubleshooting. 
<webmcp-agent enable-debug-tools="true"></webmcp-agent>
Debug tools are intended for development only. Disable in production environments.

​
TypeScript Declarations

If TypeScript doesn’t recognize the custom element, add a global JSX type declaration: 
import type React from "react";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "webmcp-agent": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      > & {
        "auth-token"?: string;
        open?: boolean;
        "dev-mode"?: string;
        "enable-debug-tools"?: boolean;
      };
    }
  }
}