Beamline UI

Beamline UI: componentes de interface React por Danylo Pravda; instalações MCP hospedadas selecionam partes específicas. Amostra gratuita sob MIT. beamline.io

Ver em beamline.io

Servidor MCP hospedado

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

Instala no Claude Code, Codex, Cursor e outros

Documentação

Conecte seu agente ao Beamline

O código do Beamline e seus arquivos de estilo personalizados ficam no seu repositório. Seu aplicativo nunca depende dos servidores do Beamline em tempo de execução. O servidor MCP ajuda seu agente a encontrar e instalar componentes; você também pode usar as ferramentas locais do kit.

Servidor MCP do Beamline: https://mcp.beamline.io/mcp (remoto, HTTP streamable). Quando seu agente pedir para você entrar, use Google, GitHub ou um código de e-mail: a amostra gratuita abre na hora, e tudo que sua equipe comprou vem com você. O agente então lê o menu (beamline_capabilities), instala os componentes que uma tela precisa (beamline_install) e verifica a tela com a auditoria.

Claude Code

Adicione o servidor. Em qualquer terminal.

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

Entre. Digite /mcp no Claude Code, escolha beamline, depois Google, GitHub ou um código de e-mail.
Conecte cada aplicativo. Uma vez por pasta de aplicativo. Toda sessão posterior ali usa o Beamline sem ser perguntado.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

Ou envie esta mensagem ao Claude Code:

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

Adicione o servidor. Em qualquer terminal.

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

Entre. Abre seu navegador: Google, GitHub ou um código de e-mail.
```
codex mcp login beamline
```
Conecte cada aplicativo. Uma vez por pasta de aplicativo. Toda sessão posterior ali usa o Beamline sem ser perguntado.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

Ou envie esta mensagem ao Codex:

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

Um clique: Adicionar ao Cursor

Adicione o servidor. O Cursor pede para instalá-lo.
Entre. Em Cursor Settings → MCP, clique em Needs login ao lado de beamline: Google, GitHub ou um código de e-mail.
Conecte cada aplicativo. Uma vez por pasta de aplicativo. Toda sessão posterior ali usa o Beamline sem ser perguntado.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

Ou envie esta mensagem ao agente do Cursor:

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

O Claude na web e no aplicativo de desktop planeja telas e lê cada elemento. Para instalar no seu repositório, use o Claude Code.

Um clique: Adicionar ao Claude

Adicione o conector. Abre Add custom connector com Beamline preenchido. Clique em Add.
Entre. Clique em Connect, depois Google, GitHub ou um código de e-mail.
Inicie um chat. Peça uma tela e os elementos que ela precisa.

VS Code

Um clique: Adicionar ao VS Code

Adicione o servidor. O VS Code pede para instalá-lo para o GitHub Copilot.
Entre. Inicie o beamline quando o VS Code pedir: Google, GitHub ou um código de e-mail.
Conecte cada aplicativo. Uma vez por pasta de aplicativo. Toda sessão posterior ali usa o Beamline sem ser perguntado.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

Ou envie esta mensagem ao Copilot:

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

Adicione o servidor. Em qualquer terminal.

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

Entre. Digite /mcp auth beamline no Gemini CLI: Google, GitHub ou um código de e-mail.
Conecte cada aplicativo. Uma vez por pasta de aplicativo. Toda sessão posterior ali usa o Beamline sem ser perguntado.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

Ou envie esta mensagem ao Gemini CLI:

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

Adicione o servidor. Cascade → MCP → Open MCP config file, depois adicione:

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

Entre. Quando o Windsurf pedir: Google, GitHub ou um código de e-mail.
Conecte cada aplicativo. Uma vez por pasta de aplicativo. Toda sessão posterior ali usa o Beamline sem ser perguntado.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

ChatGPT

O ChatGPT planeja telas e lê cada elemento. Para construir no seu repositório, use o Codex.

Ative o modo de desenvolvedor. Settings → Apps → Advanced settings. Apenas planos pagos.
Crie o aplicativo. Nomeie-o Beamline, cole este endereço e mantenha OAuth.
```
https://mcp.beamline.io/mcp
```
Entre. O ChatGPT abre a tela de login: Google, GitHub ou um código de e-mail.

Qualquer cliente MCP

Adicione o servidor. Streamable HTTP; ele entra com OAuth.

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

Entre. Quando seu cliente pedir: Google, GitHub ou um código de e-mail.
Conecte cada aplicativo. Uma vez por pasta de aplicativo. Toda sessão posterior ali usa o Beamline sem ser perguntado.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

Ou envie esta mensagem ao seu agente:

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.

Página de cada agente: Claude Code · Codex · Cursor · Claude · VS Code · Gemini CLI · Windsurf · ChatGPT · Qualquer cliente MCP

O que é o Beamline · A biblioteca de componentes · Documentação · Obter o Beamline
Contato: hello@beamline.io