@headband/cli

Interactive CLI for setting up Headband search in any project.

Usage

npx @headband/cli init

This will:

1. Ask for your Headband URL (default: https://headband.dev)
2. Ask for your search API key (hb_src_... or hb_adm_...)
3. Ask for your default search index (e.g. products, movies)
4. Detect your package manager (npm, pnpm, yarn, or bun)
5. Install @headband/react
6. Create headband.config.ts with your settings
7. Create an example <HeadbandSearch /> component

Options

npx @headband/cli init --yes   # Skip prompts, use defaults
npx @headband/cli --help       # Show help

What gets created

headband.config.ts -- Search configuration that reads from NEXT_PUBLIC_HEADBAND_KEY env var with a fallback:

export const headbandConfig = {
  url: "https://headband.dev",
  searchKey: process.env.NEXT_PUBLIC_HEADBAND_KEY || "hb_src_...",
  defaultIndex: "products",
};

components/headband-search.tsx (or src/components/ if your project uses a src/ directory) -- A ready-to-use search component:

"use client";

import {
  headband,
  HeadbandProvider,
  SearchBox,
  Hits,
  Stats,
} from "@headband/react";
import { headbandConfig } from "../headband.config";

const client = headband(headbandConfig.url, headbandConfig.searchKey);

export function HeadbandSearch() {
  return (
    <HeadbandProvider client={client} index={headbandConfig.defaultIndex}>
      <SearchBox placeholder={`Search products...`} />
      <Stats />
      <Hits />
    </HeadbandProvider>
  );
}

License

MIT