McpToolForm

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"
    />
  )
}

import { Component } from '@angular/core'
import { McpeMcpToolFormComponent } from '@mcp-elements/angular'
import type { JsonSchema } from '@mcp-elements/core'

@Component({
  selector: 'app-tool-form-example',
  standalone: true,
  imports: [McpeMcpToolFormComponent],
  template: `<mcpe-mcp-tool-form [schema]="schema" submitLabel="Search" (onSubmit)="run($event)" />`,
})
export class ToolFormExampleComponent {
  schema: JsonSchema = {
    type: 'object',
    properties: {
      query: { type: 'string', description: 'Search query' },
      limit: { type: 'number', default: 10, description: 'Max results' },
    },
    required: ['query'],
  }
  run(values: Record<string, unknown>) {
    console.log(values)
  }
}

<script setup lang="ts">
import { McpeMcpToolForm } from '@mcp-elements/vue'
import type { JsonSchema } from '@mcp-elements/core'

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

function run(values: Record<string, unknown>) {
  console.log(values)
}
</script>

<template>
  <McpeMcpToolForm :schema="schema" submit-label="Search" @submit="run" />
</template>