Infinite FAQ

The design reference

Part 1 - What you need

Part 2 - The one-prompt build

1. 1

   Step 1

   Paste your key, then this prompt

   Open Claude Code in your project. Paste your OpenRouter key as a message, then paste the prompt below right after it. It saves the key, installs the packages, creates the API route, sets up Tailwind and adds the component styled to your site. It also works whether or not your page already has an FAQ section.

   🚀

   The build prompt

   PromptCopy

   1. Save the OpenRouter API key I just gave you in .env.local as OPENROUTER_API_KEY. Create the file if needed and make sure .env.local is in .gitignore.
   
   2. Add the open-source infinite-faq component to this site. Run: npm install infinite-faq ai @openrouter/ai-sdk-provider
   
   3. Create app/api/faq/route.ts using createOpenRouterFaqRoute from "infinite-faq/openrouter" with apiKey: process.env.OPENROUTER_API_KEY, model "deepseek/deepseek-v4.1-flash", and a placeholder system prompt that I will fill in next.
   
   4. Detect my Tailwind version and add the package scan. For v4, add @source "../node_modules/infinite-faq/dist" under the tailwindcss import in globals.css. For v3, add "./node_modules/infinite-faq/dist/**/*.{js,cjs}" to the content array in tailwind.config.
   
   5. If this site already has an FAQ section, replace it with the InfiniteFaq component and reuse my existing questions and answers as the static items, keeping the title, layout, fonts and colors identical. If there is no FAQ yet, add one to the homepage with the title "Questions" and 5 static questions written from my landing page copy.
   
   6. Either way, set endpoint "/api/faq", placeholder "Ask anything else", loadingText "Reading the docs", maxLines 6. Style it with classNames to match my existing fonts, colors, spacing and theme: no card backgrounds, a thin divider between rows, a small chevron on the right of each question, and the last row as the input with an arrow submit icon.
   
   7. Start the dev server and tell me the URL to open.

   🔒

   Pasting the key into Claude Code is fine. It runs on your machine and writes it to a local file that is never committed. If you shared your screen while pasting it, rotate the key on OpenRouter afterwards.

   ⚠️

   Not on Next.js? Framer, Webflow, WordPress and static sites cannot run this package directly. It needs a React front end and a server route. On those platforms it is a custom build (a code component plus a separately hosted API), not a one-prompt install.

   Mark as done
2. 2

   Step 2

   Check what Claude Code creates

   Four things should exist when it finishes:

   1. The key in .env.local

   PromptCopy

   OPENROUTER_API_KEY=sk-or-...

   2. The API route at app/api/faq/route.ts

   tsCopy

   import { createOpenRouterFaqRoute } from "infinite-faq/openrouter"
   
   export const { POST, OPTIONS, maxDuration } = createOpenRouterFaqRoute({
     apiKey: process.env.OPENROUTER_API_KEY,
     model: "deepseek/deepseek-v4.1-flash",
     system: `You are the assistant for ACME. Only answer questions about ACME
   and its products. Keep answers to 1-3 short sentences.`,
   })

   3. The Tailwind scan. Tailwind v4, in globals.css:

   cssCopy

   @import "tailwindcss";
   @source "../node_modules/infinite-faq/dist";

   Tailwind v3, in tailwind.config.ts:

   tsCopy

   export default {
     content: [
       "./app/**/*.{ts,tsx}",
       "./node_modules/infinite-faq/dist/**/*.{js,cjs}",
     ],
   }

   4. The component on your page:

   tsCopy

   import { InfiniteFaq } from "infinite-faq"
   
   <InfiniteFaq
     endpoint="/api/faq"
     eyebrow="FAQ"
     title="Questions"
     placeholder="Ask anything else"
     loadingText="Reading the docs"
     maxLines={6}
     items={[
       { question: "What is ACME?", answer: "ACME makes everything." },
       { question: "How much does it cost?", answer: "One-time $1,999." },
     ]}
   />

   💡

   If any of the four is missing, paste the relevant snippet above into Claude Code and say "add this". Skipping the Tailwind scan is the most common miss, and it makes the component render with no styling at all.

   Mark as done

Part 3 - Feed it your site

Read every page of this site and write the FAQ system prompt in app/api/faq/route.ts from the copy: headline, features, pricing, existing FAQ, support details. It must only answer questions about my product, keep answers to 1-3 short sentences, and politely decline anything unrelated.

You are the assistant for [PRODUCT]. Only answer questions about [PRODUCT] using the documentation below. Keep answers to 1-3 short sentences. If the question is not covered, say so and point to [support email or docs URL]. Politely decline anything unrelated.

=== DOCUMENTATION ===
[paste your docs / landing page copy / pricing here]
=== END ===

Part 4 - Make it look like the original

<InfiniteFaq
  endpoint="/api/faq"
  items={items}
  placeholder="Ask anything else"
  loadingText="Reading the docs"
  maxLines={6}
  className="max-w-2xl"
  classNames={{
    root: "bg-transparent",
    item: "rounded-none border-0 border-b border-neutral-800 bg-transparent px-0",
    trigger: "py-5 text-[15px] text-white",
    icon: "text-neutral-500",
    answer: "text-neutral-400 text-[14px] leading-relaxed",
    loading: "text-neutral-500 text-[13px]",
    form: "rounded-none border-0 border-b border-neutral-800 bg-transparent px-0",
    input: "py-5 text-[15px] text-white placeholder:text-neutral-500",
    submit: "text-neutral-500 hover:text-white",
  }}
/>

Part 5 - Test, deploy, troubleshoot

Tips