@mcp-apps-kit/ui-react-builder
Build tool for React-based MCP application UIs.
This package allows you to define UI resources using React components instead of pre-built HTML files. The framework handles bundling React, ReactDOM, and @mcp-apps-kit/ui-react into self-contained HTML that works with both MCP Apps and ChatGPT.
import { defineReactUI, buildReactUIs } from "@mcp-apps-kit/ui-react-builder";import { MyWidget } from "./widgets/MyWidget";// Define your UI with a React componentconst widgetUI = defineReactUI({ component: MyWidget, name: "My Widget", prefersBorder: true,});// Build to HTMLconst result = await buildReactUIs({ "my-widget": widgetUI,}, { outDir: "./dist/ui",});console.log(`Built ${result.outputs.size} UIs in ${result.duration}ms`); Copy
import { defineReactUI, buildReactUIs } from "@mcp-apps-kit/ui-react-builder";import { MyWidget } from "./widgets/MyWidget";// Define your UI with a React componentconst widgetUI = defineReactUI({ component: MyWidget, name: "My Widget", prefersBorder: true,});// Build to HTMLconst result = await buildReactUIs({ "my-widget": widgetUI,}, { outDir: "./dist/ui",});console.log(`Built ${result.outputs.size} UIs in ${result.duration}ms`);
import { createApp, defineTool } from "@mcp-apps-kit/core";import { defineReactUI, buildAndTransform } from "@mcp-apps-kit/ui-react-builder";import { RestaurantList } from "./widgets/RestaurantList";import { z } from "zod";// Build and transform in one stepconst uis = await buildAndTransform({ "restaurant-list": defineReactUI({ component: RestaurantList, name: "Restaurant List", }),});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(z.unknown()) }), ui: uis["restaurant-list"], handler: async (input) => { // ... search logic return { restaurants: [] }; }, }), },}); Copy
import { createApp, defineTool } from "@mcp-apps-kit/core";import { defineReactUI, buildAndTransform } from "@mcp-apps-kit/ui-react-builder";import { RestaurantList } from "./widgets/RestaurantList";import { z } from "zod";// Build and transform in one stepconst uis = await buildAndTransform({ "restaurant-list": defineReactUI({ component: RestaurantList, name: "Restaurant List", }),});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(z.unknown()) }), ui: uis["restaurant-list"], handler: async (input) => { // ... search logic return { restaurants: [] }; }, }), },});
@mcp-apps-kit/ui-react-builder
Build tool for React-based MCP application UIs.
This package allows you to define UI resources using React components instead of pre-built HTML files. The framework handles bundling React, ReactDOM, and @mcp-apps-kit/ui-react into self-contained HTML that works with both MCP Apps and ChatGPT.
Example: Basic usage
Example: With tool definition