Form Filling Tool

Create a tool that fills form fields—one of the most common use cases.

The Pattern

Select DOM elements
Set their values
Dispatch input events (for React reactivity)
Return success/failure

Example: Contact Form Tool

import { useWebMCP } from '@mcp-b/react-webmcp';
import { z } from 'zod';

function useContactFormTool() {
  useWebMCP({
    name: 'fill_contact_form',
    description: 'Fill out the contact form with user information',
    inputSchema: {
      name: z.string().describe('Full name'),
      email: z.string().email().describe('Email address'),
      message: z.string().describe('Message content'),
    },
    handler: async ({ name, email, message }) => {
      const nameInput = document.querySelector<HTMLInputElement>('#name');
      const emailInput = document.querySelector<HTMLInputElement>('#email');
      const messageInput = document.querySelector<HTMLTextAreaElement>('#message');

      if (!nameInput || !emailInput || !messageInput) {
        return { success: false, error: 'Form fields not found' };
      }

      // Set values and trigger events
      [
        [nameInput, name],
        [emailInput, email],
        [messageInput, message],
      ].forEach(([el, value]) => {
        (el as HTMLInputElement).value = value as string;
        el.dispatchEvent(new Event('input', { bubbles: true }));
      });

      return { success: true, message: 'Form filled successfully' };
    },
  });
}

Important: Event Dispatching

React doesn’t detect direct .value changes. Dispatch events:

el.dispatchEvent(new Event('input', { bubbles: true }));

Try it

The app has a contact form. Create a tool to fill it, then ask the agent to fill it with test data.

Wrap Existing UI Logic

Reading Data

Files

Preparing Environment

npm install
npm run dev