OnlineComponents

Claude Code

1. Run this in a terminal, in your project folder:

claude mcp add --transport http onlinecomponents https://mcp.onlinecomponents.com/mcp

2. Start Claude Code, type /mcp, pick onlinecomponents and choose Authenticate. A browser window opens for the OnlineComponents sign-in.

Add --scope user to make it available in every project, not just this one.

Claude Desktop

1. Open Customize → Connectors, click + Add, then Add custom connector.
2. Name it OnlineComponents and paste this URL:

https://mcp.onlinecomponents.com/mcp

3. Click Add, then Connect, and sign in when OnlineComponents asks.

Claude Desktop’s JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too.

claude.ai

1. Open the connector form on claude.ai. This button fills in the name and URL for you:

Add to claude.ai (opens in a new tab)

2. Check that the URL reads https://mcp.onlinecomponents.com/mcp and click Add.
3. Click Connect and sign in when OnlineComponents asks.

Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under Organization settings → Connectors.

ChatGPT

1. On chatgpt.com, go to Plugins, select +, then Add custom MCP server.
2. Enter a name for the server.
3. Under Connection, paste https://mcp.onlinecomponents.com/mcp as the server URL, then for authentication choose OAuth. ChatGPT sends you to OnlineComponents to sign in.
4. Check I understand and want to continue, then select Create as a plugin.

Whether you can add a custom MCP server depends on your ChatGPT plan and your workspace permissions (in Business workspaces, admins and owners can).

Cursor

Add to Cursor (opens in a new tab)

Or add it by hand to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

{
  "mcpServers": {
    "onlinecomponents": {
      "url": "https://mcp.onlinecomponents.com/mcp"
    }
  }
}

Cursor shows Needs authentication next to the server. Click the button beside it to sign in.

VS Code

Install in VS Code (opens in a new tab)

Or from a terminal:

code --add-mcp '{"name":"onlinecomponents","type":"http","url":"https://mcp.onlinecomponents.com/mcp"}'

Or commit it to the repo in .vscode/mcp.json:

{
  "servers": {
    "onlinecomponents": {
      "type": "http",
      "url": "https://mcp.onlinecomponents.com/mcp"
    }
  }
}

VS Code asks you to sign in the first time the server starts.

Devin Desktop

1. Add it to ~/.config/devin/mcp_config.json (macOS and Linux) or %APPDATA%\devin\mcp_config.json (Windows):

{
  "mcpServers": {
    "onlinecomponents": {
      "serverUrl": "https://mcp.onlinecomponents.com/mcp"
    }
  }
}

2. Refresh the MCP server list in Cascade and sign in when asked.

Devin Desktop is the new name for Windsurf. It reads serverUrl (or url) for remote servers.

Codex

codex mcp add onlinecomponents --url https://mcp.onlinecomponents.com/mcp
codex mcp login onlinecomponents

Or edit ~/.codex/config.toml directly:

[mcp_servers.onlinecomponents]
url = "https://mcp.onlinecomponents.com/mcp"

Gemini CLI

gemini mcp add --transport http onlinecomponents https://mcp.onlinecomponents.com/mcp

Then, inside Gemini CLI, run /mcp auth onlinecomponents to sign in.

This adds it to the current project. Add -s user to use it everywhere.

Any client

Most clients accept this shape. Some name the URL field differently: serverUrl in Devin Desktop, httpUrl in Gemini CLI’s settings file.

{
  "mcpServers": {
    "onlinecomponents": {
      "type": "http",
      "url": "https://mcp.onlinecomponents.com/mcp"
    }
  }
}

Zed puts servers under context_servers in its settings. Cline needs "type": "streamableHttp", or it assumes SSE.

Client only starts local servers? Bridge it with npx -y mcp-remote https://mcp.onlinecomponents.com/mcp.

README badge

[![OnlineComponents on mcp.tc](https://mcp.tc/i/onlinecomponents/badge.svg)](https://mcp.tc/i/onlinecomponents)

<a href="https://mcp.tc/i/onlinecomponents"><img src="https://mcp.tc/i/onlinecomponents/badge.svg" alt="OnlineComponents on mcp.tc" height="20"></a>

It follows the reader’s light or dark mode. Add ?theme=light or ?theme=dark to fix it, or ?style=compact to show the mark without the word.

Website card

<script src="https://mcp.tc/w/onlinecomponents.js" async></script>

The card appears where the tag is. Add data-theme="dark" or data-size="compact" to the tag to change it. The file holds everything it needs, so it makes no other requests and sets no cookies.

iframe

<iframe src="https://mcp.tc/embed/onlinecomponents" title="OnlineComponents on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Use it on pages that don’t allow scripts. Add ?theme=light or ?theme=dark to the address to fix the colors.

JSON

The listing as data for your own pages and tools: name, tagline, the server’s own URL, tools and the “Add to” links. Any site can read it (CORS is open).

https://mcp.tc/i/onlinecomponents.json

What each field means