{"id":"4e4c6433-2062-4f68-9fc7-6f38af4400ca","slug":"dprvda-beamline","kind":"mcp","name":"beamline","summary":"Beamline UI: designed React parts and screens for your coding agent. Free MIT sample here; full library at beamline.io","owner":"dprvda","repoUrl":"https://github.com/dprvda/beamline","license":"MIT","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"mcp","createdAt":"2026-10-09T00:18:32.000Z","addedAt":"2026-10-28T09:07:41.874Z","logoUrl":"https://avatars.githubusercontent.com/u/126103855?u=ce01257f421686c083efc08982c2d40cec2192fd&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","developer-tools","cloud-infra"],"tags":["ai-agents","claude-code","codex","component-library","cursor","dark-mode","design-system","radix-ui"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-28T09:08:44.296Z","sample":false,"url":"https://conduits.dev/tools/dprvda-beamline","language":"TypeScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Beamline UI\n\nDesigned React parts and complete screens for your coding agent. Every part comes finished: states, motion, phone layouts and nine looks, as editable code in your app.\n\n[Live library](https://beamline.io/components/) · [Install](https://beamline.io/docs/install) · [Docs](https://beamline.io/docs) · [GitBook](https://beamline.gitbook.io/beamline-docs/)\n\n[![A support agent's refund run under review: the customer's message, the agent's reasoning, its tool calls, the reply waiting for approval and the run's trace](assets/readme/agent-run.webp)](https://beamline.io/components/run-trace)\n\n**Free in this repository, MIT:** the screen above, built from [Run trace](https://beamline.io/components/run-trace), [Reasoning](https://beamline.io/components/reasoning) and [Tool call](https://beamline.io/components/tool-call). Approve the reply and the send runs live in the trace; open a tool call and its bar is picked out. A complete Settings screen is the second tab. Commercial use is included.\n\nThe [Complete System](https://beamline.io/) has **240+ components and 340+ complete screens** for SaaS, dashboards, trading, AI and voice interfaces. It has a separate [commercial licence](https://beamline.io/docs/licence). Your app supplies its data, authentication, model and other backend services.\n\n[![Beamline campaign dashboard with performance charts, campaign controls and an AI assistant](assets/readme/hero-final-frame.webp)](https://beamline.io/)\n\nCampaign dashboard from the [Complete System](https://beamline.io/), as seen in the homepage demo.\n\n[![Public sample proof](https://github.com/dprvda/beamline/actions/workflows/public-proof.yml/badge.svg?branch=main)](https://github.com/dprvda/beamline/actions/workflows/public-proof.yml)\n\n## Run the sample\n\n```bash\ngit clone https://github.com/dprvda/beamline.git\ncd beamline\nnpm install\nnpm run dev\n```\n\nReact 19, TypeScript, Vite and Tailwind v4. The run and the customer are labelled sample data; approving only plays the send, and Settings saves in your browser. No account or API key is needed.\n\nOr add a free part to an existing React app with the shadcn CLI:\n\n```bash\nnpx shadcn@latest add https://beamline.io/registry/run-trace.json\n```\n\nFollow the installer's local runtime, look and stylesheet instructions. [Full installation guide](https://beamline.io/docs/install).\n\n## On a phone\n\nThe same screen re-ranks for a phone: the decision first, the trace below it.\n\n<a href=\"https://beamline.io/components/run-trace\"><img src=\"assets/readme/agent-run-phone.png\" alt=\"The agent run on a phone: the customer's message, reasoning, tool calls and the reply waiting for approval\" width=\"300\"></a>\n\n## What you can build with the complete system\n\nThese examples are part of the paid Complete System, beyond this repository's free sample. Open each image to try its live demo.\n\n[![AI workspace with a cited answer, a plan awaiting approval, conversation history and sources](assets/readme/agent-workspace.png)](https://beamline.io/components/agent-workspace)\n\n**AI workspace.** Threads, reasoning, sources and approval controls. Connect your own model, storage and authorized actions. [AI interface guide](https://beamline.io/guides/ai-agent-interface).\n\n[![Trading terminal with a candlestick chart, watchlist, order book, order ticket and positions](assets/readme/trading-terminal.png)](https://beamline.io/components/trading-terminal)\n\n**Trading terminal.** Chart, market list, order book and order entry in one screen. The pictured prices and orders are demo data. [Trading UI guide](https://beamline.io/guides/react-trading-terminal).\n\n[Explore dashboards, forms, tables, charts, voice and more →](https://beamline.io/components/)\n\n## Make it yours\n\n- **Local code.** Choose editable source or compiled archives stored with your app. Installed UI does not call Beamline servers at runtime.\n- **Your style.** Start from a look, then adjust tokens, fonts, radii, density and motion. Keep custom style files in your app. [Customization](https://beamline.io/docs/customize).\n- **One component vocabulary.** Shared variants, sizes, tones and controlled/uncontrolled state. Component metadata documents the actual props.\n- **Optional agent help.** Claude Code, Codex, Cursor and other clients can discover and install the same parts. [Connect your agent](https://beamline.io/connect).\n- **Your application logic.** Data and actions pass through props and callbacks; permissions and persistence remain in your app.\n\nThe sample includes Run trace, Reasoning, Tool call, Settings and the fields, choices, tables, dialogs, navigation, feedback and appearance controls they use. [Browse the library](https://beamline.io/components/) for live examples and usage.\n\n## Public checks you can inspect\n\nThe badge links to the actual workflow result. It installs the current public Settings source into fresh Vite and Next.js apps, typechecks and builds them, then exercises saving, reload, navigation, dialogs, focus and layout.\n\nChromium, Firefox, WebKit and **Safari on macOS** are normal jobs. Phone sizes are browser emulation; a physical iPhone is not covered. The separate iOS Simulator workflow remains [on demand](.github/workflows/ios-qualification.yml) and is not yet qualified.\n\n[Rerun the checks](tests/public-proof/README.md) · [Workflow and retained results](https://github.com/dprvda/beamline/actions/workflows/public-proof.yml) · [Dated product checks and limits](https://beamline.io/tested)\n\n## Documentation\n\n- [Installation](https://beamline.io/docs/install) · [Customization](https://beamline.io/docs/customize) · [Upgrades](https://beamline.io/docs/upgrade)\n- [Connect your data](https://beamline.io/docs/data-integration) · [Guides](https://beamline.io/guides)\n- [GitBook docs](https://beamline.gitbook.io/beamline-docs/) · [Comparisons](https://beamline.io/compare) · [Changelog](https://beamline.io/changelog)\n- [Current pricing](https://beamline.io/pricing) · [Partner programme](https://beamline.io/account/referrals)\n\n## Licence\n\nThe code in this repository is **MIT**, including commercial use: [LICENSE](LICENSE). Third-party packages and fonts are listed in [NOTICE.md](NOTICE.md).\n\nThe Complete System gives one person Beamline account, library, MCP, install and update access. Teammates, contractors and clients may work with the code installed in that end product. They need their own licence for Beamline access or to take paid parts into other apps. Redistribution of paid parts as a kit, theme, template or starter is restricted. Lifetime updates cover new versions of the purchased system for as long as it is published; versions already received stay yours. [Current licence](https://beamline.io/docs/licence) and [terms](https://beamline.io/terms) govern the paid product.\n\nMade by [Danylo Pravda](https://beamline.io/about) in Kyiv, Ukraine. [hello@beamline.io](mailto:hello@beamline.io).\n"}