Beamline UI

Beamline UI: React UI components by Danylo Pravda; hosted MCP installs selected parts. Free MIT sample. beamline.io

Hosted MCP Server

npx add-mcp 'https://mcp.beamline.io/mcp'

Installs into Claude Code, Codex, Cursor and more

Documentation

Connect your agent to Beamline

Beamline code and your custom style files live in your repo. Your app never depends on Beamline servers at runtime. The MCP server helps your agent find and install parts; you can also use the local kit tools.

Beamline's MCP server: https://mcp.beamline.io/mcp (remote, streamable HTTP). When your agent asks you to sign in, use Google, GitHub or an e-mail code: the free sample opens at once, and everything your team bought comes with you. The agent then reads the menu (beamline_capabilities), installs the parts a screen needs (beamline_install) and checks the screen with the audit.

Claude Code

Add the server. In any terminal.

claude mcp add --transport http --scope user beamline https://mcp.beamline.io/mcp

Sign in. Type /mcp in Claude Code, choose beamline, then Google, GitHub or an e-mail code.

Connect each app. Once per app folder. Every later session there uses Beamline without being asked.

npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp

Or send Claude Code this message:

Set up Beamline for this app, so you build its UI from Beamline's React components.
1. Add the MCP server: run `claude mcp add --transport http --scope user beamline https://mcp.beamline.io/mcp`.
2. Connect this app: in its folder, run `npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp`.
3. Ask me to type /mcp, choose beamline and sign in (Google, GitHub or an e-mail code).
4. When I say I'm signed in, call beamline_capabilities, read every part, and tell me Beamline is ready.

Codex

Add the server. In any terminal.

codex mcp add beamline --url https://mcp.beamline.io/mcp

Sign in. Opens your browser: Google, GitHub or an e-mail code.
```
codex mcp login beamline
```

Connect each app. Once per app folder. Every later session there uses Beamline without being asked.

npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp

Or send Codex this message:

Set up Beamline for this app, so you build its UI from Beamline's React components.
1. Add the MCP server: run `codex mcp add beamline --url https://mcp.beamline.io/mcp`.
2. Sign in: run `codex mcp login beamline` and ask me to finish in the browser it opens (Google, GitHub or an e-mail code).
3. Connect this app: in its folder, run `npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp`.
4. Tell me to start a new Codex session in this app: it loads the tools. From then on, call beamline_capabilities before any UI work.

Cursor

One click: Add to Cursor

Add the server. Cursor asks to install it.
Sign in. In Cursor Settings → MCP, click Needs login beside beamline: Google, GitHub or an e-mail code.

Connect each app. Once per app folder. Every later session there uses Beamline without being asked.

npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp

Or send Cursor's agent this message:

Set up Beamline for this app, so you build its UI from Beamline's React components.
1. Connect this app: in its folder, run `npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp`. It adds the beamline MCP server and a Cursor rule.
2. Ask me to open Cursor Settings → MCP, turn beamline on and click Needs login (Google, GitHub or an e-mail code).
3. When I say I'm signed in, call beamline_capabilities, read every part, and tell me Beamline is ready.

Claude

Claude on the web and the desktop app plans screens and reads every element. To install into your repo, use Claude Code.

One click: Add to Claude

Add the connector. Opens Add custom connector with Beamline filled in. Click Add.
Sign in. Click Connect, then Google, GitHub or an e-mail code.
Start a chat. Ask for a screen and the elements it needs.

VS Code

One click: Add to VS Code

Add the server. VS Code asks to install it for GitHub Copilot.
Sign in. Start beamline when VS Code asks: Google, GitHub or an e-mail code.

Connect each app. Once per app folder. Every later session there uses Beamline without being asked.

npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp

Or send Copilot this message:

Set up Beamline for this app, so you build its UI from Beamline's React components.
1. Connect this app: in its folder, run `npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp`. It writes the Beamline note into AGENTS.md.
2. Ask me to start the beamline server in VS Code when it asks, and sign in (Google, GitHub or an e-mail code).
3. When I say I'm signed in, call beamline_capabilities, read every part, and tell me Beamline is ready.

Gemini CLI

Add the server. In any terminal.

gemini mcp add --scope user --transport http beamline https://mcp.beamline.io/mcp

Sign in. Type /mcp auth beamline in Gemini CLI: Google, GitHub or an e-mail code.

Connect each app. Once per app folder. Every later session there uses Beamline without being asked.

npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp

Or send Gemini CLI this message:

Set up Beamline for this app, so you build its UI from Beamline's React components.
1. Add the MCP server: run `gemini mcp add --scope user --transport http beamline https://mcp.beamline.io/mcp`.
2. Connect this app: in its folder, run `npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp`.
3. Ask me to type /mcp auth beamline and sign in (Google, GitHub or an e-mail code).
4. When I say I'm signed in, call beamline_capabilities, read every part, and tell me Beamline is ready.

Windsurf

Add the server. Cascade → MCP → Open MCP config file, then add:

{
  "mcpServers": {
    "beamline": {
      "serverUrl": "https://mcp.beamline.io/mcp"
    }
  }
}

Sign in. When Windsurf asks: Google, GitHub or an e-mail code.

Connect each app. Once per app folder. Every later session there uses Beamline without being asked.

npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp

ChatGPT

ChatGPT plans screens and reads every element. To build in your repo, use Codex.

Turn on developer mode. Settings → Apps → Advanced settings. Paid plans only.
Create the app. Name it Beamline, paste this address and keep OAuth.
```
https://mcp.beamline.io/mcp
```
Sign in. ChatGPT opens the sign-in: Google, GitHub or an e-mail code.

Any MCP client

Add the server. Streamable HTTP; it signs in with OAuth.

{
  "mcpServers": {
    "beamline": {
      "url": "https://mcp.beamline.io/mcp"
    }
  }
}

Sign in. When your client asks: Google, GitHub or an e-mail code.

Connect each app. Once per app folder. Every later session there uses Beamline without being asked.

npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp

Or send your agent this message:

Set up Beamline for this app, so you build its UI from Beamline's React components.
1. Add the MCP server "beamline" at https://mcp.beamline.io/mcp (Streamable HTTP; it signs in with OAuth).
2. Connect this app: in its folder, run `npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp`.
3. Ask me to sign in when the server asks (Google, GitHub or an e-mail code).
4. When I say I'm signed in, call beamline_capabilities, read every part, and tell me Beamline is ready.

Each agent's page: Claude Code · Codex · Cursor · Claude · VS Code · Gemini CLI · Windsurf · ChatGPT · Any MCP client

What Beamline is · The component library · Docs · Get Beamline
Contact: hello@beamline.io