Function defineReactUI

defineReactUI(definition: ReactUIInput): ReactUIDef

Define a UI using a React component.

This helper creates a UIDef with an auto-generated HTML path based on the component name. The Vite plugin discovers these definitions and builds the React components into self-contained HTML files.

Parameters

definition: ReactUIInput
React UI input with component and metadata

Returns ReactUIDef

A UIDef with auto-generated html path and React metadata

Example: Basic usage

import { defineReactUI } from "@mcp-apps-kit/ui-react-builder";
import { MyWidget } from "./widgets/MyWidget";

const widgetUI = defineReactUI({
  component: MyWidget,
  name: "My Widget",
  prefersBorder: true,
});
// Returns: { html: "./src/ui/dist/my-widget.html", name: "My Widget", ... }

Example: With tool definition

import { createApp, defineTool } from "@mcp-apps-kit/core";
import { defineReactUI } from "@mcp-apps-kit/ui-react-builder";
import { RestaurantList } from "./widgets/RestaurantList";

const app = createApp({
  name: "restaurant-finder",
  version: "1.0.0",
  tools: {
    search: defineTool({
      description: "Search for restaurants",
      input: z.object({ query: z.string() }),
      output: z.object({ restaurants: z.array(RestaurantSchema) }),
      ui: defineReactUI({
        component: RestaurantList,
        name: "Restaurant List",
      }),
      handler: async (input) => {
        // ... search logic
      },
    }),
  },
});

Example: Custom output directory

const widgetUI = defineReactUI({
  component: ConfigurableWidget,
  name: "Configurable Widget",
  outDir: "./dist/ui",
});
// Returns: { html: "./dist/ui/configurable-widget.html", ... }