AI Quiz

The AI Quiz SDK is a React component library that drops an AI-generated quiz UI into any app. The SDK never touches your OpenAI key — you host a tiny server proxy and point the component at it, so secrets stay on the server.

Installation

npm install ai-quiz

Usage

import { QuizComponent } from 'ai-quiz';

export default function Page() {
  return <QuizComponent topic="AWS Lambda" endpoint="/api/quiz" />;
}

Props

| Prop | Type | Required | Description | | ---------- | ----------------------------- | -------- | --------------------------------------------------------------------------- | | topic | string | yes | Default topic seeded into the quiz form. | | endpoint | string | one of | URL of your server proxy. The SDK POSTs to it. Easiest option. | | fetcher | QuizFetcher | one of | Custom async function — use this for non-HTTP transports or extra headers. |

You must supply either endpoint or fetcher. Never pass an API key to a browser component — anyone viewing your site can read it.

Server contract

The SDK POSTs JSON to your endpoint:

{
  "system": "string",
  "user": "string",
  "model": "gpt-3.5-turbo",
  "temperature": 1
}

Your endpoint must respond with:

{ "content": "<raw model output as a string>" }

That's it — the shape is provider-agnostic, so you can back it with OpenAI, Anthropic, a local model, or a cache.

Example proxy (Next.js App Router)

// app/api/quiz/route.ts
import OpenAI from 'openai';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export async function POST(req: Request) {
  const { system, user, model, temperature } = await req.json();

  const completion = await openai.chat.completions.create({
    model,
    temperature,
    messages: [
      { role: 'system', content: system },
      { role: 'user', content: user },
    ],
  });

  return Response.json({ content: completion.choices[0].message.content ?? '' });
}

Example proxy (Express)

import express from 'express';
import OpenAI from 'openai';

const app = express();
app.use(express.json());
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

app.post('/api/quiz', async (req, res) => {
  const { system, user, model, temperature } = req.body;
  const completion = await openai.chat.completions.create({
    model,
    temperature,
    messages: [
      { role: 'system', content: system },
      { role: 'user', content: user },
    ],
  });
  res.json({ content: completion.choices[0].message.content ?? '' });
});

Custom fetcher

Use a fetcher when you need auth headers, a non-OpenAI backend, request signing, or anything beyond a plain POST:

import { QuizComponent, QuizFetcher } from 'ai-quiz';

const fetcher: QuizFetcher = async ({ system, user, model, temperature }) => {
  const res = await fetch('/api/quiz', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${await getSessionToken()}`,
    },
    body: JSON.stringify({ system, user, model, temperature }),
  });
  const { content } = await res.json();
  return content;
};

<QuizComponent topic="AWS Lambda" fetcher={fetcher} />;

Migrating from v1

v1 accepted an apiKey argument and called OpenAI directly from the browser. That key was visible to every visitor. v2 removes the key argument entirely:

- {QuizComponent("AWS Lambda", process.env.REACT_APP_OPENAI_KEY)}
+ <QuizComponent topic="AWS Lambda" endpoint="/api/quiz" />

If you have a v1 key shipped in production, rotate it immediately.

License

No license selected yet.

Contact

[email protected]