webMCP

@webmcp/react

React Component Library

AI-optimized React components with 67.6% token reduction. Smart form components with real-time suggestions, built-in analytics, and comprehensive TypeScript support for modern web applications.

12.5K+
Downloads
3.1K
GitHub Stars
4
Components
67.6%
Token Reduction

Quick Install

npm install @webmcp/react
View on GitHubLive Demo

Available Components

Four powerful React components for AI-optimized form interactions

WebMCPForm

AI-optimized form wrapper with 67.6% token reduction

Key Props:

goalDescriptiontargetModelcompressionLevelonOptimize

WebMCPInput

Smart input with real-time AI suggestions for email, name, phone

Key Props:

nametypeaiSuggestionswebmcpRolevalidation

WebMCPButton

Enhanced button with semantic role mapping for AI agents

Key Props:

typewebmcpRolepriorityonClick

WebMCPAnalytics

Real-time analytics dashboard showing optimization metrics

Key Props:

showChartstimeframemetricsexportEnabled

Why Choose @webmcp/react?

Built specifically for React developers who want AI optimization without complexity

Real-time AI Suggestions

Smart auto-completion for email, name, and phone fields as users type

Built-in Analytics

Track token savings, cost reductions, and form completion rates

TypeScript Support

Complete type definitions and IntelliSense for better development

Security Built-in

CSRF protection and JWT scoping included out of the box

Code Examples

See how easy it is to add AI optimization to your React forms

Basic Contact Form

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

function ContactForm() {
  return (
    <WebMCPForm goalDescription="Collect contact information">
      <WebMCPInput 
        name="name" 
        placeholder="Your Name"
        aiSuggestions={true} 
      />
      <WebMCPInput 
        name="email" 
        type="email"
        placeholder="your@email.com"
        aiSuggestions={true} 
      />
      <WebMCPInput 
        name="phone" 
        type="tel"
        placeholder="Phone Number"
        aiSuggestions={true} 
      />
      <WebMCPButton type="submit">
        Send Message
      </WebMCPButton>
    </WebMCPForm>
  );
}

Advanced Form with Analytics

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

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

  const handleSubmit = async (formData: FormData) => {
    const optimized = await optimize(formData);
    console.log(`Saved ${optimized.tokenReduction}% tokens`);
  };

  return (
    <div>
      <WebMCPForm 
        goalDescription="User registration with validation"
        onSubmit={handleSubmit}
      >
        <WebMCPInput 
          name="username" 
          webmcpRole="input.username"
          validation={{ required: true, minLength: 3 }}
          aiSuggestions={true}
        />
        <WebMCPInput 
          name="email" 
          type="email"
          webmcpRole="input.email"
          validation={{ required: true, pattern: 'email' }}
          aiSuggestions={true}
        />
        <WebMCPButton 
          type="submit"
          webmcpRole="button.submit"
          priority="high"
        >
          Register
        </WebMCPButton>
      </WebMCPForm>

      <WebMCPAnalytics 
        showCharts={true}
        metrics={['token_savings', 'cost_reduction', 'completion_rate']}
        timeframe="7d"
      />
    </div>
  );
}

Custom Hook Usage

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

function CustomForm() {
  const { 
    analytics, 
    optimize, 
    getSuggestions,
    isOptimizing 
  } = useWebMCP({
    targetModel: 'claude-3.5-sonnet',
    compressionLevel: 'premium',
    apiKey: process.env.REACT_APP_WEBMCP_KEY
  });

  const handleOptimize = async () => {
    const elements = document.querySelectorAll('[data-webmcp-role]');
    const result = await optimize(elements);
    
    return {
      originalTokens: result.original_tokens,
      optimizedTokens: result.optimized_tokens,
      savings: result.token_reduction,
      costSavings: result.cost_savings
    };
  };

  return (
    <div>
      {isOptimizing && <div>Optimizing form...</div>}
      <p>Current savings: {analytics.totalSavings}%</p>
      <button onClick={handleOptimize}>
        Optimize Form
      </button>
    </div>
  );
}

Build Smarter React Forms Today

Add AI optimization to your React app with just a few lines of code

Get StartedView Demo