webMCP is an AI web interaction optimization toolkit that reduces token usage by 67.6% on average while maintaining response quality. It provides tools for JavaScript, Python, React, and WordPress.

How much can I save with webMCP?

webMCP typically reduces AI token usage by 65-75%, resulting in significant cost savings. Our case studies show savings of $15K+ per month for high-volume applications.

Which AI models does webMCP support?

webMCP supports all major AI models including GPT-4, GPT-4o, Claude 3.5 Sonnet, Gemini Pro, and more. It automatically optimizes for your target model.

Your First Form

Step-by-step guide to creating, optimizing, and deploying your first webMCP-powered form. Complete tutorial from setup to production.

Estimated time: 35 minutes

Quick Start Guide

Follow these steps to create your first optimized form with webMCP

5 minutes

Setup Your Environment

Install webMCP and configure your first project

Install webMCP via npm or pip
Create a new project directory
Initialize webMCP configuration
Set up your AI model API keys

10 minutes

Create Your HTML Form

Build a sample form to optimize with webMCP

Create a basic HTML form
Add form fields and validation
Include webMCP attributes
Test form functionality

5 minutes

Process with webMCP

Run your first optimization and see the results

Process the form with webMCP
Review optimization results
Analyze token reduction
Export optimized form

15 minutes

Integration & Deployment

Integrate optimized form into your application

Replace original form with optimized version
Test in your application
Configure analytics tracking
Deploy to production

Step-by-Step Implementation

Complete code examples and detailed instructions for each step

Installation

Install webMCP in your preferred environment

# Install webMCP core package
npm install @webmcp/core

# Install CLI tools (optional)
npm install -g @webmcp/cli

# Verify installation
webmcp --version

# Install webMCP for Python
pip install webmcp-core

# Install CLI tools (optional)
pip install webmcp-cli

# Verify installation
webmcp --version

# Install webMCP core package
yarn add @webmcp/core

# Install CLI tools globally
yarn global add @webmcp/cli

# Verify installation
webmcp --version

Configuration Setup

Initialize webMCP configuration file

// webmcp.config.js
export default {
  // API configuration
  apiKeys: {
    openai: process.env.OPENAI_API_KEY,
    anthropic: process.env.ANTHROPIC_API_KEY,
    google: process.env.GOOGLE_API_KEY
  },
  
  // Default optimization settings
  optimization: {
    targetModel: 'gpt-4o',
    aggressiveness: 'moderate',
    preserveSemantics: true,
    minTokenReduction: 30
  },
  
  // Output configuration
  output: {
    format: 'html',
    preserveFormatting: true,
    addComments: true,
    generateReport: true
  },
  
  // Analytics settings
  analytics: {
    enabled: true,
    trackTokenUsage: true,
    trackPerformance: true
  }
};

# webmcp_config.py
import os

CONFIG = {
    # API configuration
    'api_keys': {
        'openai': os.getenv('OPENAI_API_KEY'),
        'anthropic': os.getenv('ANTHROPIC_API_KEY'),
        'google': os.getenv('GOOGLE_API_KEY')
    },
    
    # Default optimization settings
    'optimization': {
        'target_model': 'gpt-4o',
        'aggressiveness': 'moderate',
        'preserve_semantics': True,
        'min_token_reduction': 30
    },
    
    # Output configuration
    'output': {
        'format': 'html',
        'preserve_formatting': True,
        'add_comments': True,
        'generate_report': True
    },
    
    # Analytics settings
    'analytics': {
        'enabled': True,
        'track_token_usage': True,
        'track_performance': True
    }
}

Sample HTML Form

Create your first form with webMCP attributes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form - webMCP Example</title>
</head>
<body>
    <!-- webMCP optimized contact form -->
    <form id="contact-form" data-webmcp-optimize="true" data-webmcp-target="gpt-4o">
        
        <!-- Personal Information Section -->
        <fieldset data-webmcp-section="personal">
            <legend>Personal Information</legend>
            
            <div class="form-group" data-webmcp-field="name">
                <label for="fullName" data-webmcp-label="user-name">
                    Full Name *
                </label>
                <input 
                    type="text" 
                    id="fullName" 
                    name="fullName"
                    data-webmcp-input="text-required"
                    data-webmcp-validate="name"
                    placeholder="Enter your full name"
                    required
                    aria-describedby="name-help"
                >
                <small id="name-help" data-webmcp-help="name-format">
                    Please enter your first and last name
                </small>
            </div>
            
            <div class="form-group" data-webmcp-field="email">
                <label for="email" data-webmcp-label="user-email">
                    Email Address *
                </label>
                <input 
                    type="email" 
                    id="email" 
                    name="email"
                    data-webmcp-input="email-required"
                    data-webmcp-validate="email"
                    placeholder="your.email@example.com"
                    required
                    aria-describedby="email-help"
                >
                <small id="email-help" data-webmcp-help="email-format">
                    We'll never share your email with anyone else
                </small>
            </div>
        </fieldset>
        
        <!-- Contact Preferences -->
        <fieldset data-webmcp-section="preferences">
            <legend>Contact Preferences</legend>
            
            <div class="form-group" data-webmcp-field="contact-method">
                <label data-webmcp-label="contact-preference">
                    Preferred Contact Method
                </label>
                
                <div class="radio-group" data-webmcp-input="radio-group">
                    <input type="radio" id="contact-email" name="contactMethod" value="email" 
                           data-webmcp-option="email" checked>
                    <label for="contact-email">Email</label>
                    
                    <input type="radio" id="contact-phone" name="contactMethod" value="phone"
                           data-webmcp-option="phone">
                    <label for="contact-phone">Phone</label>
                    
                    <input type="radio" id="contact-both" name="contactMethod" value="both"
                           data-webmcp-option="both">
                    <label for="contact-both">Both</label>
                </div>
            </div>
            
            <div class="form-group" data-webmcp-field="phone" data-webmcp-conditional="phone,both">
                <label for="phone" data-webmcp-label="user-phone">
                    Phone Number
                </label>
                <input 
                    type="tel" 
                    id="phone" 
                    name="phone"
                    data-webmcp-input="tel-optional"
                    data-webmcp-validate="phone"
                    placeholder="(555) 123-4567"
                    aria-describedby="phone-help"
                >
                <small id="phone-help" data-webmcp-help="phone-format">
                    Include area code for faster response
                </small>
            </div>
        </fieldset>
        
        <!-- Message Section -->
        <fieldset data-webmcp-section="message">
            <legend>Your Message</legend>
            
            <div class="form-group" data-webmcp-field="subject">
                <label for="subject" data-webmcp-label="message-subject">
                    Subject *
                </label>
                <select 
                    id="subject" 
                    name="subject"
                    data-webmcp-input="select-required"
                    data-webmcp-validate="required"
                    required
                    aria-describedby="subject-help"
                >
                    <option value="" data-webmcp-option="default">Select a subject</option>
                    <option value="general" data-webmcp-option="general">General Inquiry</option>
                    <option value="support" data-webmcp-option="support">Technical Support</option>
                    <option value="sales" data-webmcp-option="sales">Sales Question</option>
                    <option value="feedback" data-webmcp-option="feedback">Feedback</option>
                    <option value="other" data-webmcp-option="other">Other</option>
                </select>
                <small id="subject-help" data-webmcp-help="subject-selection">
                    Choose the category that best describes your inquiry
                </small>
            </div>
            
            <div class="form-group" data-webmcp-field="message">
                <label for="message" data-webmcp-label="message-content">
                    Message *
                </label>
                <textarea 
                    id="message" 
                    name="message"
                    data-webmcp-input="textarea-required"
                    data-webmcp-validate="required"
                    placeholder="Please describe your inquiry in detail..."
                    rows="6"
                    required
                    aria-describedby="message-help"
                ></textarea>
                <small id="message-help" data-webmcp-help="message-guidance">
                    Provide as much detail as possible for a faster response
                </small>
            </div>
        </fieldset>
        
        <!-- Submit Section -->
        <fieldset data-webmcp-section="submit">
            <div class="form-group" data-webmcp-field="consent">
                <div class="checkbox-group" data-webmcp-input="checkbox-group">
                    <input type="checkbox" id="newsletter" name="newsletter" value="yes"
                           data-webmcp-option="newsletter">
                    <label for="newsletter">Subscribe to our newsletter for updates</label>
                    
                    <input type="checkbox" id="terms" name="terms" value="accepted"
                           data-webmcp-option="terms" required>
                    <label for="terms">I agree to the Terms of Service and Privacy Policy *</label>
                </div>
            </div>
            
            <div class="form-actions" data-webmcp-actions="true">
                <button 
                    type="submit" 
                    data-webmcp-submit="primary"
                    data-webmcp-action="submit-form"
                    class="btn-primary"
                >
                    Send Message
                </button>
                
                <button 
                    type="reset" 
                    data-webmcp-reset="secondary"
                    data-webmcp-action="reset-form"
                    class="btn-secondary"
                >
                    Clear Form
                </button>
            </div>
        </fieldset>
    </form>
</body>
</html>

Process the Form

Run webMCP optimization on your form

# Process single form file
webmcp optimize contact-form.html --output optimized-form.html

# Process with specific model
webmcp optimize contact-form.html --model gpt-4o --output optimized/

# Process with analytics
webmcp optimize contact-form.html --analytics --report

# Batch process multiple forms
webmcp optimize forms/*.html --output optimized/ --parallel

# Process with custom configuration
webmcp optimize contact-form.html --config webmcp.config.js --verbose

import { WebMCPProcessor } from '@webmcp/core';
import fs from 'fs';

async function processFirstForm() {
  // Initialize processor
  const processor = new WebMCPProcessor({
    apiKey: process.env.OPENAI_API_KEY,
    model: 'gpt-4o',
    analytics: true
  });
  
  try {
    // Read the HTML form
    const htmlContent = fs.readFileSync('contact-form.html', 'utf8');
    
    // Process the form
    console.log('Processing form...');
    const result = await processor.optimize(htmlContent, {
      aggressiveness: 'moderate',
      preserveSemantics: true,
      generateReport: true
    });
    
    // Save optimized form
    fs.writeFileSync('optimized-form.html', result.optimizedHtml);
    
    // Display results
    console.log('Optimization Results:');
    console.log(`Original tokens: ${result.originalTokens}`);
    console.log(`Optimized tokens: ${result.optimizedTokens}`);
    console.log(`Reduction: ${result.reductionPercentage}%`);
    console.log(`Cost savings: $${result.costSavings}`);
    
    // Save detailed report
    if (result.report) {
      fs.writeFileSync('optimization-report.json', 
        JSON.stringify(result.report, null, 2));
      console.log('Detailed report saved to optimization-report.json');
    }
    
    return result;
    
  } catch (error) {
    console.error('Optimization failed:', error.message);
    throw error;
  }
}

// Run the optimization
processFirstForm()
  .then(result => {
    console.log('Form optimization completed successfully!');
  })
  .catch(error => {
    console.error('Failed to optimize form:', error);
  });

from webmcp_core import WebMCPProcessor
import json
import os

def process_first_form():
    """Process your first form with webMCP"""
    
    # Initialize processor
    processor = WebMCPProcessor(
        api_key=os.getenv('OPENAI_API_KEY'),
        model='gpt-4o',
        analytics=True
    )
    
    try:
        # Read the HTML form
        with open('contact-form.html', 'r', encoding='utf-8') as f:
            html_content = f.read()
        
        # Process the form
        print('Processing form...')
        result = processor.optimize(html_content, 
            aggressiveness='moderate',
            preserve_semantics=True,
            generate_report=True
        )
        
        # Save optimized form
        with open('optimized-form.html', 'w', encoding='utf-8') as f:
            f.write(result.optimized_html)
        
        # Display results
        print('Optimization Results:')
        print(f'Original tokens: {result.original_tokens}')
        print(f'Optimized tokens: {result.optimized_tokens}')
        print(f'Reduction: {result.reduction_percentage}%')
        print(f'Cost savings: ${result.cost_savings}')
        
        # Save detailed report
        if result.report:
            with open('optimization-report.json', 'w') as f:
                json.dump(result.report, f, indent=2)
            print('Detailed report saved to optimization-report.json')
        
        return result
        
    except Exception as error:
        print(f'Optimization failed: {error}')
        raise error

if __name__ == '__main__':
    try:
        result = process_first_form()
        print('Form optimization completed successfully!')
    except Exception as error:
        print(f'Failed to optimize form: {error}')

Integration Example

Integrate the optimized form into your application

import React, { useState, useEffect } from 'react';
import { WebMCPTracker } from '@webmcp/react';

function OptimizedContactForm() {
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    contactMethod: 'email',
    phone: '',
    subject: '',
    message: '',
    newsletter: false,
    terms: false
  });
  
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState(null);
  
  // Initialize webMCP tracking
  useEffect(() => {
    WebMCPTracker.initialize({
      formId: 'contact-form',
      trackInteractions: true,
      trackPerformance: true
    });
  }, []);
  
  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
    
    // Track field interactions
    WebMCPTracker.trackFieldInteraction(name, value);
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    try {
      // Track form submission start
      WebMCPTracker.trackEvent('form_submission_started');
      
      // Submit form data
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
      });
      
      if (response.ok) {
        setSubmitStatus('success');
        WebMCPTracker.trackConversion('contact_form_submitted', {
          subject: formData.subject,
          contactMethod: formData.contactMethod
        });
        
        // Reset form
        setFormData({
          fullName: '',
          email: '',
          contactMethod: 'email',
          phone: '',
          subject: '',
          message: '',
          newsletter: false,
          terms: false
        });
      } else {
        throw new Error('Submission failed');
      }
    } catch (error) {
      setSubmitStatus('error');
      WebMCPTracker.trackEvent('form_submission_failed', {
        error: error.message
      });
    } finally {
      setIsSubmitting(false);
    }
  };
  
  return (
    <form onSubmit={handleSubmit} className="optimized-contact-form">
      {/* Personal Information */}
      <fieldset>
        <legend>Personal Information</legend>
        
        <div className="form-group">
          <label htmlFor="fullName">Full Name *</label>
          <input
            type="text"
            id="fullName"
            name="fullName"
            value={formData.fullName}
            onChange={handleInputChange}
            placeholder="Enter your full name"
            required
          />
        </div>
        
        <div className="form-group">
          <label htmlFor="email">Email Address *</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            placeholder="your.email@example.com"
            required
          />
        </div>
      </fieldset>
      
      {/* Contact Preferences */}
      <fieldset>
        <legend>Contact Preferences</legend>
        
        <div className="form-group">
          <label>Preferred Contact Method</label>
          <div className="radio-group">
            <label>
              <input
                type="radio"
                name="contactMethod"
                value="email"
                checked={formData.contactMethod === 'email'}
                onChange={handleInputChange}
              />
              Email
            </label>
            <label>
              <input
                type="radio"
                name="contactMethod"
                value="phone"
                checked={formData.contactMethod === 'phone'}
                onChange={handleInputChange}
              />
              Phone
            </label>
            <label>
              <input
                type="radio"
                name="contactMethod"
                value="both"
                checked={formData.contactMethod === 'both'}
                onChange={handleInputChange}
              />
              Both
            </label>
          </div>
        </div>
        
        {(formData.contactMethod === 'phone' || formData.contactMethod === 'both') && (
          <div className="form-group">
            <label htmlFor="phone">Phone Number</label>
            <input
              type="tel"
              id="phone"
              name="phone"
              value={formData.phone}
              onChange={handleInputChange}
              placeholder="(555) 123-4567"
            />
          </div>
        )}
      </fieldset>
      
      {/* Message */}
      <fieldset>
        <legend>Your Message</legend>
        
        <div className="form-group">
          <label htmlFor="subject">Subject *</label>
          <select
            id="subject"
            name="subject"
            value={formData.subject}
            onChange={handleInputChange}
            required
          >
            <option value="">Select a subject</option>
            <option value="general">General Inquiry</option>
            <option value="support">Technical Support</option>
            <option value="sales">Sales Question</option>
            <option value="feedback">Feedback</option>
            <option value="other">Other</option>
          </select>
        </div>
        
        <div className="form-group">
          <label htmlFor="message">Message *</label>
          <textarea
            id="message"
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            placeholder="Please describe your inquiry in detail..."
            rows="6"
            required
          />
        </div>
      </fieldset>
      
      {/* Consent */}
      <fieldset>
        <div className="form-group">
          <div className="checkbox-group">
            <label>
              <input
                type="checkbox"
                name="newsletter"
                checked={formData.newsletter}
                onChange={handleInputChange}
              />
              Subscribe to our newsletter for updates
            </label>
            
            <label>
              <input
                type="checkbox"
                name="terms"
                checked={formData.terms}
                onChange={handleInputChange}
                required
              />
              I agree to the Terms of Service and Privacy Policy *
            </label>
          </div>
        </div>
        
        <div className="form-actions">
          <button 
            type="submit" 
            disabled={isSubmitting || !formData.terms}
            className="btn-primary"
          >
            {isSubmitting ? 'Sending...' : 'Send Message'}
          </button>
          
          <button 
            type="button" 
            onClick={() => setFormData({
              fullName: '',
              email: '',
              contactMethod: 'email',
              phone: '',
              subject: '',
              message: '',
              newsletter: false,
              terms: false
            })}
            className="btn-secondary"
          >
            Clear Form
          </button>
        </div>
      </fieldset>
      
      {/* Status Messages */}
      {submitStatus === 'success' && (
        <div className="success-message">
          Thank you! Your message has been sent successfully.
        </div>
      )}
      
      {submitStatus === 'error' && (
        <div className="error-message">
          Sorry, there was an error sending your message. Please try again.
        </div>
      )}
    </form>
  );
}

export default OptimizedContactForm;

Common Issues & Solutions

Quick fixes for the most common problems when getting started

High token usage after optimization

Check if aggressive optimization is enabled and ensure proper webMCP attributes are used

Form validation not working

Verify that validation attributes are preserved during optimization

Styling issues after optimization

Enable preserveFormatting option and check CSS selectors compatibility

API rate limits exceeded

Implement request throttling and consider upgrading your API plan

Ready for Advanced Features?

Now that you've mastered the basics, explore advanced optimization techniques and enterprise features

Advanced Optimization React Integration