MCPNEW

McpToolForm

JSON Schema → dynamic form with validation.

Available inreact

Preview

Live previewreal component

Install

TerminalBash

$ npx @mcp-elements/cli add mcp-tool-form

Usage

mcp-tool-form-example.tsxTSX

import { McpToolForm } from '@mcp-elements/react'

const schema = {
  type: 'object',
  properties: {
    query: { type: 'string', description: 'Search query' },
    limit: { type: 'number', default: 10, description: 'Max results' },
  },
  required: ['query'],
}

export function Example() {
  return (
    <McpToolForm
      schema={schema}
      onSubmit={(values) => console.log(values)}
      submitLabel="Search"
    />
  )
}

Props

Prop	Type	Default	Description
`schema *`	`JSONSchema7`	—	JSON Schema object that drives the form fields
`onSubmit *`	`(values: Record<string, unknown>) => void`	—	Called with validated form values on submit
`submitLabel`	`string`	`'Run'`	Label text for the submit button
`loading`	`boolean`	`false`	Disables the form and shows a spinner on the button