mcp-toolkit

Build an MCP server with @miragon/mcp-toolkit: a host via createFrameworkApp plus a module that registers its OWN tools and a widget. Use when asked to "build/create an MCP server", "stand up an MCP server with tools and a UI", "add a module with its own tools" (createToolRegistrar), "expose a tool plus a widget", wire an AppPlugin into createFrameworkApp, add an app-only *_data feed (APP_ONLY_META), write a show_* widget tool (buildSingleWidgetView / uiMeta), or bundle a widget into mcp-app.html. The worked example is the `tasks` module.

Build an MCP widget against @miragon/mcp-toolkit-ui. Use when asked to build a widget, render a tool result as UI, add a card/panel/dashboard for an MCP tool, write a *_show_* widget, or turn structuredContent into a React component in this repo. Encodes the data contract (tool result -> ViewStructuredContent -> data prop), the component catalog, host-portable authoring (useHostBridge), and the widget-playground iterate loop.

Compose a multi-widget view or build a pipeline with @miragon/mcp-toolkit. Use when asked to build a dashboard, compose/lay out several widgets in one view, write a multi-widget *_show_* tool, chain tool outputs through a multi-step pipeline, drive render-view, define a layout (rows/cells/span) or per-cell props, or decide between an eager view and a pipeline. The worked example is the `orders` module. Encodes the eager buildComposedView default, the advanced render-view pipeline, the requires/_dataType double contract, and the layout format.

Add a tool to an existing @miragon/mcp-toolkit MCP module. Use when asked to "add a tool", "expose X as a tool", "register a new MCP tool", write a new createToolRegistrar entry, set tool annotations (readOnly/idempotent/destructive hints), add an outputSchema, paginate a list tool, or add an app-only *_data feed (APP_ONLY_META) for a widget. For a whole new server/module use build-mcp-server; for the UI use build-mcp-widget.

White-label a client UI with the @miragon/mcp-toolkit theming system. Use when asked to "re-brand"/"white-label" a UI, apply a client's brand colours, set up createTheme / ThemeProvider / themePresets, support light/dark mode, theme a widget or app for a specific customer, or fix hard-coded colours that ignore the brand. The rule: use theme tokens (text-primary, bg-card, rounded-lg), never hard-coded colours.