Live WebMCP Tool Examples

export const CalculatorTool = () => {
  const [isRegistered, setIsRegistered] = useState(false);
  const [toolCalls, setToolCalls] = useState([]);

  useEffect(() => {
    const registerTool = async () => {
      if (!window.navigator?.modelContext) return;

      await window.navigator.modelContext.registerTool({
        name: 'calculator',
        description: 'Performs mathematical calculations',
        inputSchema: {
          type: 'object',
          properties: {
            expression: {
              type: 'string',
              description: 'Mathematical expression to evaluate',
            },
          },
          required: ['expression'],
        },
        handler: async ({ expression }) => {
          const result = Function(`"use strict"; return (${expression})`)();

          return {
            content: [{
              type: 'text',
              text: `The result of ${expression} is ${result}`,
            }],
          };
        },
      });

      setIsRegistered(true);
    };

    registerTool();
  }, []);

  // ... UI implementation
};

// Converts HEX colors to RGB and HSL formats
export const ColorConverterTool = () => {
  useEffect(() => {
    const registerTool = async () => {
      if (!window.navigator?.modelContext) return;

      await window.navigator.modelContext.registerTool({
        name: 'color_converter',
        description: 'Converts HEX colors to RGB and HSL formats. Input must be in HEX format.',
        inputSchema: {
          type: 'object',
          properties: {
            color: {
              type: 'string',
              description: 'Color in HEX format (e.g., "#3b82f6" or "3b82f6"). Must be a valid HEX color code.'
            },
            outputFormat: {
              type: 'string',
              enum: ['rgb', 'hsl', 'all'],
              description: 'Desired output format (rgb, hsl, or all)',
              default: 'all'
            }
          },
          required: ['color']
        },
        handler: async ({ color, outputFormat = 'all' }) => {
          // Conversion logic here
        }
      });
    };
    registerTool();
  }, []);
};

// Manages browser localStorage with set, get, and list operations
export const StorageTool = () => {
  useEffect(() => {
    const registerTools = async () => {
      if (!window.navigator?.modelContext) return;

      // Registers multiple tools: storage_set, storage_get, storage_list
      await Promise.all([
        window.navigator.modelContext.registerTool({
          name: 'storage_set',
          description: 'Store a key-value pair in localStorage',
          // ... implementation
        }),
        window.navigator.modelContext.registerTool({
          name: 'storage_get',
          description: 'Retrieve a value from localStorage',
          // ... implementation
        }),
        window.navigator.modelContext.registerTool({
          name: 'storage_list',
          description: 'List all items in localStorage',
          // ... implementation
        })
      ]);
    };
    registerTools();
  }, []);
};

// Queries page elements using CSS selectors
export const DOMQueryTool = () => {
  useEffect(() => {
    const registerTool = async () => {
      if (!window.navigator?.modelContext) return;

      await window.navigator.modelContext.registerTool({
        name: 'dom_query',
        description: 'Query page elements using CSS selectors',
        inputSchema: {
          type: 'object',
          properties: {
            selector: { type: 'string', description: 'CSS selector (e.g., "h1", ".class", "#id")' }
          },
          required: ['selector']
        },
        handler: async ({ selector }) => {
          const elements = document.querySelectorAll(selector);
          return {
            content: [{
              type: 'text',
              text: `Found ${elements.length} elements matching "${selector}"`
            }]
          };
        }
      });
    };
    registerTool();
  }, []);
};