JavaScript API

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

const processor = new WebMCPProcessor();
const htmlContent = `<form>
  <input name="email" type="email" />
  <button type="submit">Login</button>
</form>`;

const webmcpData = processor.parseWebMCP(htmlContent);
console.log(webmcpData.elements);

const optimized = processor.optimizeForAI(webmcpData.elements, {
  target_model: 'gpt-4o',
  compression_level: 'advanced',
  goal_description: 'User login with email and password'
});

// Results in 67.6% token reduction
console.log('Token savings:', optimized.tokenReduction);
console.log('Cost savings:', optimized.costSavings);

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

function LoginForm() {
  const { analytics } = useWebMCP({ 
    targetModel: 'gpt-4o',
    compressionLevel: 'advanced'
  });
  
  return (
    <WebMCPForm goalDescription="User authentication">
      <WebMCPInput name="email" type="email" aiSuggestions={true} />
      <WebMCPInput name="password" type="password" />
      <button type="submit">Login</button>
    </WebMCPForm>
  );
}

const secureProcessor = new WebMCPProcessor({
  enableCSRF: true,
  encryption: 'jwe',
  jwtConfig: {
    secret: process.env.JWT_SECRET,
    expiresIn: '1h',
    scopes: ['auth:login', 'user:read']
  }
});

const secureData = secureProcessor.parseWebMCP(htmlContent, {
  securityLevel: 'high',
  sensitiveFields: ['password', 'ssn', 'creditCard']
});