Myop MCP Server Setup

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

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.

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

Your MCP client redirects you to Myop dashboard for login
After authorization, you're redirected back to your client
Client exchanges the authorization code for an access token
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)
`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.

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

`list_organizations`

Returns organizations the user has access to.

{
  "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)

{
  "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"]
    }
  ]
}

`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:

{
  "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):

{
  "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):

{
  "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:

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

2. Build Your Component

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

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:

Read myop.config.json to get component settings
Call upload_component with name, componentId, and organization
Execute the returned curl command to upload the file

Step 2: Call confirm_upload to finalize

"Confirm the upload"

The AI assistant will:

Call confirm_upload with the uploadId
For new components, save the returned componentId to myop.config.json
Provide the dashboard URL to view the component

4. Updating Existing Components

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

{
  "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

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

After adding the configuration:

Restart Cursor
When you first use MCP features, a browser window will open for OAuth login
Log in to your Myop account and authorize access
Return to Cursor - you should now see the tools available

Setup for Claude Code

Step 1: Add the MCP Server

Run this command in your terminal to add the Myop MCP server:

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

Alternative: You can also add it manually to your Claude Code configuration file at ~/.claude/mcp.json:

{
  "mcpServers": {
    "myop": {
      "transport": "http",
      "url": "https://mcp.myop.dev/mcp"
    }
  }
}

Step 2: Start Claude Code

Open a new terminal and start Claude Code:

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

Find myop in the list of MCP servers
Click on the myop server entry
Click the Authenticate button (or select it from the ... menu)
A browser window will open - log in to your Myop account
Authorize the MCP access when prompted
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 to connect to remote MCP servers with OAuth.

Add the following to your Antigravity MCP configuration:

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

After adding the configuration:

Restart Antigravity
When you first use MCP features, a browser window will open for OAuth login
Log in to your Myop account and authorize access
Tokens are stored locally in ~/.mcp-auth

Troubleshooting: If you encounter authentication issues, clear the local token cache:

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 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

Make sure you're logged into your Myop account at dashboard.myop.dev
Clear your browser cache and try again
Check that pop-ups are not blocked for the OAuth redirect

MCP not connecting

Verify the endpoint is accessible:
```
curl https://mcp.myop.dev/
```
Should return: {"status":"ok","version":"1.0.3","server":"myop-mcp"}
Restart your IDE after configuration changes
Check your MCP configuration file for JSON syntax errors

Tools not appearing

If tools aren't showing up after authentication:

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

"Unauthorized" errors

Your access token may have expired - reconnect to refresh
Verify you authorized the correct scopes during OAuth
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.

Prerequisites​

Server URL​

Authentication​

OAuth Flow​

Available Tools​

Authenticated Tools​

Public Tools​

Tool Details​

whoami​

list_organizations​

list_components​

upload_component​

confirm_upload​

Upload Workflow​

1. Project Configuration​

2. Build Your Component​

3. Upload Process​

4. Updating Existing Components​

Setup for Cursor​

Setup for Claude Code​

Step 1: Add the MCP Server​

Step 2: Start Claude Code​

Step 3: Open the MCP Panel​

Step 4: Authorize the Myop Server​

Setup for Antigravity​

Usage Examples​

Component Discovery​

Component Development​

Account Information​

API Endpoints​

MCP Endpoint​

Health Check​

Troubleshooting​

OAuth login doesn't complete​

MCP not connecting​

Tools not appearing​

"Unauthorized" errors​

Rate limiting​

Security​

Feedback​

Prerequisites

Server URL

Authentication

OAuth Flow

Available Tools

Authenticated Tools

Public Tools

Tool Details

`whoami`

`list_organizations`

`list_components`

`upload_component`

`confirm_upload`

Upload Workflow

1. Project Configuration

2. Build Your Component

3. Upload Process

4. Updating Existing Components

Setup for Cursor

Setup for Claude Code

Step 1: Add the MCP Server

Step 2: Start Claude Code

Step 3: Open the MCP Panel

Step 4: Authorize the Myop Server

Setup for Antigravity

Usage Examples

Component Discovery

Component Development

Account Information

API Endpoints

MCP Endpoint

Health Check

Troubleshooting

OAuth login doesn't complete

MCP not connecting

Tools not appearing

"Unauthorized" errors

Rate limiting

Security

Feedback