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
anthropic-api-keystring—Anthropic API key for anonymous mode (localhost development only)
openbooleanfalseControls the open/closed state of the agent overlay
dev-modeJSON string—Development overrides for LLM API keys and local testing
enable-debug-toolsbooleanfalseExposes debug tools in the agent UI

​
auth-token

JWT token from your identity provider. Enables authenticated mode with persistent conversation history tied to the user’s identity, cross-app tools, and organizational features. 
<webmcp-agent auth-token="eyJhbGciOiJSUzI1NiIs..."></webmcp-agent>
When omitted, the agent requires anthropic-api-key for anonymous mode (localhost development only). See Deployment Tiers. Related: Identity Providers

​
anthropic-api-key

Your Anthropic API key for anonymous mode (localhost development). 
<webmcp-agent anthropic-api-key="sk-ant-..."></webmcp-agent>
Anonymous mode provides:
  • Full Durable Object persistence (messages survive page refresh)
  • Local WebMCP tools on the current page
  • Same streaming and tool calling as authenticated mode
Restrictions:
  • Localhost only. Requests from non-localhost origins are rejected.
  • No cross-app tools. Only tools on the current page are available.
  • No organizational features. No user tracking, audit logs, or governance.
Never embed API keys in production code—they’re visible to users in the HTML source.

​
open

Controls the visibility of the agent overlay. 
const agent = document.querySelector("webmcp-agent");

agent?.setAttribute("open", "true");   // shows agent
agent?.setAttribute("open", "false");  // hides agent

// Property access also works
agent.open = true;
React example: 
const [isOpen, setIsOpen] = useState(false);

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

​
dev-mode

JSON string containing development overrides for local 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
Note: API keys in dev-mode are visible in client-side HTML. Intended for development only.

​
enable-debug-tools

Exposes debugging controls in the agent UI for inspecting state and troubleshooting. 
<webmcp-agent enable-debug-tools="true"></webmcp-agent>
Intended for development environments.

​
TypeScript Declarations

Global JSX type declaration for TypeScript projects: 
import type React from "react";

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