> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentfront.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Pre-built headless form and display components for @frontmcp/react

`@frontmcp/react` includes headless UI components that auto-generate forms from MCP tool/prompt schemas and display results. They render unstyled by default and support custom renderers.

## ToolForm

Generates a form from a tool's `inputSchema`.

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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"
    />
  );
}
```

### Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `tool` | `ToolInfo` | — | **Required.** Tool definition with `inputSchema` |
| `onSubmit` | `(args: Record<string, unknown>) => void` | — | **Required.** Called with parsed form values |
| `renderField` | `(props: FieldRenderProps) => ReactNode` | — | Custom field renderer |
| `submitLabel` | `string` | `'Call Tool'` | Submit button text |

### Custom Field Rendering

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
<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>
  )}
/>
```

### FieldRenderProps

| Field | Type | Description |
| - | - | - |
| `name` | `string` | Field name from schema |
| `type` | `string` | `'string' \| 'number' \| 'integer' \| 'boolean' \| 'enum'` |
| `required` | `boolean` | Whether the field is required |
| `description` | `string?` | Schema description |
| `enumValues` | `string[]?` | Enum options (renders `<select>`) |
| `value` | `string` | Current value |
| `onChange` | `(value: string) => void` | Change handler |

***

## PromptForm

Generates a form from a prompt's `arguments` array.

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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)} />;
}
```

### Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `prompt` | `PromptInfo` | — | **Required.** Prompt definition with `arguments` |
| `onSubmit` | `(args: Record<string, string>) => void` | — | **Required.** Called with form values |
| `renderField` | `(props: FieldRenderProps) => ReactNode` | — | Custom field renderer |
| `submitLabel` | `string` | `'Get Prompt'` | Submit button text |

***

## ResourceViewer

Displays the contents of a `ReadResourceResult`.

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import { ResourceViewer, useReadResource } from '@frontmcp/react';

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

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

### Props

| Prop | Type | Description |
| - | - | - |
| `data` | `{ contents?: ResourceContent[] } \| null` | Resource result |
| `loading` | `boolean` | Show loading indicator |
| `error` | `Error \| null` | Show error message |

JSON content (`application/json` mimeType) is automatically pretty-printed in a `<pre>` block.

***

## OutputDisplay

Renders any tool/prompt output as formatted JSON or plain text.

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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>
  );
}
```

### Props

| Prop | Type | Description |
| - | - | - |
| `data` | `unknown` | Output value — objects are JSON-stringified |
| `loading` | `boolean` | Show loading indicator |
| `error` | `Error \| null` | Show error message |

***

## DynamicRenderer

Recursively renders a `ComponentNode` tree using the `ComponentRegistry`.

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import { DynamicRenderer } from '@frontmcp/react';

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

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

### Resolution Order

1. Exact URI match in registry
2. `component://{type}` in registry
3. `element://{type}` in registry
4. Fallback component (or `<div>`)

***

## ComponentRegistry

Maps URI protocols to React components. Used by `DynamicRenderer` and populated via the provider's `components` prop.

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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 }]
```

***

## Deprecated: AgentContent and AgentSearch

These components are deprecated. Use `mcpComponent()` instead — see [Agent Components](/frontmcp/react/agent-components) for full details, props, and migration.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.