# Component Builder

## What Is the Component Builder?

The Component Builder is Myop's built-in development environment for creating, editing, and publishing UI components — directly from your browser. It provides a code editor, live preview, configuration panel, and testing tools all in one place, so you can build and iterate on components without switching between tools.

Whether you're starting from scratch or modifying an existing component, the Component Builder gives you everything you need to go from idea to production.

<div style={{textAlign: 'center'}}>
<a href={require('./images/component-builder-overview.png').default} target="_blank">
  <img src={require('./images/component-builder-overview.png').default} alt="Component Builder Overview" width="600" />
</a>
</div>

## Key Features

- **Integrated Code Editor** — A full Monaco editor (the same engine behind VS Code) with syntax highlighting, autocomplete, and error detection.
- **Live Preview** — See your changes rendered in real time as you type, with split-view or full-screen options.
- **Variant Management** — Create, switch between, and duplicate variants of your component to test different versions.
- **Test Data Scenarios** — Define mock data inputs to test how your component behaves with different data.
- **One-Click Publish** — Save and publish your component to a live environment instantly.
- **Myop Agent** — An AI assistant integrated into the builder to help you write and modify code.
- **Connect & Integrate** — Generate ready-to-use code snippets, npm packages, or prompts for integrating your component into your application or platform.
- **Tags & Organization** — Categorize components with tags for easy discovery.
- **Sharing & Access** — Control component visibility with public/private access.

---

## Interface Overview

The Component Builder is divided into three main areas:

### Top Bar

The top bar contains navigation and actions:

- **Component Selector** — Switch between components or create a new one.
- **Variant Selector** — Switch between variants of the current component, or add a new variant.
- **Variant Description** — Add a short description to the current variant.
- **Save** — Save the current variant code to the server.
- **Publish Live** — Publish the saved variant to your live environment.

<div style={{textAlign: 'center'}}>
<a href={require('./images/top-bar.png').default} target="_blank">
  <img src={require('./images/top-bar.png').default} alt="Top Bar" width="800" />
</a>
</div>


### Left Panel

The left panel can be collapsed and expanded using the toggle button, giving you more space for the code editor and preview when needed. It has two tabs:

#### Configuration Tab
- **Tags** — Assign tags to organize and categorize your component.
- **Data Flow** — View the input and output methods detected in your code, and inspect the TypeScript interface.
- **Testing** — Create and run test data scenarios to validate your component.
- **Connect** — Generate integration code snippets for your host application.
- **Sharing & Access** — Toggle public/private visibility.

<div style={{textAlign: 'center'}}>
<a href={require('./images/left-panel-configuration.png').default} target="_blank">
  <img src={require('./images/left-panel-configuration.png').default} alt="Left Panel - Configuration Tab" width="300" />
</a>
</div>

#### Myop Agent Tab
An AI-powered coding assistant built into the Component Builder. Key capabilities:
- **Build & edit components** — Describe what you want in natural language and the agent will generate or modify your component code.
- **Multi-turn conversations** — Refine your component iteratively across multiple messages, with full conversation history.
- **Element selection** — Click on any element in the preview and ask the agent to modify it directly.
- **Test scenario generation** — Ask the agent to create test data scenarios (DTOs), which are automatically added to your configuration on save.
- **Version history** — Revert to any previous point in the conversation if needed.
- **Agent / Ask modes** — Switch between full editing mode and a read-only ask mode for questions without making changes.
- **Model selection** — Choose between Haiku (fast), Sonnet (balanced), or Opus (most capable) depending on your task complexity.
- **Voice to text** — Use your microphone to describe changes by voice instead of typing.
- **Stop anytime** — Stop the agent mid-response if you see it heading in the wrong direction, saving time and tokens.
- **`@` context selector** — Type `@` in the input to open a context menu where you can reference specific colors or element selectors from your component, giving the agent precise context about what you want to change.
- **`/` commands** — Type `/` to access quick commands such as starting a new conversation or loading a previous one.
- **Take a screenshot** — Capture a screenshot of a webpage or design and share it with the agent as a visual reference.
- **Upload screenshots & assets** — Upload images, icons, or other assets directly into the conversation. The agent can use them as part of your component (e.g., as backgrounds, logos, or icons).
- **External integrations** — Connect to Figma and Chrome DevTools via MCP for design-to-code workflows and live debugging.

<div style={{textAlign: 'center'}}>
<a href={require('./images/left-panel-agent.png').default} target="_blank">
  <img src={require('./images/left-panel-agent.png').default} alt="Left Panel - Myop Agent Tab" width="300" />
</a>
</div>

### Main Panel

The main panel is where you write code and preview your component:
- **Preview View** — See your component rendered live.
- **Code View** — Write and edit HTML, CSS, and JavaScript in the Monaco editor.
- **Split View** — See code and preview side by side.
- **Paste to Replace** — Replace the entire editor content with code from your clipboard. Useful when pasting code from an external AI tool or another source.
- **Copy Code** — Copy the current editor content to your clipboard.
- **Download Code** — Download the current variant code as an HTML file for local use or backup.
- **Mobile/Desktop Toggle** — Switch the preview between desktop and mobile viewport to test responsive behavior.
- **Console** — View console output and errors from your component.

<div style={{textAlign: 'center'}}>
<a href={require('./images/main-panel.png').default} target="_blank">
  <img src={require('./images/main-panel.png').default} alt="Main Panel" width="600" />
</a>
</div>

---

## Getting Started: Create Your First Component

### Step 1: Open the Component Builder

Navigate to the Myop Dashboard and click **New Component**. The Component Builder will open with a starter template.

<div style={{textAlign: 'center'}}>
<a href={require('./images/new-component.png').default} target="_blank">
  <img src={require('./images/new-component.png').default} alt="New Component" width="600" />
</a>
</div>

### Step 2: Name Your Component

Click on the component name field in the top bar and type a name for your component (e.g., "Pricing Card").

### Step 3: Write Your Code

The editor starts with a basic template:

```html
<!-- Start coding here -->
<div>This is my component</div>

<script>

// Called on initialization and whenever the host sends
// configuration or state updates to this component
myop_init_interface = () => {}

// Provided by the host — call this function to send data
// or trigger actions in the host app
myop_cta_handler = () => {}

</script>
```

Replace this with your own HTML, CSS, and JavaScript. Your component communicates with the host application through two global functions:

| Function | Direction | Purpose |
|----------|-----------|---------|
| `myop_init_interface(data)` | Host → Component | Receive data from the host app |
| `myop_cta_handler(action_id, payload)` | Component → Host | Send actions back to the host app |

You can use the Myop Agent to modify and create your component code. See the [Myop Agent Tab](#myop-agent-tab) section below for more details.

### Step 4: Preview Your Component

Use the tab buttons at the top of the main panel to switch between views:

- **Preview** — See the rendered output.
- **Code** — Focus on writing code.
- **Split** — View both side by side.

<div style={{textAlign: 'center'}}>
<a href={require('./images/preview-modes.png').default} target="_blank">
  <img src={require('./images/preview-modes.png').default} alt="Preview Modes" width="200" />
</a>
</div>

### Step 5: Test Your Component with Different Data

Use **Test Data Scenarios** in the left panel to preview your component in different states — for example, an empty cart, a full cart, or an error state. See [Testing with Test Data Scenarios](#testing-with-test-data-scenarios) for more details.

### Step 6: Save Your Component

Click the **Save** button in the top bar. If this is a new component, Myop will create it on the server and assign it an ID. If it's an existing component, it will save your changes to the current variant.

<div style={{textAlign: 'center'}}>
<a href={require('./images/save.png').default} target="_blank">
  <img src={require('./images/save.png').default} alt="Save Component" width="400" />
</a>
</div>

### Step 7: Publish Live

Once you're happy with your component, click **Publish Live** to deploy it to your environment. Published variants are locked to prevent accidental edits — to make further changes, create a new variant.

<div style={{textAlign: 'center'}}>
<a href={require('./images/save-publish.png').default} target="_blank">
  <img src={require('./images/save-publish.png').default} alt="Save and Publish" width="400" />
</a>
</div>

---

## Managing Variants

Variants let you maintain multiple versions of a component. Each variant has its own code, name, and description.

<div style={{textAlign: 'center'}}>
<a href={require('./images/variants.png').default} target="_blank">
  <img src={require('./images/variants.png').default} alt="Managing Variants" width="800" />
</a>
</div>

### Create a New Variant

1. Click the **+** button next to the variant selector in the top bar.
2. Enter a name for the new variant.
3. The new variant opens in the editor with a copy of the current code.

### Duplicate a Variant

To create a variant based on an existing one, use the variant menu to duplicate it. The new variant will contain a copy of the original code.

### Switch Between Variants

Click the variant name or chevron in the top bar to open the variant dropdown, then select the variant you want to edit.

:::caution Unsaved Changes
If you have unsaved changes when switching variants, the builder will prompt you to confirm before discarding them.
:::

### Published Variants Are Locked

Once a variant is published (has a release), its code is locked to prevent unintended changes. To iterate further, create a new variant from the published one.

---

## Testing with Test Data Scenarios

Test data scenarios let you preview how your component behaves with different inputs without connecting to a real host application.

### Create a Test Scenario Manually

1. Expand the **Testing** section in the left panel.
2. Click **+ Add scenario**.
3. Give it a name (e.g., "Empty Cart", "Full Cart", "Error State").
4. Enter the JSON data that describes the state you want to test.
5. Click **Run** to see how your component renders with that data.

<div style={{textAlign: 'center'}}>
<a href={require('./images/dto-manually.png').default} target="_blank">
<img src={require('./images/dto-manually.png').default} alt="Adding a test scenario manually" width="400" />
</a>
</div>

### Create a Test Scenario with Myop Agent

You can also use the **Myop Agent** to create test scenarios without writing JSON by hand. Simply describe the state you'd like to test (e.g., "show a cart with 3 items and a discount applied"), and after clicking the **Save** button within the agent, a new test scenario is automatically added to your configuration.

<div style={{textAlign: 'center'}}>
<a href={require('./images/adding-dto-agent.png').default} target="_blank">
<img src={require('./images/adding-dto-agent.png').default} alt="Adding a test scenario with Myop Agent" width="400" />
</a>
</div>

### Manage Test Scenarios

- **Edit** — Click on an existing test scenario to modify its name or data.
- **Save** — Save your changes without running the scenario.
- **Run** — Save and run the scenario in a single click, so you can immediately see how your component renders with the updated data.
- **Duplicate** — Create a copy of a test scenario to quickly create variations.
- **Delete** — Remove test scenarios you no longer need.

---

## Data Flow

The Data Flow section in the left panel shows the input and output methods detected in your component code:

- **Input** — Functions like `myop_init_interface` that receive data from the host.
- **Output** — Calls to `myop_cta_handler` that send actions to the host.

### TypeScript Interface

When you build a component using the Myop Agent or the provided AI prompt, TypeScript type definitions are automatically generated and embedded in your component code. These types describe the data contract between your component and the host application — what data `myop_init_interface` expects, and what actions and payloads `myop_cta_handler` can send.

The Data Flow section in the left panel reads these type definitions and displays the detected input and output methods. This is useful for:

- Understanding the data contract between your component and the host at a glance.
- Sharing the expected data shape with other developers.
- Ensuring type safety when integrating the component into your host application.

These types are embedded in your component code inside a `<script type="myop/types">` block. You can view this block directly in the code editor to see the full type definitions of your component.

<div style={{textAlign: 'center'}}>
<a href={require('./images/types.png').default} target="_blank">
  <img src={require('./images/types.png').default} alt="Data Flow" width="500" />
</a>
</div>

---

## Connect: Integrate Into Your App

The **Connect** section generates ready-to-use code snippets for integrating your component into a host application.

1. Expand the **Connect** section in the left panel.
2. Click the **Connect** button.
3. Choose your framework or platform of the host application.
4. Copy the generated code snippet, npm package or prompt into your application / platform.

<div style={{textAlign: 'center', display: 'flex', justifyContent: 'center', gap: '16px'}}>
<a href={require('./images/connect.png').default} target="_blank">
  <img src={require('./images/connect.png').default} alt="Connect Modal" width="500" />
</a>
<a href={require('./images/npm_package.png').default} target="_blank">
  <img src={require('./images/npm_package.png').default} alt="NPM Package" width="500" />
</a>
</div>


If you're a non-developer, you can click the **Share with developer** button to share the component with a developer for integration.

<div style={{textAlign: 'center' }}>
<a href={require('./images/myop-live.png').default} target="_blank">
  <img src={require('./images/myop-live.png').default} alt="Connect Modal" width="700" />
</a>
</div>

---

## Tags

Tags help you organize and find components across your dashboard.

1. Expand the **Tags** section in the left panel.
2. Start typing to search existing tags or create a new one.
3. Press **Enter** to add a tag.
4. Click the **x** on a tag to remove it.

Tags are shared across your organization, so consistent naming helps the whole team.

<div style={{textAlign: 'center' }}>
<a href={require('./images/tags.png').default} target="_blank">
  <img src={require('./images/tags.png').default} alt="Connect Modal" width="400" />
</a>
</div>


---

## Sharing & Access

Control who can access your component:

1. Expand the **Sharing & Access** section in the left panel.
2. Click **Make Public** to toggle the component's visibility.
   - **Public** — Anyone with the link can view the component.
   - **Private** — Only members of your organization can access it.

---

## Myop Agent

The Myop Agent is an AI assistant embedded directly into the Component Builder. For a full list of its capabilities — including element selection, voice input, screenshot uploads, model selection, and more — see the [Myop Agent Tab](#myop-agent-tab) section above.

To get started:

1. Click the **Myop Agent** tab in the left panel.
2. Describe what you want to build or change.
3. The agent will generate or modify code in the editor.

:::tip
The Myop Agent works best when you give it clear, specific instructions — for example, "Add a loading spinner that shows while data is being fetched" or "Change the card layout to a horizontal orientation."
:::