Beamline UI

Beamline UI: componentes de interfaz de React por Danylo Pravda; instalaciones MCP alojadas seleccionan partes. Muestra gratuita MIT. beamline.io

Ver en beamline.io

Servidor MCP alojado

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

Se instala en Claude Code, Codex, Cursor y más

Documentación

Conecta tu agente a Beamline

El código de Beamline y tus archivos de estilo personalizados viven en tu repositorio. Tu aplicación nunca depende de los servidores de Beamline en tiempo de ejecución. El servidor MCP ayuda a tu agente a encontrar e instalar partes; también puedes usar las herramientas locales del kit.

El servidor MCP de Beamline: https://mcp.beamline.io/mcp (remoto, HTTP transmisible). Cuando tu agente te pida iniciar sesión, usa Google, GitHub o un código de correo electrónico: la muestra gratuita se abre de inmediato, y todo lo que tu equipo compró viene contigo. El agente luego lee el menú (beamline_capabilities), instala las partes que una pantalla necesita (beamline_install) y verifica la pantalla con la auditoría.

Claude Code

Agrega el servidor. En cualquier terminal.

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

Inicia sesión. Escribe /mcp en Claude Code, elige beamline, luego Google, GitHub o un código de correo electrónico.
Conecta cada aplicación. Una vez por carpeta de aplicación. Cada sesión posterior allí usa Beamline sin que se te pregunte.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

O envía a Claude Code este mensaje:

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

Agrega el servidor. En cualquier terminal.

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

Inicia sesión. Abre tu navegador: Google, GitHub o un código de correo electrónico.
```
codex mcp login beamline
```
Conecta cada aplicación. Una vez por carpeta de aplicación. Cada sesión posterior allí usa Beamline sin que se te pregunte.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

O envía a Codex este mensaje:

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

Un clic: Agregar a Cursor

Agrega el servidor. Cursor pide instalarlo.
Inicia sesión. En Configuración de Cursor → MCP, haz clic en Necesita inicio de sesión junto a beamline: Google, GitHub o un código de correo electrónico.
Conecta cada aplicación. Una vez por carpeta de aplicación. Cada sesión posterior allí usa Beamline sin que se te pregunte.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

O envía al agente de Cursor este mensaje:

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 en la web y la aplicación de escritorio planifica pantallas y lee cada elemento. Para instalar en tu repositorio, usa Claude Code.

Un clic: Agregar a Claude

Agrega el conector. Abre Agregar conector personalizado con Beamline completado. Haz clic en Agregar.
Inicia sesión. Haz clic en Conectar, luego Google, GitHub o un código de correo electrónico.
Inicia un chat. Pide una pantalla y los elementos que necesita.

VS Code

Un clic: Agregar a VS Code

Agrega el servidor. VS Code pide instalarlo para GitHub Copilot.
Inicia sesión. Inicia beamline cuando VS Code lo pida: Google, GitHub o un código de correo electrónico.
Conecta cada aplicación. Una vez por carpeta de aplicación. Cada sesión posterior allí usa Beamline sin que se te pregunte.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

O envía a Copilot este mensaje:

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

Agrega el servidor. En cualquier terminal.

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

Inicia sesión. Escribe /mcp auth beamline en Gemini CLI: Google, GitHub o un código de correo electrónico.
Conecta cada aplicación. Una vez por carpeta de aplicación. Cada sesión posterior allí usa Beamline sin que se te pregunte.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

O envía a Gemini CLI este mensaje:

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

Agrega el servidor. Cascade → MCP → Abrir archivo de configuración MCP, luego agrega:

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

Inicia sesión. Cuando Windsurf lo pida: Google, GitHub o un código de correo electrónico.
Conecta cada aplicación. Una vez por carpeta de aplicación. Cada sesión posterior allí usa Beamline sin que se te pregunte.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

ChatGPT

ChatGPT planifica pantallas y lee cada elemento. Para construir en tu repositorio, usa Codex.

Activa el modo desarrollador. Configuración → Aplicaciones → Configuración avanzada. Solo planes de pago.
Crea la aplicación. Nómbrala Beamline, pega esta dirección y mantén OAuth.
```
https://mcp.beamline.io/mcp
```
Inicia sesión. ChatGPT abre el inicio de sesión: Google, GitHub o un código de correo electrónico.

Cualquier cliente MCP

Agrega el servidor. HTTP transmisible; inicia sesión con OAuth.

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

Inicia sesión. Cuando tu cliente lo pida: Google, GitHub o un código de correo electrónico.
Conecta cada aplicación. Una vez por carpeta de aplicación. Cada sesión posterior allí usa Beamline sin que se te pregunte.
```
npx --yes -p https://mcp.beamline.io/cli.tgz beamline-connect --hosted https://mcp.beamline.io/mcp
```

O envía a tu agente este mensaje:

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 · Cualquier cliente MCP

Qué es Beamline · La biblioteca de componentes · Documentación · Obtén Beamline
Contacto: hello@beamline.io