# Connect Claude to Beamline

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

Beamline's MCP server: https://mcp.beamline.io/mcp (remote, Streamable HTTP, OAuth sign-in).

One click: [Add to Claude](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Beamline&connectorUrl=https%3A%2F%2Fmcp.beamline.io%2Fmcp)

1. **Add the connector.** Opens Add custom connector with Beamline filled in. Click Add. [Add to Claude](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Beamline&connectorUrl=https%3A%2F%2Fmcp.beamline.io%2Fmcp)
2. **Sign in.** Click Connect, then Google, GitHub or an e-mail code.
3. **Start a chat.** Ask for a screen and the elements it needs. [Try it in Claude](https://claude.ai/new?q=Plan%20my%20app's%20sign-up%20screen%20with%20Beamline%3A%20which%20element%20fits%20each%20field%3F)

Then Claude reads what each of Beamline's 190 React components and screens is for (beamline_capabilities), plans the screen with the right parts. To install them into a repo, use Claude Code, Codex or Cursor. Sign in once with Google, GitHub or an e-mail code: the free sample opens at once, and what your team bought comes with you.

Other agents: [Claude Code](https://beamline.io/connect/claude-code.md) · [Codex](https://beamline.io/connect/codex.md) · [Cursor](https://beamline.io/connect/cursor.md) · [VS Code](https://beamline.io/connect/vscode.md) · [Gemini CLI](https://beamline.io/connect/gemini.md) · [Windsurf](https://beamline.io/connect/windsurf.md) · [ChatGPT](https://beamline.io/connect/chatgpt.md) · [Any MCP client](https://beamline.io/connect/any.md)

- [What Beamline is](https://beamline.io/) · [The component library](https://beamline.io/components/) · [Docs](https://beamline.io/docs) · [Get Beamline](https://beamline.io/checkout?pack=complete)