Record of UI keys to ReactUIDef or UIDef
Result from buildReactUIs containing compiled HTML
Record of UI keys to standard UIDefs
import { buildReactUIs, transformToCoreDefs, defineReactUI } from "@mcp-apps-kit/ui-react-builder";
import { defineUI, createApp, defineTool } from "@mcp-apps-kit/core";
import { MyWidget } from "./widgets/MyWidget";
// Define a mix of React and standard UIs
const uis = {
"react-widget": defineReactUI({
component: MyWidget,
name: "My Widget",
}),
"html-widget": defineUI({
html: "./widget.html",
name: "HTML Widget",
}),
};
// Build React UIs
const buildResult = await buildReactUIs({
"react-widget": uis["react-widget"] as ReactUIDef,
});
// Transform all to core format
const coreDefs = transformToCoreDefs(uis, buildResult);
// Now use with createApp
const app = createApp({
name: "my-app",
version: "1.0.0",
tools: {
myTool: defineTool({
// ... tool definition
ui: coreDefs["react-widget"],
}),
},
});
Transform React UI definitions to standard core UIDefs.
This function takes a mix of React UIs and standard UIs, and converts all React UIs to standard UIDefs using the build result. Standard UIDefs pass through unchanged.
Use this after calling
buildReactUIsto get definitions that can be passed directly tocreateApp.