runtime-modification.ts

/**
 * Example 2: Runtime AI Modification Flow
 */

import { RuntimeEngine, ConstraintsManager } from '../src/index';

// Initialize the runtime engine with custom constraints
const engine = new RuntimeEngine({
  maxTokens: 3000,
  maxComponents: 5,
  maxLinesPerComponent: 150,
  allowedLibraries: ['react', 'react-dom', 'styled-components'],
  forbiddenPatterns: [
    /eval\(/,
    /dangerouslySetInnerHTML/,
    /fetch\(/,  // Must use secure fetch
  ],
});

// Simulate AI generating code based on user request
async function handleUserRequest(userQuery: string) {
  console.log('User Request:', userQuery);

  // Step 1: AI generates code (simulated here)
  const aiGeneratedCode = `
    import React from 'react';

    export function CustomButton({ onClick, label }) {
      return (
        <button
          onClick={onClick}
          style={{
            padding: '10px 20px',
            background: 'blue',
            color: 'white'
          }}
        >
          {label}
        </button>
      );
    }
  `;

  // Step 2: Process through runtime engine
  const result = await engine.processModification({
    userQuery,
    generatedCode: aiGeneratedCode,
  });

  if (result.success) {
    console.log('✓ Code validated and applied');
    console.log('Rollback token:', result.rollbackToken);
    console.log('Tokens used:', result.validation.metadata?.tokensUsed);

    // Step 3: Can rollback if needed
    // engine.rollback(result.rollbackToken);
  } else {
    console.error('✗ Validation failed');
    console.error('Errors:', result.validation.errors);
  }

  return result;
}

// Example usage
handleUserRequest('Create a blue button component with click handler');

// Example: Update constraints dynamically
engine.updateConstraints({
  maxTokens: 5000,  // Increase limit for complex UI
});

// Example: Attempt to generate code that violates constraints
async function attemptDangerousCode() {
  const dangerousCode = `
    import React from 'react';

    export function DangerousComponent() {
      // This will be caught by validator
      eval('alert("XSS")');

      return <div>Unsafe</div>;
    }
  `;

  const result = await engine.processModification({
    userQuery: 'Create component',
    generatedCode: dangerousCode,
  });

  console.log('Dangerous code blocked:', !result.success);
  console.log('Errors:', result.validation.errors);
}

attemptDangerousCode();