# Guides

How to build real screens with Beamline and your coding agent.

- [Build an AI agent interface in React](https://beamline.io/guides/ai-agent-interface.md): The parts of an AI agent or copilot UI in React and what each one is for: streamed answers, reasoning traces, tool calls, plans and approvals, citations, the composer, and the whole workspace screen.
- [Give your coding agent a component system](https://beamline.io/guides/coding-agent-component-system.md): How Claude Code, Codex or Cursor builds UI from Beamline over MCP, step by step: what the agent reads, what it installs, which files land in your repo and how the audit catches shortcuts.
- [Build an analytics dashboard in React](https://beamline.io/guides/react-analytics-dashboard.md): A SaaS analytics dashboard in React on your own metrics API: KPIs, revenue, channels, plan mix and uptime under one set of filters, with honest missing data, loading placeholders and a failed state.
- [Build a data grid and CRM screen in React](https://beamline.io/guides/react-data-grid-crm.md): A virtualised React data grid for thousands of rows (sorting, filters, pinning, inline edit, range selection, footer totals, full keyboard) and a CRM pipeline screen built on it.
- [React performance lessons from 517 examples](https://beamline.io/guides/react-performance-lessons.md): What measuring every example of 190 React components frame by frame at 120 Hz found: per-instance layout reads, effects without dependencies, theme state, and the fixes with before and after numbers.
- [Build a SaaS settings page in React](https://beamline.io/guides/react-settings-page.md): A complete settings area for a SaaS app in React: profile, workspace, members and roles, billing and seats, notifications and API keys, with one draft, a real save handler and safe destructive actions.
- [Build sign-in and sign-up in React](https://beamline.io/guides/react-sign-in-sign-up.md): A complete sign-in and sign-up flow in React on any auth service: passwords, e-mailed codes, magic links, passkeys and single sign-on, validation, a bot check slot and legal links, with your handlers in charge.
- [Build a trading terminal in React](https://beamline.io/guides/react-trading-terminal.md): Build a crypto or stock trading screen in React with Beamline: an order book, candles, depth, order ticket and positions on your own market feed and order API, with what each part handles for you.
- [Build a voice agent UI in React](https://beamline.io/guides/react-voice-agent-ui.md): A voice agent interface in React on any speech provider: a support panel, a call screen and a voice workspace on one session, the agent's orb, a live transcript, mute, typing and every microphone state.
- [Theme a React app from one brand colour](https://beamline.io/guides/theme-react-components-brand-colour.md): How Beamline themes every component from one brand colour, light or dark, and nine looks that restyle type, surfaces and motion at once, without a layout moving. With the props and tokens to change.