{ "slug": "toolbar/quickstart", "title": "Toolbar Quickstart", "description": "Embed the Cuitty Toolbar in your app in under a minute.", "url": "https://cuitty.com/docs/toolbar/quickstart", "markdown_url": "https://cuitty.com/docs/toolbar/quickstart.md", "json_url": "https://cuitty.com/docs/toolbar/quickstart.json", "frontmatter": { "title": "Toolbar Quickstart", "description": "Embed the Cuitty Toolbar in your app in under a minute.", "order": 1, "section": "Toolbar", "updatedAt": "2026-05-31" }, "headings": [ { "depth": 1, "slug": "toolbar-quickstart", "text": "Toolbar Quickstart" }, { "depth": 2, "slug": "script-tag-fastest", "text": "Script tag (fastest)" }, { "depth": 2, "slug": "astro-integration", "text": "Astro integration" }, { "depth": 2, "slug": "react-component", "text": "React component" }, { "depth": 2, "slug": "what-youll-see", "text": "What you’ll see" }, { "depth": 2, "slug": "configuration-basics", "text": "Configuration basics" }, { "depth": 2, "slug": "whats-next", "text": "What’s next" } ], "body_markdown": "# Toolbar Quickstart\n\nThe 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.\n\n## Script tag (fastest)\n\nDrop a single script tag into your HTML ``:\n\n```html\n\n```\n\nReload the page. The toolbar launcher appears in the bottom-right corner. No build step required.\n\n## Astro integration\n\nInstall the integration:\n\n```bash\nnpm install @cuitty/toolbar-astro\n```\n\nAdd it to your Astro config:\n\n```ts\n// astro.config.mjs\nimport { defineConfig } from \"astro/config\";\nimport cuittyToolbar from \"@cuitty/toolbar-astro\";\n\nexport default defineConfig({\n integrations: [\n cuittyToolbar({\n project: \"your-project-id\",\n env: \"staging\",\n }),\n ],\n});\n```\n\nThe integration injects the toolbar script automatically in dev and preview modes. Pass `environments: [\"production\"]` to include it in production builds.\n\n## React component\n\nInstall the React package:\n\n```bash\nnpm install @cuitty/toolbar-react\n```\n\nRender the component at the root of your app:\n\n```tsx\nimport { CuittyToolbar } from \"@cuitty/toolbar-react\";\n\nexport default function App() {\n return (\n <>\n \n {/* rest of your app */}\n \n );\n}\n```\n\nThe component renders nothing visible in the DOM — it loads the toolbar script and initializes it with your configuration.\n\n## What you'll see\n\nOnce loaded, the toolbar shows a floating launcher with five icons:\n\n1. **Logs** — live tail of application logs filtered to the current page\n2. **Deploys** — recent deploy history with commit links and rollback buttons\n3. **Flags** — feature flag overrides scoped to your session\n4. **Secrets** — masked secret values with copy and rotation shortcuts\n5. **Costs** — real-time cost breakdown for the current project\n\nClick 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.\n\n## Configuration basics\n\nPass configuration as `data-` attributes (script tag) or props (component). The most common options:\n\n| Option | Default | Description |\n| ----------- | --------------- | ---------------------------------------- |\n| `project` | — | Your Cuitty project ID (required) |\n| `env` | `\"development\"` | Environment label shown in the toolbar |\n| `position` | `\"bottom-right\"`| Launcher position on screen |\n| `modules` | all | Array of module names to enable |\n| `theme` | `\"auto\"` | `\"light\"`, `\"dark\"`, or `\"auto\"` |\n\n## What's next\n\n- [Toolbar features](/product/toolbar#features) — full list of modules, keyboard shortcuts, and customization options\n- [Toolbar product page](/product/toolbar) — architecture overview, demo, and SDK reference", "body_html": "

Toolbar Quickstart

\n

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.

\n

Script tag (fastest)

\n

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

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

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

\n

Astro integration

\n

Install the integration:

\n
npm install @cuitty/toolbar-astro
\n

Add it to your Astro config:

\n
// astro.config.mjs\nimport { defineConfig } from \"astro/config\";\nimport cuittyToolbar from \"@cuitty/toolbar-astro\";\n\nexport default defineConfig({\n  integrations: [\n    cuittyToolbar({\n      project: \"your-project-id\",\n      env: \"staging\",\n    }),\n  ],\n});
\n

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

\n

React component

\n

Install the React package:

\n
npm install @cuitty/toolbar-react
\n

Render the component at the root of your app:

\n
import { CuittyToolbar } from \"@cuitty/toolbar-react\";\n\nexport default function App() {\n  return (\n    <>\n      <CuittyToolbar\n        project=\"your-project-id\"\n        env=\"staging\"\n      />\n      {/* rest of your app */}\n    </>\n  );\n}
\n

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

\n

What you’ll see

\n

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

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

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.

\n

Configuration basics

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
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\"
\n

What’s next

\n", "links_out": [ "/product/toolbar#features", "/product/toolbar" ] }