Packages

Web dashboard

@aip-tech/braid-plugin-ui adds a browser dashboard to your stack: live status, start, stop and restart buttons, and each process's logs. It's optional, and served by the stack itself.

  1. Install

    npm install --save-dev @aip-tech/braid-plugin-ui
    pnpm add --save-dev @aip-tech/braid-plugin-ui
    yarn add --dev @aip-tech/braid-plugin-ui

  2. Add it to your config

    braid.config.ts
    export default defineConfig({
	processes: [/* ... */],
	plugins: ["@aip-tech/braid-plugin-ui"],
});

  3. Open the link braid prints

    [plugin:ui] dashboard ready - open http://127.0.0.1:54213/#token=… in your browser

    The page keeps its access token for the life of the tab, so reloading works. A new tab, or a restarted stack, needs the link again.

What you get

Live status

Every process's state, pid, CPU, memory, restarts and uptime, refreshed every 2 seconds.

Controls

Start, stop and restart buttons, using the same routes as the CLI.

Logs

Each process's output, live and in color, with older lines a click away.

Click a process's name for its own page, with small CPU and memory charts and its log.

Options

plugins: [["@aip-tech/braid-plugin-ui", { path: "/dashboard/" }]],
OptionTypeDefaultDescription
pathstring"/"URL prefix to serve the dashboard under. End it with /.

Compatibility

Version 0.7 needs @aip-tech/braid 0.10 or later, declared as a peer dependency, and Node 22.18 or later. The source is in packages/ui-plugin.