---
sidebar_position: 2.5
---
# 🤖 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.
:::tip Recommended: Use MCP for AI-Assisted Development
For the best experience building AI HTML components, we recommend using the **[Myop MCP Server](/docs/mcp-setup)**. 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.
:::
:::info Local Development with Myop CLI
For local development with file watching and hot module replacement, use the **[Myop CLI](/docs/cli)**:
```bash
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:
```html
```
## Guide Sections
### [Component Structure](/docs/learnMyop/html-components/component-structure)
Learn about the three main parts of a Myop component: HTML structure, loader UI, and encapsulated JavaScript.
### [Data Loading](/docs/learnMyop/html-components/data-loading)
Understand the data loading mechanism and lifecycle from initial loader state to fully rendered component.
### [Mock Data](/docs/learnMyop/html-components/mock-data)
Set up preview mock data for development and testing without a host application.
### [Public API](/docs/learnMyop/html-components/public-api)
Reference for the two global functions: `myop_init_interface` and `myop_cta_handler`.
### [Host Integration](/docs/learnMyop/html-components/host-integration)
Learn how to integrate Myop components with React, Vue, Angular, or vanilla JavaScript host applications.
### [Best Practices](/docs/learnMyop/html-components/best-practices)
Guidelines for building maintainable, performant, and accessible Myop components.
## Key Concepts
### Separation of Concerns
Myop components follow a clear separation of concerns:
| Responsibility | Component | Host 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](/docs/learnMyop/html-components/component-structure)
2. **Building a component?** See [Data Loading](/docs/learnMyop/html-components/data-loading) and [Public API](/docs/learnMyop/html-components/public-api)
3. **Integrating with your app?** Check [Host Integration](/docs/learnMyop/html-components/host-integration)
4. **Need optimization tips?** Review [Best Practices](/docs/learnMyop/html-components/best-practices)