@frontmcp/ui

Platform-aware UI toolkit for building HTML widgets, React components, and web components inside MCP transports.

Package Split

| Package | Purpose | React Required | | ------------------ | --------------------------------------------------------------- | -------------- | | @frontmcp/ui | HTML components, React components/hooks, SSR renderers | Yes (peer dep) | | @frontmcp/uipack | Themes, build/render pipelines, runtime helpers, template types | No |

Install

npm install @frontmcp/ui @frontmcp/uipack react react-dom

Features

• HTML-first components — buttons, cards, badges, alerts, forms, tables, layouts that return ready-to-stream HTML (docs)
• React components — Button, Card, Alert, Badge with TypeScript props (docs)
• MCP Bridge hooks — useMcpBridge, useCallTool, useToolInput, useToolOutput (docs)
• SSR + hydration — ReactRenderer for server-side rendering, ReactRendererAdapter for client hydration (docs)
• MDX rendering — server-side MDX-to-HTML with component resolution (docs)
• Web components — <fmcp-button>, <fmcp-card>, and friends as custom elements (docs)
• Universal app shell — FrontMCPProvider + UniversalApp for platform-agnostic React apps (docs)
• SSR bundling — InMemoryBundler for component compilation (docs)

Quick Example

import { card, button } from '@frontmcp/ui/components';
import { baseLayout } from '@frontmcp/ui/layouts';
import { DEFAULT_THEME } from '@frontmcp/uipack/theme';

const html = baseLayout(card(`<h2>Hello</h2>${button('Submit', { variant: 'primary' })}`, { variant: 'elevated' }), {
  title: 'My Widget',
  theme: DEFAULT_THEME,
});

Full guide: UI Overview

Entry Points

| Path | Exports | | ----------------------------- | ------------------------------------- | | @frontmcp/ui/components | HTML components, helpers, error boxes | | @frontmcp/ui/layouts | Base layouts, consent/error templates | | @frontmcp/ui/pages | High-level page templates | | @frontmcp/ui/widgets | OpenAI App SDK-style widgets | | @frontmcp/ui/react | React components + hooks | | @frontmcp/ui/renderers | ReactRenderer, MdxRenderer, adapters | | @frontmcp/ui/render | React 19 static rendering utilities | | @frontmcp/ui/web-components | <fmcp-*> custom elements | | @frontmcp/ui/bridge | Bridge registry + adapters | | @frontmcp/ui/bundler | SSR/component bundler |

Docs

| Topic | Link | | ---------------- | ------------------------------------- | | Overview | UI Overview | | HTML components | Components | | React components | React | | MCP Bridge hooks | Hooks | | SSR rendering | SSR | | MDX rendering | MDX | | Web components | Web Components | | Universal app | Universal App | | Bundling | Bundling |

Related Packages

• @frontmcp/uipack — React-free themes, runtime helpers, build tooling
• @frontmcp/sdk — core framework
• @frontmcp/testing — UI assertions (toHaveRenderedHtml, toBeXssSafe)

License

Apache-2.0 — see LICENSE.