Function defineUI

defineUI(definition: UIDef): UIDef

Helper function to define a UI resource with proper type inference.

Use this helper to define UI resources that can be:

Colocated inline within a tool definition
Extracted and shared across multiple tools

Parameters

definition: UIDef

Returns UIDef

Example: Inline with tool (simple case)

const myTool = defineTool({
  description: "My tool",
  input: z.object({ name: z.string() }),
  output: z.object({ result: z.string() }),
  ui: defineUI({
    html: "./widget.html",
    prefersBorder: true,
  }),
  handler: async (input) => ({ result: `Hello ${input.name}` }),
});

Example: Extracted for reuse (shared UI)

// Shared UI definition
const listUI = defineUI({
  html: "./list-widget.html",
  name: "List Widget",
  csp: { connectDomains: ["https://api.example.com"] },
});

// Multiple tools using the same UI
const searchTool = defineTool({
  description: "Search items",
  ui: listUI,
  // ...
});

const filterTool = defineTool({
  description: "Filter items",
  ui: listUI,
  // ...
});