Skip to main content

🤖 AI HTML Components

This comprehensive guide explains how to create Myop 🤖 AI HTML components with proper data loading, mock data mechanisms, and integration patterns with host applications.

Recommended: Use MCP for AI-Assisted Development

For the best experience building AI HTML components, we recommend using the Myop MCP Server. The MCP integration:

  • Always up-to-date — Automatically fetches the latest component guide and best practices
  • Seamless uploads — Build and deploy components directly from your AI assistant
  • Iterative development — Quickly update and redeploy components with simple commands

Set up MCP once, and your AI assistant will always have access to the current Myop component patterns.

Local Development with Myop CLI

For local development with file watching and hot module replacement, use the Myop CLI:

npm install -g @myop/cli
myop dev

The CLI provides a development server at http://localhost:9292 with automatic rebuilding, HMR support, and a visual dashboard.

Overview​

Myop HTML components are self-contained UI units that communicate with host applications through a well-defined public API. They follow a specific pattern that enables:

  • Dynamic data loading from host applications
  • Preview mode with mock data for development
  • Bi-directional communication between component and host
  • Encapsulation of all implementation details

Quick Start​

A minimal Myop component has this structure:

<!DOCTYPE html>
<html>
<head>
    <style>
        #loader-container { display: flex; /* shown by default */ }
        #app-root { opacity: 0; /* hidden by default */ }
    </style>
</head>
<body>
    <div id="loader-container">
        <div class="loader-spinner"></div>
    </div>

    <div id="app-root">
        <!-- Your component UI -->
    </div>

    <script>
    (function() {
        // Private implementation
        function hideLoader() {
            document.getElementById('loader-container').style.display = 'none';
            document.getElementById('app-root').style.opacity = '1';
        }

        function initializeComponent(data) {
            // Render your UI with the data
            hideLoader();
        }

        // Public API
        window.myop_init_interface = function(data) {
            if (data) initializeComponent(data);
        };

        window.myop_cta_handler = function(action_id, payload) {
            console.log('Action:', action_id, payload);
        };
    })();
    </script>

    <!-- Mock data for preview -->
    <script id="myop_preview">
        setTimeout(() => {
            window.myop_init_interface({ items: [] });
        });
    </script>
</body>
</html>

Guide Sections​

Component Structure​

Learn about the three main parts of a Myop component: HTML structure, loader UI, and encapsulated JavaScript.

Data Loading​

Understand the data loading mechanism and lifecycle from initial loader state to fully rendered component.

Mock Data​

Set up preview mock data for development and testing without a host application.

Public API​

Reference for the two global functions: myop_init_interface and myop_cta_handler.

Host Integration​

Learn how to integrate Myop components with React, Vue, Angular, or vanilla JavaScript host applications.

Best Practices​

Guidelines for building maintainable, performant, and accessible Myop components.

Key Concepts​

Separation of Concerns​

Myop components follow a clear separation of concerns:

ResponsibilityComponentHost Application
UI Rendering✓
User Interactions✓
Data Fetching✓
Navigation✓
Business Logic✓

Communication Flow​

HOST APPLICATION (React/Vue/Angular)
  1. Renders Myop component
  2. onReady callback fires
  3. Sets up myop_cta_handler
  4. Fetches data from API
  5. Calls myop_init_interface(data)
         ↓
MYOP HTML COMPONENT
  window.myop_init_interface(data):
    1. Stores data in private state
    2. Transforms data (parse dates, etc.)
    3. Renders component UI
    4. Hides loader, shows app

  User Interaction:
    → Calls window.myop_cta_handler('action', payload)
         ↓
HOST APPLICATION
  myop_cta_handler receives event:
    1. Parses action_id
    2. Handles action (navigate, open modal, etc.)

Next Steps​

  1. New to Myop? Start with Component Structure
  2. Building a component? See Data Loading and Public API
  3. Integrating with your app? Check Host Integration
  4. Need optimization tips? Review Best Practices