Components

import { ToolForm, useListTools, useCallTool } from '@frontmcp/react';

function ToolUI() {
  const tools = useListTools();
  const [callTool, { data }] = useCallTool(tools[0]?.name ?? '');

  if (!tools.length) return null;

  return (
    <ToolForm
      tool={tools[0]}
      onSubmit={(args) => callTool(args)}
      submitLabel="Execute"
    />
  );
}

<ToolForm
  tool={tool}
  onSubmit={handleSubmit}
  renderField={({ name, type, required, value, onChange, description }) => (
    <div key={name}>
      <label>{name}{required ? ' *' : ''}</label>
      <input value={value} onChange={(e) => onChange(e.target.value)} />
      {description && <small>{description}</small>}
    </div>
  )}
/>

import { PromptForm, useListPrompts, useGetPrompt } from '@frontmcp/react';

function PromptUI() {
  const prompts = useListPrompts();
  const [getPrompt, { data }] = useGetPrompt(prompts[0]?.name ?? '');

  if (!prompts.length) return null;

  return <PromptForm prompt={prompts[0]} onSubmit={(args) => getPrompt(args)} />;
}

import { ResourceViewer, useReadResource } from '@frontmcp/react';

function ConfigViewer() {
  const { data, loading, error } = useReadResource('app://config');

  return <ResourceViewer data={data} loading={loading} error={error} />;
}

import { OutputDisplay, useCallTool } from '@frontmcp/react';

function ToolOutput() {
  const [callTool, { data, loading, error }] = useCallTool('greet');

  return (
    <div>
      <button onClick={() => callTool({ name: 'World' })}>Call</button>
      <OutputDisplay data={data} loading={loading} error={error} />
    </div>
  );
}

import { DynamicRenderer } from '@frontmcp/react';

const tree = {
  type: 'Card',
  props: { title: 'Hello' },
  children: [
    { type: 'Text', children: 'World' },
  ],
};

<DynamicRenderer tree={tree} registry={registry} fallback={DefaultComponent} />

import { ComponentRegistry } from '@frontmcp/react';

const registry = new ComponentRegistry();
registry.register('component://Card', CardComponent);
registry.register('element://Badge', BadgeComponent);

// Resolve by short name
const Card = registry.resolve('Card'); // finds component://Card

// List all entries
const entries = registry.list(); // [{ uri, name, description }]

import { AgentContent } from '@frontmcp/react';

<AgentContent
  name="show_weather"
  description="Display weather data"
  render={(data) => <WeatherCard city={data.city} temp={data.temp} />}
  fallback={<p>Waiting for data...</p>}
/>

import { AgentSearch } from '@frontmcp/react';

<AgentSearch
  toolName="product_search"
  description="Search products"
  placeholder="Search..."
  onResults={setResults}
  renderInput={({ value, onChange, placeholder }) => (
    <input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />
  )}
/>