---
title: Toolbar Quickstart
description: Embed the Cuitty Toolbar in your app in under a minute.
section: Toolbar
order: 1
updatedAt: 2026-05-31
slug: toolbar/quickstart
---
# 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 ``:
```html
```
Reload the page. The toolbar launcher appears in the bottom-right corner. No build step required.
## Astro integration
Install the integration:
```bash
npm install @cuitty/toolbar-astro
```
Add it to your Astro config:
```ts
// 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:
```bash
npm install @cuitty/toolbar-react
```
Render the component at the root of your app:
```tsx
import { CuittyToolbar } from "@cuitty/toolbar-react";
export default function App() {
return (
<>
{/* 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:
| Option | Default | Description |
| ----------- | --------------- | ---------------------------------------- |
| `project` | — | Your Cuitty project ID (required) |
| `env` | `"development"` | Environment label shown in the toolbar |
| `position` | `"bottom-right"`| Launcher position on screen |
| `modules` | all | Array of module names to enable |
| `theme` | `"auto"` | `"light"`, `"dark"`, or `"auto"` |
## What's next
- [Toolbar features](/product/toolbar#features) — full list of modules, keyboard shortcuts, and customization options
- [Toolbar product page](/product/toolbar) — architecture overview, demo, and SDK reference