webMCP
Back to Blog
Tutorial
December 15, 2024
8 min read

Getting Started with webMCP React Components

Step-by-step guide to integrating webMCP's AI-optimized React components into your applications for instant token savings.

W
webMCP Team
Developer Relations

React developers can now leverage webMCP optimization directly in their components. Our new @webmcp/react package provides AI-optimized form components that reduce token usage by up to 67.6% automatically.

Quick Installation

npm install @webmcp/react @webmcp/core

Basic Usage

Here's how to create an AI-optimized contact form in just a few lines:

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

function ContactForm() {
  return (
    <WebMCPForm goalDescription="Collect contact information">
      <WebMCPInput name="name" aiSuggestions={true} />
      <WebMCPInput name="email" type="email" aiSuggestions={true} />
      <WebMCPButton type="submit">Submit</WebMCPButton>
    </WebMCPForm>
  );
}

Available Components

WebMCPForm

AI-optimized form wrapper with 67.6% token reduction and real-time analytics.

WebMCPInput

Smart input with AI suggestions for email, name, and phone fields.

WebMCPButton

Semantic button with role mapping for AI agent interactions.

WebMCPAnalytics

Real-time metrics dashboard showing token savings and cost tracking.

Advanced Example with Analytics

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

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

  return (
    <div>
      <WebMCPForm goalDescription="User registration with analytics">
        <WebMCPInput 
          name="firstName" 
          webmcpRole="input.name.first"
          aiSuggestions={true}
          validation="required"
        />
        <WebMCPInput 
          name="email" 
          type="email"
          webmcpRole="input.email"
          aiSuggestions={true}
        />
        <WebMCPButton 
          type="submit" 
          disabled={isOptimizing}
          webmcpRole="action.submit"
        >
          {isOptimizing ? 'Optimizing...' : 'Register'}
        </WebMCPButton>
      </WebMCPForm>
      
      <WebMCPAnalytics />
    </div>
  );
}

Key Benefits

Automatic Optimization: 67.6% token reduction with zero configuration
TypeScript Support: Full type definitions and IntelliSense
Real-time Analytics: Track savings and performance metrics
AI Suggestions: Smart field completion for better UX

Next Steps

Ready to integrate webMCP React components into your application? Check out our complete documentation and interactive examples to get started.

🚀 Try it Now

Experience the components in action with our interactive playground and live demos.

Interactive Playground →View Documentation →