@frontmcp/ui

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

Package Split

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

Docs

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.