---
sidebar_position: 5
---
# Myop MCP Server Setup

:::caution Work in Progress
This feature is currently **experimental** and under active development. APIs and configuration may change.
:::

The Myop MCP (Model Context Protocol) server enables AI assistants like Cursor and Claude Code to interact with your Myop account. It provides tools for component discovery, management, and access to the Myop component development guide.

## Prerequisites

:::info Node.js Required
Most MCP clients require **Node.js version 22 or higher** to connect to remote MCP servers. Download the latest version from [nodejs.org](https://nodejs.org/).
:::

## Server URL

```
https://mcp.myop.dev/mcp
```

## Authentication

The Myop MCP server uses **OAuth 2.0** for authentication. When you first connect, you'll be redirected to the Myop dashboard to log in and authorize access.

### OAuth Flow

1. Your MCP client redirects you to Myop dashboard for login
2. After authorization, you're redirected back to your client
3. Client exchanges the authorization code for an access token
4. All subsequent requests use the access token

## Available Tools

### Authenticated Tools

These tools require OAuth authentication:

| Tool | Description |
|------|-------------|
| `whoami` | Get information about the currently authenticated user |
| `list_organizations` | Get the list of organizations you have access to |
| `list_components` | List components in an organization (filter by name) |
| `get_component` | Get a component's metadata + HTML (use `includeContent: false` for metadata/tags only) |
| `edit_component_tags` | Add, remove, or replace a component's tags |
| `upload_component` | Step 1: Get a presigned URL for uploading a component |
| `confirm_upload` | Step 2: Confirm the upload and get the dashboard URL |

### Public Tools

These tools are available without authentication:

| Tool | Description |
|------|-------------|
| `get_myop_guide` | Get the Myop HTML Component Development Guide |

### Tool Details

#### `whoami`
Returns information about the authenticated user.

```json
{
  "authenticated": true,
  "userId": "abc123",
  "email": "user@example.com",
  "scope": "mcp:read mcp:write"
}
```

#### `list_organizations`
Returns organizations the user has access to.

```json
{
  "count": 2,
  "organizations": [
    { "id": "org-1", "name": "My Company" },
    { "id": "org-2", "name": "Personal" }
  ]
}
```

#### `list_components`
List components in an organization.

**Parameters:**
- `organizationId` (required): The organization ID
- `name` (optional): Filter by name
- `limit` (optional): Max results (default: 50)

```json
{
  "count": 3,
  "components": [
    {
      "id": "comp-1",
      "name": "UserProfile",
      "description": "User profile card component",
      "updatedOn": "2024-03-15T10:30:00.000Z",
      "variantsCount": 2,
      "tags": ["profile", "user"]
    }
  ]
}
```

#### `get_component`
Fetch a component by ID: metadata plus the latest variant's HTML.

**Parameters:**
- `componentId` (required): The component UUID
- `environment` (optional): Return the variant released to this environment instead of the latest
- `includeContent` (optional, default `true`): Set to `false` for a fast **metadata-only** read (name, description, tags) that skips fetching the HTML

```json
{
  "success": true,
  "component": {
    "id": "abc-123",
    "name": "UserProfile",
    "description": "User profile card",
    "variantsCount": 3,
    "tags": ["profile", "user"]
  },
  "resolvedEnvironment": null,
  "latestVariant": null,
  "htmlContent": null
}
```

The example above is a metadata-only read (`includeContent: false`), so `latestVariant` and `htmlContent` are `null`. With content included they are populated.

#### `edit_component_tags`
Add, remove, or replace a component's tags. Choose **one** mode per call.

**Parameters:**
- `componentId` (required): The component UUID
- `add` (optional): Tags to add (already-present tags and duplicates are ignored)
- `remove` (optional): Tags to remove (tags not present are ignored)
- `set` (optional): Array that replaces the entire tag list — pass `[]` to clear all. Mutually exclusive with `add`/`remove`.

Tags are trimmed and de-duplicated on the server. The edit updates the component's metadata **in place** — it does not create a new version. To see current tags first, call `get_component` with `includeContent: false`.

**Response:**
```json
{
  "success": true,
  "componentId": "abc-123",
  "name": "UserProfile",
  "tags": ["profile", "user", "featured"]
}
```

#### `upload_component`
Step 1 of the upload process: Get a presigned URL for uploading your component.

**Parameters:**
- `name` (optional): Component name. Check `myop.config.json` for this value.
- `componentId` (optional): Existing component UUID to update. If not provided, a new component will be created.
- `organization` (optional): Organization name or ID. Defaults to user's default organization.

**Response:**
```json
{
  "success": true,
  "message": "Upload URL generated. Run the curl command, then call confirm_upload with the uploadId.",
  "uploadId": "abc123-upload-id",
  "componentId": "existing-component-id-or-null",
  "curlCommand": "curl -X PUT -H \"Content-Type: text/html\" --data-binary @./dist/index.html \"https://...presigned-url...\"",
  "expiresIn": "3600 seconds",
  "nextStep": "After curl completes successfully, call the confirm_upload tool with this uploadId to get the dashboard URL."
}
```

#### `confirm_upload`
Step 2 of the upload process: Confirm the upload completed and get the dashboard URL.

**Parameters:**
- `uploadId` (required): The uploadId returned from `upload_component`

**Response (new component):**
```json
{
  "success": true,
  "message": "Upload confirmed! New component created. Save componentId and orgId to myop.config.json for future uploads.",
  "dashboardUrl": "https://dashboard.myop.dev/component/abc-123",
  "componentName": "MyComponent",
  "componentId": "abc-123-generated-uuid",
  "variantId": "variant-uuid",
  "isNewComponent": true,
  "orgId": "org-uuid"
}
```

**Response (existing component):**
```json
{
  "success": true,
  "message": "Upload confirmed! New version added to existing component.",
  "dashboardUrl": "https://dashboard.myop.dev/component/abc-123",
  "componentName": "MyComponent",
  "componentId": "abc-123",
  "variantId": "variant-uuid",
  "isNewComponent": false,
  "orgId": "org-uuid"
}
```

### Upload Workflow

The recommended workflow for uploading components via MCP:

#### 1. Project Configuration

Create a `myop.config.json` file in your project root:

```json
{
  "name": "MyComponent",
  "componentId": null,
  "organization": "My Organization"
}
```

#### 2. Build Your Component

Ensure your component is built to `./dist/index.html`:

```bash
npm run build
```

#### 3. Upload Process

The MCP tools handle the upload in two steps:

**Step 1:** Call `upload_component` to get a presigned URL
```
"Upload my component to Myop"
```

The AI assistant will:
1. Read `myop.config.json` to get component settings
2. Call `upload_component` with name, componentId, and organization
3. Execute the returned curl command to upload the file

**Step 2:** Call `confirm_upload` to finalize
```
"Confirm the upload"
```

The AI assistant will:
1. Call `confirm_upload` with the uploadId
2. For new components, save the returned componentId to `myop.config.json`
3. Provide the dashboard URL to view the component

#### 4. Updating Existing Components

After the first upload, your `myop.config.json` will have a componentId:

```json
{
  "name": "MyComponent",
  "componentId": "abc-123-uuid",
  "organization": "My Organization"
}
```

Future uploads will update the existing component instead of creating a new one.

## Setup for Cursor

Add the following to your Cursor MCP configuration file:

**Global config:** `~/.cursor/mcp.json`

**Or project-specific:** `.cursor/mcp.json` in your project root

```json
{
  "mcpServers": {
    "myop": {
      "url": "https://mcp.myop.dev/mcp"
    }
  }
}
```

After adding the configuration:
1. Restart Cursor
2. When you first use MCP features, a browser window will open for OAuth login
3. Log in to your Myop account and authorize access
4. Return to Cursor - you should now see the tools available

## Setup for Claude Code

### Step 1: Add the MCP Server

#### Global Setup (Recommended)

To make the Myop MCP server available across **all your projects**, add it with the `--scope user` flag:

```bash
claude mcp add myop https://mcp.myop.dev/mcp --transport http --scope user
```

This stores the configuration globally in `~/.claude.json`, so you can use Myop tools from any directory without additional setup.

#### Directory-Level Setup

If you omit the `--scope` flag, the MCP server will only be configured for the **current directory**:

```bash
claude mcp add myop https://mcp.myop.dev/mcp --transport http
```

This is useful when you want the configuration limited to a specific project or want to share it with your team via version control (stored in `.mcp.json`).

### Step 2: Start Claude Code

Open a new terminal and start Claude Code:

```bash
claude
```

### Step 3: Open the MCP Panel

Once Claude Code is running, type:

```
/mcp
```

This opens the MCP servers panel showing all configured servers.

### Step 4: Authorize the Myop Server

1. Find **myop** in the list of MCP servers
2. Click on the **myop** server entry
3. Click the **Authenticate** button (or select it from the **`...`** menu)
4. A browser window will open - log in to your Myop account
5. Authorize the MCP access when prompted
6. Return to Claude Code - the server should now show as **connected**

:::tip
If the server shows a connection error, try pressing `r` to refresh, or restart Claude Code.
:::

## Setup for Antigravity

Antigravity requires [mcp-remote](https://www.npmjs.com/package/mcp-remote) to connect to remote MCP servers with OAuth.

Add the following to your Antigravity MCP configuration:

```json
{
  "mcpServers": {
    "myop": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.myop.dev/mcp"]
    }
  }
}
```

After adding the configuration:
1. Restart Antigravity
2. When you first use MCP features, a browser window will open for OAuth login
3. Log in to your Myop account and authorize access
4. Tokens are stored locally in `~/.mcp-auth`

**Troubleshooting:** If you encounter authentication issues, clear the local token cache:
```bash
rm -rf ~/.mcp-auth
```

## Usage Examples

Once configured and authenticated, you can ask your AI assistant:

### Component Discovery
- *"What organizations do I have access to?"*
- *"List all components in my organization"*
- *"Find components with 'profile' in the name"*

### Component Tags
- *"What tags does my UserProfile component have?"*
- *"Add the tags 'featured' and 'stable' to component abc-123"*
- *"Remove the 'draft' tag from my Sidebar component"*

### Component Development
- *"Show me the Myop component development guide"*
- *"Create a Myop component that displays a user profile card"*
- *"Help me build a dashboard widget following Myop best practices"*

### Account Information
- *"Who am I logged in as?"*
- *"What's my current authentication status?"*

## API Endpoints

### MCP Endpoint
```
POST https://mcp.myop.dev/mcp
Authorization: Bearer <access_token>
Content-Type: application/json

{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}
```

### Health Check
```
GET https://mcp.myop.dev/
```

Returns server status and version.

## Troubleshooting

### OAuth login doesn't complete

1. Make sure you're logged into your Myop account at [dashboard.myop.dev](https://dashboard.myop.dev)
2. Clear your browser cache and try again
3. Check that pop-ups are not blocked for the OAuth redirect

### MCP not connecting

1. Verify the endpoint is accessible:
   ```bash
   curl https://mcp.myop.dev/
   ```
   Should return: `{"status":"ok","version":"1.0.3","server":"myop-mcp"}`

2. Restart your IDE after configuration changes

3. Check your MCP configuration file for JSON syntax errors

### Tools not appearing

If tools aren't showing up after authentication:

1. Verify you completed the OAuth flow
2. Check that your access token is valid
3. Try disconnecting and reconnecting the MCP server

### "Unauthorized" errors

1. Your access token may have expired - reconnect to refresh
2. Verify you authorized the correct scopes during OAuth
3. Check CloudWatch logs if you have server access

### Rate limiting

The server implements rate limiting. If you're making many requests:
- Wait a few seconds between requests
- Batch operations where possible

## Security

- All communication uses HTTPS
- OAuth tokens are securely stored by your MCP client
- Access tokens expire after 30 days
- Refresh tokens can be used to obtain new access tokens
- You can revoke access from the Myop dashboard

## Feedback

Please report issues or suggestions on our [GitHub repository](https://github.com/anthropics/claude-code/issues).