Beacon UI is the official frontend developer console and dashboard for the Beacon real-time message broker. Built on React and Vite, it provides developers with a sleek, responsive interface to manage topic registries, edit validation schemas, configure webhook delivery paths, inspect real-time streams, check telemetry analytics, and manage access keys.
- Developer Dashboard: A centralized console showing your active topics, profile states, and integration options.
- Real-Time Stream Feed: Connect to any topic via WebSockets or Server-Sent Events (SSE). Pause, search, filter, and inspect incoming JSON payloads in real time.
- Endpoint & Topic Manager: Create, edit, and delete event paths. Control privacy configurations (Public/Private), edit description metadata, and manage payload validation schemas.
- Outbound Webhooks Log: View analytical delivery logs for your outbound webhooks, checking status codes, duration times, payloads, and retry history.
- Ingestion Test Sandbox: An interactive playground inside the console to compose and POST mock payloads to your topics to verify schema validations and webhook dispatches.
- Key Manager: Rotate your root administrative account API key (
bc_...) or configure scoped topic-specific API keys (bt_...). - Code Snippet Generator: Automatically generates preconfigured client integration code for
curl, Node.js, Python, Go, and Rust. - CLI Authentication Loopback: Supports headless login redirection. When you run
beaconcli loginin your terminal, the UI handles your browser-based login and securely redirects session details back to your local CLI loopback listener.
- Framework: React 19 + Vite 8
- Styling: Tailwind CSS v4 (using the
@tailwindcss/viteplugin) - Icons: Lucide React
- Animations: Anime.js (for smooth page entries, staggering lists, and micro-interactions)
- Design Base: Radix UI Primitives & custom UI components styled with Tailwind CSS
Below is a breakdown of the key files in the UI application:
- src/App.jsx: The main application shell. Manages authentication status, handles routing paths, controls theme configuration, and sets up global state.
- src/components/Homepage.jsx: The landing screen welcoming developers, linking documentation guides, and explaining the system pipeline.
- src/components/EndpointManager.jsx: Lists user-owned topics and allows instant provisioning of new message channels.
- src/components/TopicSettingsModal.jsx: An advanced configuration modal for topics. Allows adding/deleting webhook endpoints, editing the AJV JSON validation schema, and generating topic-scoped keys.
- src/components/MessageFeed.jsx: Integrates the SSE and WebSockets subscribers, rendering incoming notifications live.
- src/components/SandboxTab.jsx: Provides the testing interface to publish test payloads directly from the web browser.
- src/components/AnalyticsTab.jsx: Connects to the backend analytics API to render message counts, daily ingest volumes, and webhook logs.
- src/components/DocsTab.jsx: Pre-populates integration code snippets with the user's active API keys and topic endpoints.
- src/components/AuthForm.jsx: Renders the login and signup card forms, including password security checks.
- src/components/ProfileModal.jsx: Handles developer profile updates and root API key resets.
The application references a local configuration file in the root directory to define the backend API target URL:
VITE_API_BASE=http://localhost:3000- In Development: Point this to your local running Beacon server (default is
http://localhost:3000). - In Production: Point this to your deployed cloud backend instance (e.g.
https://your-backend.vercel.app). If omitted, it defaults to the main production server.
npm installnpm run devThe Vite dev server will boot up, typically at http://localhost:5173.
To compile the application bundle with optimized asset chunking:
npm run buildThe output assets will be exported to the dist/ directory, ready to be hosted on static providers like Vercel, Netlify, or AWS S3.
This project is licensed under the ISC License.