# Hypertune Toolbar
## Overview
The Hypertune Toolbar lets you view and override feature flags directly in your frontend.
## Setup
### 1. Ensure Tailwind CSS is set up
Make sure your project has Tailwind CSS set up and that you are importing its base styles.
### 2. Create a flag to control visibility
In the Hypertune UI, create a flag called `showHypertuneToolbar`. This flag will control whether the Hypertune Toolbar is visible.
### 3. Set the environment variable
Set the `HYPERTUNE_INCLUDE_TOOLBAR` environment variable to `true`:
{% code title=".env" %}
```bash
HYPERTUNE_INCLUDE_TOOLBAR=true
```
{% endcode %}
### 4. Regenerate the client
Regenerate the client:
{% tabs %}
{% tab title="npm" %}
```bash
npx hypertune
```
{% endtab %}
{% tab title="yarn" %}
```bash
yarn hypertune
```
{% endtab %}
{% tab title="pnpm" %}
```bash
pnpm hypertune
```
{% endtab %}
{% endtabs %}
### 5. Add the `` component
Add the generated `` component to your app, passing it the path to the flag you created earlier via the `showFlagPath` prop:
{% code title="app/layout.tsx" %}
```typescript
import { HypertuneProvider } from '@/generated/hypertune.react'
import { HypertuneToolbar } from '@/generated/HypertuneToolbar'
import getHypertune from '@/lib/getHypertune'
import './globals.css'
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
const hypertune = await getHypertune()
const dehydratedState = hypertune.dehydrate()
const rootArgs = hypertune.getRootArgs()
return (
{children}
)
}
```
{% endcode %}
### 6. Handle overrides on the server
Overrides are stored in a cookie called `hypertuneOverride`. If you're using Next.js or hydrating the SDK from the server, update your `getHypertune` function to read this cookie and pass it to `hypertuneSource.setOverride`:
{% code title="lib/getHypertune.ts" %}
```typescript
import 'server-only'
import { DeepPartial } from 'hypertune'
import { unstable_noStore as noStore } from 'next/cache'
import { cookies } from 'next/headers'
import {
createSource,
overrideCookieName,
Source,
} from '@/generated/hypertune'
const hypertuneSource = createSource({
token: process.env.NEXT_PUBLIC_HYPERTUNE_TOKEN!,
})
export default async function getHypertune({
isRouteHandler = false,
}: {
isRouteHandler?: boolean
} = {}) {
noStore()
await hypertuneSource.initIfNeeded()
hypertuneSource.setRemoteLoggingMode(
isRouteHandler ? 'normal' : 'off'
)
hypertuneSource.setOverride(await getOverrideFromCookie())
return hypertuneSource.root({
args: {
context: {
environment: process.env.NODE_ENV,
user: {
id: 'e23cc9a8-0287-40aa-8500-6802df91e56a',
name: 'Example User',
email: 'user@example.com',
},
},
},
})
}
async function getOverrideFromCookie(): Promise | null> {
try {
const cookieStore = await cookies()
const overrideCookie = cookieStore.get(overrideCookieName)
if (!overrideCookie?.value) {
return null
}
return JSON.parse(overrideCookie.value)
} catch (error) {
console.warn(
`Failed to parse ${overrideCookieName} cookie:`,
error
)
return null
}
}
```
{% endcode %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.hypertune.com/sdk-reference/hypertune-toolbar.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.