Package Exports

@frontmcp/uipack
@frontmcp/uipack/adapters
@frontmcp/uipack/base-template
@frontmcp/uipack/bridge-runtime
@frontmcp/uipack/build
@frontmcp/uipack/bundler
@frontmcp/uipack/bundler/file-cache
@frontmcp/uipack/bundler/file-cache/storage
@frontmcp/uipack/dependency
@frontmcp/uipack/esm
@frontmcp/uipack/esm/adapters
@frontmcp/uipack/esm/base-template
@frontmcp/uipack/esm/bridge-runtime
@frontmcp/uipack/esm/build
@frontmcp/uipack/esm/bundler
@frontmcp/uipack/esm/bundler/file-cache
@frontmcp/uipack/esm/bundler/file-cache/storage
@frontmcp/uipack/esm/dependency
@frontmcp/uipack/esm/handlebars
@frontmcp/uipack/esm/registry
@frontmcp/uipack/esm/renderers
@frontmcp/uipack/esm/renderers/utils
@frontmcp/uipack/esm/runtime
@frontmcp/uipack/esm/runtime/adapters
@frontmcp/uipack/esm/styles
@frontmcp/uipack/esm/theme
@frontmcp/uipack/esm/theme/presets
@frontmcp/uipack/esm/tool-template
@frontmcp/uipack/esm/types
@frontmcp/uipack/esm/typings
@frontmcp/uipack/esm/typings/cache
@frontmcp/uipack/esm/utils
@frontmcp/uipack/esm/validation
@frontmcp/uipack/handlebars
@frontmcp/uipack/package.json
@frontmcp/uipack/registry
@frontmcp/uipack/renderers
@frontmcp/uipack/renderers/utils
@frontmcp/uipack/runtime
@frontmcp/uipack/runtime/adapters
@frontmcp/uipack/styles
@frontmcp/uipack/theme
@frontmcp/uipack/theme/presets
@frontmcp/uipack/tool-template
@frontmcp/uipack/types
@frontmcp/uipack/typings
@frontmcp/uipack/typings/cache
@frontmcp/uipack/utils
@frontmcp/uipack/validation

Readme

@frontmcp/uipack

React-free build utilities, theming, runtime helpers, and platform adapters for FrontMCP UI development. @frontmcp/uipack powers HTML string templates, cacheable widgets, and discovery metadata without pulling React or DOM libraries into your server.

Package Split

Package	Purpose	React Required
`@frontmcp/uipack`	Themes, runtime helpers, build/render pipelines, validation, adapters	No
`@frontmcp/ui`	HTML/React components, layouts, widgets, web components	Yes (peer dependency)

Install @frontmcp/uipack when you need HTML-first tooling, template validation, or platform adapters. Install @frontmcp/ui alongside it for ready-made components.

Installation

npm install @frontmcp/uipack
# or
yarn add @frontmcp/uipack

Features

Theme system – Configure Tailwind-style palettes, fonts, and CDN assets, then inline or externalize scripts per platform.
Build API – Compile tool templates with esbuild/SWC, emit static widgets, and ship cached manifests for serverless environments.
Runtime helpers – Wrap HTML/React/MDX templates with CSP, sanitize user content, and expose MCP Bridge metadata.
Platform adapters – Generate OpenAI/Claude/Gemini discovery metadata, resolve serving modes, and understand host capabilities.
Validation – Extract schema paths, validate Handlebars templates, and render error boxes before code hits production.
Bundler/cache – File-system and Redis caches, transpile/render caches, and hashing utilities for incremental builds.

Quick Start

Theme + layout utilities

import { DEFAULT_THEME, createTheme, buildCdnScriptsFromTheme } from '@frontmcp/uipack/theme';

const customTheme = createTheme({
  name: 'brand',
  colors: {
    semantic: {
      primary: '#0BA5EC',
      secondary: '#6366F1',
    },
  },
});

const scripts = await buildCdnScriptsFromTheme(customTheme, { inline: true });

Build tool UI HTML

import { buildToolUI } from '@frontmcp/uipack/build';

const result = await buildToolUI({
  template: '<div>{{output.temperature}} °C</div>',
  context: {
    input: { location: 'London' },
    output: { temperature: 18 },
  },
  platform: 'openai',
});

console.log(result.html);

Wrap tool responses with MCP metadata

import { wrapToolUI, createTemplateHelpers } from '@frontmcp/uipack/runtime';

The helpers = createTemplateHelpers();
const html = `<div>${helpers.escapeHtml(ctx.output.summary)}</div>`;

const response = wrapToolUI({
  html,
  displayMode: 'inline',
  servingMode: 'auto',
  widgetDescription: 'Summarized status card',
});

Resolve platform capabilities

import { getPlatform, canUseCdn, needsInlineScripts } from '@frontmcp/uipack/theme';

const claude = getPlatform('claude');
const inline = needsInlineScripts(claude);
const cdnOk = canUseCdn(claude);

Entry points

Path	Purpose
`@frontmcp/uipack/theme`	Theme system, platform definitions, CDN helpers
`@frontmcp/uipack/runtime`	MCP Bridge runtime, CSP utilities, sanitizers
`@frontmcp/uipack/build`	Build API, static widget compiler, serving-mode resolver
`@frontmcp/uipack/adapters`	Discovery metadata + platform adapters
`@frontmcp/uipack/pages`	Prebuilt page templates (consent/error/success)
`@frontmcp/uipack/validation`	Component + template validation helpers
`@frontmcp/uipack/bundler`	esbuild/SWC bundler and cache utilities
`@frontmcp/uipack/registry`	Tool UI registry, URI helpers, render functions
`@frontmcp/uipack/types`	Shared template/context types
`@frontmcp/uipack/utils`	Escaping, safe stringify, helper utilities

Template validation

import { validateTemplate } from '@frontmcp/uipack/validation';
import { z } from 'zod';

const outputSchema = z.object({
  temperature: z.number(),
  city: z.string(),
});

const result = validateTemplate('<div>{{output.city}}</div>', outputSchema);
if (!result valid) {
  console.warn(result.errors);
}

Cache + bundler helpers

import { createFilesystemBuilder } from '@frontmcp/uipack/bundler/file-cache';

const builder = await createFilesystemBuilder('.frontmcp-cache/builds');
const manifest = await builder.build({ entry: './widgets/weather.tsx' });

Development

yarn nx build uipack
yarn nx test uipack

@frontmcp/ui – Component library that consumes these helpers
@frontmcp/sdk – Core SDK and decorators
@frontmcp/testing – UI assertions for automated testing

License

Apache-2.0

@frontmcp/uipack

Package Exports

Readme

@frontmcp/uipack

Package Split

Installation

Features

Quick Start

Theme + layout utilities

Build tool UI HTML

Wrap tool responses with MCP metadata

Resolve platform capabilities

Entry points

Template validation

Cache + bundler helpers

Development

Related packages

License