@webmcp/react

React components for webMCP AI-optimized web interactions. Reduce form abandonment and optimize user experiences with intelligent AI-powered suggestions.

Features

• 🤖 AI-Powered Form Optimization - Reduce tokens by 67.6% for AI agent interactions
• 📊 Real-time Analytics - Track completion rates, token savings, and cost reductions
• 🛡️ Built-in Security - CSRF protection and JWT scoping
• ⚡ Smart Suggestions - AI-driven input completion and validation
• 📱 Responsive Design - Works seamlessly across all devices

Installation

npm install @webmcp/react @webmcp/core

Quick Start

import React from 'react';
import { WebMCPForm, WebMCPInput, WebMCPButton, useWebMCP } from '@webmcp/react';

function ContactForm() {
  const { analytics } = useWebMCP({
    targetModel: 'gpt-4o',
    compressionLevel: 'advanced'
  });

  const handleSubmit = (data: any) => {
    console.log('Form submitted:', data);
  };

  const handleOptimize = (result: any) => {
    console.log('AI optimization:', result);
  };

  return (
    <WebMCPForm
      onSubmit={handleSubmit}
      onOptimize={handleOptimize}
      goalDescription="Collect user contact information"
      enableAI={true}
    >
      <WebMCPInput
        name="name"
        placeholder="Your name"
        required
        aiSuggestions={true}
      />
      
      <WebMCPInput
        name="email"
        type="email"
        placeholder="[email protected]"
        required
        aiSuggestions={true}
      />
      
      <WebMCPInput
        name="phone"
        type="tel"
        placeholder="Phone number"
        aiSuggestions={true}
      />
      
      <WebMCPButton type="submit">
        Submit Contact Info
      </WebMCPButton>
    </WebMCPForm>
  );
}

Components

WebMCPForm

AI-optimized form wrapper that automatically processes submissions for better AI agent interactions.

<WebMCPForm
  onSubmit={handleSubmit}
  onOptimize={handleOptimize}
  config={{
    targetModel: 'gpt-4o',
    compressionLevel: 'advanced',
    enableAnalytics: true
  }}
  goalDescription="User registration form"
  enableAI={true}
>
  {/* Your form inputs */}
</WebMCPForm>

WebMCPInput

Smart input component with AI-powered suggestions and validation.

<WebMCPInput
  name="email"
  type="email"
  placeholder="Enter email"
  required
  aiSuggestions={true}
  webmcpRole="input.email"
  onChange={(value) => console.log(value)}
/>

WebMCPButton

Enhanced button component with webMCP semantic roles.

<WebMCPButton
  type="submit"
  webmcpRole="button.submit"
  onClick={handleClick}
>
  Submit Form
</WebMCPButton>

WebMCPAnalytics

Display real-time form performance analytics.

import { useWebMCP, WebMCPAnalytics } from '@webmcp/react';

function MyComponent() {
  const { analytics } = useWebMCP();
  
  return <WebMCPAnalytics analytics={analytics} />;
}

Hooks

useWebMCP

Main hook for accessing webMCP functionality.

const {
  optimizeForm,
  validateForm,
  generateAISuggestions,
  isOptimizing,
  analytics,
  processor
} = useWebMCP({
  targetModel: 'gpt-4o',
  compressionLevel: 'advanced',
  enableAnalytics: true
});

Configuration

Configure webMCP behavior through the config object:

const config = {
  apiKey: 'your-api-key', // Optional: for premium features
  targetModel: 'gpt-4o', // 'gpt-4o' | 'claude-3.5-sonnet' | 'gemini-pro'
  compressionLevel: 'advanced', // 'basic' | 'advanced' | 'premium'
  enableAnalytics: true,
  enableSecurity: true
};

Benefits

• Token Reduction: Average 67.6% reduction in AI processing tokens
• Better UX: Smart suggestions reduce form abandonment
• Cost Savings: Lower API costs for AI-powered applications
• Security: Built-in CSRF protection and secure data handling
• Analytics: Real-time insights into form performance

Real-World Use Cases

E-commerce Checkout

<WebMCPForm goalDescription="Complete purchase checkout">
  <WebMCPInput name="billing_address" aiSuggestions={true} />
  <WebMCPInput name="card_number" type="text" aiSuggestions={false} />
  <WebMCPButton type="submit">Complete Order</WebMCPButton>
</WebMCPForm>

User Registration

<WebMCPForm goalDescription="Create new user account">
  <WebMCPInput name="username" aiSuggestions={true} />
  <WebMCPInput name="email" type="email" aiSuggestions={true} />
  <WebMCPInput name="password" type="password" aiSuggestions={false} />
  <WebMCPButton type="submit">Create Account</WebMCPButton>
</WebMCPForm>

Lead Generation

<WebMCPForm goalDescription="Collect qualified sales leads">
  <WebMCPInput name="company" aiSuggestions={true} />
  <WebMCPInput name="industry" aiSuggestions={true} />
  <WebMCPInput name="budget" aiSuggestions={true} />
  <WebMCPButton type="submit">Get Quote</WebMCPButton>
</WebMCPForm>

TypeScript Support

Full TypeScript support with comprehensive type definitions:

import type { 
  WebMCPConfig, 
  WebMCPFormProps, 
  OptimizationResult,
  WebMCPAnalytics
} from '@webmcp/react';

Performance

• ⚡ Fast: Minimal overhead, client-side processing
• 🗄️ Cached: Intelligent caching reduces redundant processing
• 📦 Lightweight: Small bundle size, tree-shakeable
• 🔄 Optimized: Works with React 16.8+ and all modern browsers

License

MIT - see LICENSE for details.

Support

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions

webMCP React Components - Making forms smarter with AI 🤖✨