Skip to main content

​
Overview

TypeBest ForFeatures
HTMLSimple widgets, server-renderedLightweight, no dependencies
ReactComplex UIs, component reuseFull React features, TypeScript
MDXDocumentation, mixed contentMarkdown + JSX, content-focused

​
Auto-Detection

The renderer automatically determines your template type: 
// HTML: Function returning string
template: (ctx) => `<div>${ctx.output.name}</div>`

// React: Imported component function
template: MyReactComponent

// MDX: String containing JSX tags
template: `# Title\n<Card>{output.name}</Card>`

​
Quick Comparison

ui: {
  template: (ctx) => `
    <div class="p-4 rounded-lg bg-white">
      <h2>${ctx.helpers.escapeHtml(ctx.output.title)}</h2>
      <p>${ctx.helpers.escapeHtml(ctx.output.body)}</p>
    </div>
  `,
}

​
Template Context

All templates receive the same context object: 
interface TemplateContext<In, Out> {
  // Tool input arguments
  input: In;

  // Tool output/result
  output: Out;

  // Parsed structured content (if outputSchema provided)
  structuredContent?: unknown;

  // Helper functions
  helpers: {
    escapeHtml: (str: string) => string;
    formatDate: (date: Date | string, format?: string) => string;
    formatCurrency: (amount: number, currency?: string) => string;
    uniqueId: (prefix?: string) => string;
    jsonEmbed: (data: unknown) => string;
  };
}

​
Accessing Context

template: (ctx) => {
  const { input, output, helpers } = ctx;
  return `<p>${helpers.escapeHtml(output.message)}</p>`;
}

​
Choosing a Template Type

  • You need maximum performance
  • Your widget is simple (no complex state)
  • You want zero additional dependencies
  • You’re comfortable with string templating
  • You need HTMX for server-driven updates
  • Your widget has complex interactivity
  • You want TypeScript type safety
  • You need client-side state management
  • You’re reusing existing React components
  • You want component composition
  • Your content is primarily text/documentation
  • You want Markdown formatting
  • You’re mixing prose with interactive components
  • You want easy content editing
  • Your team prefers Markdown

​
Rendering Process

Template → Renderer → HTML String → Platform Widget
         ↑
     Auto-detected
  1. Detection: FrontMCP analyzes your template to determine type
  2. Rendering: The appropriate renderer processes your template
  3. Output: All templates produce HTML strings
  4. Delivery: HTML is sent to the platform (OpenAI, Claude, etc.)

​
Server-Side vs Client-Side

By default, all templates render server-side (SSR):
  • HTML: String concatenation on server
  • React: react-dom/server renderToString
  • MDX: Compiled and rendered on server
For client-side interactivity, see Hydration.

​
Next Steps

HTML Templates

String-based templates with helpers

React Templates

Full React component support

MDX Templates

Markdown with embedded JSX

Custom Templates

Build your own template system