Getting started

From an empty Next.js app to a working chat in about 15 minutes. You need Node 22 or later, a Next.js 16 app that uses the App Router, and an OpenAI account.

No Next.js app yet? Create one with the Next.js installation guide, then come back.

1. Get an OpenAI key

1. In the OpenAI dashboard, create a new project just for this chat.
2. Set a monthly budget with a hard limit for the project, so a busy day can never cost more than you planned.
3. Create an API key in that project. Keep it out of chats, tickets and your shell history.

The going-public checklist covers restricted keys and model allowlists before you go live.

2. Add askdare

In the folder of your app:

npm install @boldare/askdare zod
npx @boldare/askdare init

Use pnpm add, yarn add or bun add if that's what your app uses. init adds:

It never overwrites a file, so it's safe to run again.

Already know your model? npx @boldare/askdare init --model <model> fills in ASKDARE_MODEL too. Every option is in Command line.

3. Fill in .env.local

OPENAI_API_KEY=sk-...        # the key from step 1
ASKDARE_MODEL=...           # a current model, see https://platform.openai.com/docs/models

askdare never picks a model for you: models change every few months, and the choice decides your costs.

ASKDARE_MODEL must be set in every environment that builds the app, Vercel Preview included. Without it, next build fails with "model is required".

init already generated CHAT_SECRET. Each environment needs its own. To make a new one without openssl:

node -e "console.log(require('node:crypto').randomBytes(32).toString('base64url'))"

Is the project already on Vercel? Keep the variables in its settings, and copy them to your machine with vercel env pull .env.local. See Deployment.

4. Run it and check it

Start the app:

npm run dev

While it runs, check it from a second terminal:

npx @boldare/askdare doctor

Open http://localhost:3000. The chat button is in the bottom-right corner.

doctor checks your project and your environment. It then asks the running app to test its own setup: the OpenAI key, the model, the permissions the key needs, the knowledge base, and the headers that let other sites embed the chat. Every problem comes with what to do about it:

Bot "support"
  ✓ Model <model> is available.
  ✓ The key can create responses with <model>.
  ✓ The key can create and delete conversations.
  ✓ widget.js loads.
  ✓ Sites that may embed the chat: 'self'

Every check and option is in Command line.

5. Put the chat on another website

The chat can live on any site, not only on your Next.js app:

1. Add the site to security.allowedOrigins in askdare.config.ts, for example ['https://www.example.com'].

2. Paste one tag into that site's HTML:

   <script src="https://your-app.example.com/api/chat/widget.js?bot=support" async></script>

   Copy

Browsers refuse to show the chat on sites that aren't on the list. Check a site with npx @boldare/askdare doctor --origin https://www.example.com.

Staging and production usually embed the chat on different sites. Read the list from an environment variable, such as ASKDARE_ALLOWED_ORIGINS. Embedding shows how, along with the script's options and your site's Content Security Policy.

Next steps