Framework guide

Add Answers to Next.js

Use Answers when your Next.js site already has answers on public pages or docs and visitors should ask for them. Citations when evidence exists. An explicit no-answer when it does not. The widget is a Client Component.

Install

pnpm add @bootstrapware/answers

Import the stylesheet once. The widget is a Client Component. Non-React pages use the Hosted script embed instead.

Local sample in a Client Component

The local sample needs no paid entitlement. Put it in a file with "use client". The import is the same contract as the React guide and the quickstart.

"use client";

import { Answers, createLocalAdapter } from "@bootstrapware/answers";
import "@bootstrapware/answers/styles.css";

<Answers adapter={createLocalAdapter()} />

Hosted embed

Pass the published app id and a publishable key. Use NEXT_PUBLIC_ only for publishable values. The browser env name is NEXT_PUBLIC_BSW_ANSWERS_PUBLISHABLE_KEY. Never put a secret key in NEXT_PUBLIC_. Passing publishableKey without adapter does not call Hosted ask. See API keys, environments, and modes.

BYO Route Handlers

Point the adapter at your server. The reference is the BYO backend and the adapter. OPENAI_API_KEY stays on the server. Return answered or unanswered. Citations are ids you retrieved.

Limits worth knowing

• Hosted includes 2,500 answers per workspace each month, 1 GiB of knowledge and index, 2,000 sources, 4,000 indexed chunks per app, 20 MiB per file, and 30 days of conversation history.
• Hitting a ceiling stops that part until reset or you remove sources — no surprise invoice.

Pitfalls specific to Next.js

• Rendering the widget without a client boundary.
• Putting a secret key in a public env var.
• Inventing citation URLs the index did not retrieve.
• Expecting Hosted live URL sources on BYO or test.

Related: Quickstart · React guide · Script guide · Cursor · Demo