apiblaze 0.17.22 → 0.17.23

package/README.md

@@ -2,6 +2,69 @@
 
 CLI for [APIblaze](https://apiblaze.com) — Chat with your APIs, Manage your API keys, users and groups through APIblaze's serverless proxy
 
+---
+
+## Drop-in API-key widget (React)
+
+Let your users create and manage their API keys on your own site, in ~3 files. Your
+server holds one control-plane key; the browser only ever talks to your own backend —
+no secrets in the client, no cross-domain cookies.
+
+**1. Install**
+
+```bash
+npm install apiblaze react
+```
+
+**2. One backend route** — it holds the key and reads your session (`app/api/apiblaze/keys/route.ts`):
+
+```ts
+import { createApiblazeKeys } from 'apiblaze/server';
+import { auth } from '@/auth'; // NextAuth, Clerk, Auth0 — anything
+
+const keys = createApiblazeKeys({
+  cpKey: process.env.APIBLAZE_CP_KEY!,           // from Dashboard → Developers → "Widget key"
+  getUser: async () => {
+    const s = await auth();
+    if (!s?.user) return null;                   // not logged in → 401
+    return {
+      tenant: s.user.orgId ?? s.user.id,         // the customer COMPANY → isolation
+      userId: s.user.id,                         // the PERSON → owns their keys
+      // Which key types this person may create. Decided HERE, on your server:
+      //   omit → ['call-only'] (default)   list → those (widget shows a picker)   false → no access
+      keyTypes: s.user.isEngineer ? ['manager', 'call-only'] : undefined,
+    };
+  },
+});
+
+export const GET = keys.handler;
+export const POST = keys.handler;
+```
+
+**3. One component** — anywhere in your app:
+
+```tsx
+'use client';
+import { ApiKeyWidget } from 'apiblaze/react';
+
+export default function Settings() {
+  return <ApiKeyWidget theme={{ accent: '#e11d48' }} />;
+}
+```
+
+That's it. The widget calls `/api/apiblaze/keys` (same-origin, your session cookie rides
+along); your route adds the control-plane key and talks to apiblaze server-to-server.
+
+**White-label it.** Every font and color is a `theme` token (`accent`, `surface`,
+`headerBackground`, `text`, `muted`, `border`, `danger`, `success`, `radius`,
+`fontFamily`, `monoFontFamily`) — match any brand without forking the component.
+
+**Security.** Eligibility is decided on your server from your session, never the browser —
+a crafted request can't mint a type the user isn't allowed. Use a **Widget key** (Dashboard
+→ Developers), not a full admin key, so the platform's subset rule is a real backstop.
+
+---
+
 ## Install
 
 ```bash