Functions

A function is a named action a widget can trigger. Define functions on the Functions tab, then wire one to a component by setting that component's onClickAction:

{
  "functionName": "confirmOrder",
  "additionalInputs": { "orderId": "order_1042" }
}

additionalInputs is optional and applies to server functions. It is merged with the function's static args at dispatch time; click inputs override static args with the same key. Both objects are passed literally: a value such as "{orderId}" stays that string and does not read widget state. Interpolation is supported in sendMessage.config.message and openLink.config.url.

External actions are sent to the host rendering the widget. The host determines whether a tool runs, a notification is handled, or a close intent changes the UI. Dashboard preview opens links and acknowledges other external actions without executing tools or client handlers.

Every function has a name and a type. The editor requires names to match /^[a-zA-Z_][a-zA-Z0-9_]*$/; specs written directly as JSON or through the API are not checked against that pattern, so follow it anyway. The six types:

server

Requests another agent tool through the host. In the website widget, the target must be an available tool for the current agent and session; defining a function does not register a new server tool.

{ "name": "confirmOrder", "type": "server", "config": { "toolName": "confirm_order", "args": { "source": "widget" } } }

Config field	Type	Description
toolName	string	Required. The tool to invoke.
args	object	Optional. Static args merged with the click's additionalInputs.

client

Emits a notify action whose payload.message is the configured handlerName. The website widget forwards it as an mcp-ui.notify event. Your host integration must handle that event; the function does not look up or call an arbitrary JavaScript function by name.

{ "name": "copyLink", "type": "client", "config": { "handlerName": "copyShareLink" } }

Config field	Type	Description
handlerName	string	Required. Notification name for the host integration to handle.

sendMessage

Sends a message into the chat as the user — the agent then responds to it in the conversation.

{ "name": "askForHelp", "type": "sendMessage", "config": { "message": "I need help with {topic}" } }

Config field	Type	Description
message	string	Required. Supports {variable} interpolation.

openLink

Requests that the host open a URL. The website widget opens it in a new tab.

{ "name": "viewDocs", "type": "openLink", "config": { "url": "https://example.com/docs" } }

Config field	Type	Description
url	string	Required. Supports {variable} interpolation.

dismiss

Emits an intent action with intent: "close". The website widget forwards it as an mcp-ui.intent event; the host must handle it to close or hide the widget. Takes no config.

{ "name": "close", "type": "dismiss", "config": {} }

setVariable

Sets a variable's value locally, without a round trip to the LLM — the widget re-renders immediately with the new value.

{ "name": "showAdvanced", "type": "setVariable", "config": { "variable": "advancedOpen", "value": true } }

Config field	Type	Description
variable	string	Required. Must name a variable declared on the widget.
value	JSON value	Required. Assigned literally, without {variable} interpolation. AI proposals support scalars, flat scalar records, and arrays of scalars or flat records.

setVariable only works in remote-dom widgets (the default content type) — in a rawHtml widget it's a no-op, since that content type renders once and never updates. See Widgets Overview for the difference between content types. Prefer setVariable over a server function for client-side UI toggles, like showing or hiding a section.