Toolbar

Toolbar Quickstart

Embed the Cuitty Toolbar in your app in under a minute.

HTML Markdown JSON

Toolbar Quickstart

The Cuitty Toolbar is a floating dev-tools widget that embeds directly into your application. It gives your team instant access to logs, deploys, feature flags, secrets, and cost data without leaving the app. This guide covers three ways to add it.

Script tag (fastest)

Drop a single script tag into your HTML <head>:

<script
  src="https://cdn.cuitty.com/toolbar/v1/toolbar.js"
  data-cuitty-project="your-project-id"
  data-cuitty-env="staging"
  defer
></script>

Reload the page. The toolbar launcher appears in the bottom-right corner. No build step required.

Astro integration

Install the integration:

npm install @cuitty/toolbar-astro

Add it to your Astro config:

// astro.config.mjs
import { defineConfig } from "astro/config";
import cuittyToolbar from "@cuitty/toolbar-astro";

export default defineConfig({
  integrations: [
    cuittyToolbar({
      project: "your-project-id",
      env: "staging",
    }),
  ],
});

The integration injects the toolbar script automatically in dev and preview modes. Pass environments: ["production"] to include it in production builds.

React component

Install the React package:

npm install @cuitty/toolbar-react

Render the component at the root of your app:

import { CuittyToolbar } from "@cuitty/toolbar-react";

export default function App() {
  return (
    <>
      <CuittyToolbar
        project="your-project-id"
        env="staging"
      />
      {/* rest of your app */}
    </>
  );
}

The component renders nothing visible in the DOM — it loads the toolbar script and initializes it with your configuration.

What you’ll see

Once loaded, the toolbar shows a floating launcher with five icons:

  1. Logs — live tail of application logs filtered to the current page
  2. Deploys — recent deploy history with commit links and rollback buttons
  3. Flags — feature flag overrides scoped to your session
  4. Secrets — masked secret values with copy and rotation shortcuts
  5. Costs — real-time cost breakdown for the current project

Click any icon to open its panel. The toolbar communicates with the Cuitty portal API using your project ID, so the portal must be reachable from the browser.

Configuration basics

Pass configuration as data- attributes (script tag) or props (component). The most common options:

OptionDefaultDescription
project—Your Cuitty project ID (required)
env"development"Environment label shown in the toolbar
position"bottom-right"Launcher position on screen
modulesallArray of module names to enable
theme"auto""light", "dark", or "auto"

What’s next