StackPrism
Developer tools and bots

Tech stack for a Chrome extension with a backend (2026)

Page summary Chrome extension, designed by StackPrism from one sentence: 9 components, a reason for each, and the live checks that watch them.

The stack

  • Next.js
  • Node.js
  • Inngest
  • Supabase
  • Stripe
  • OpenAI
  • Clerk
  • Sentry
Browser extensionAISyncUpdated
The idea someone typed
“A Chrome extension that summarises the page you’re reading with AI and saves highlights to your account. Highlights sync across devices, a paid plan unlocks unlimited summaries, and a small web app lets you search everything you saved.”

Make it yours. Open this stack in the editor to check its health, harden it and hand it to your coding agent. No sign-up, nothing to generate.

Start from this stack
goes down

Select a component to see what it does and what it connects to, or pick one above to see what breaks if it goes down. Pinch or use the buttons to zoom.

Why this stack

The extension runs in the browser and only captures the page; everything else happens on the server, so no API key ships inside the extension. It gets a session token from Clerk and sends pages to a Node.js API on Vercel, which asks OpenAI for the summary and saves highlights to Supabase PostgreSQL, so they sync across devices. The same API and account power a Next.js web app for searching everything you saved. Stripe runs the paid plan, Inngest takes background jobs and Sentry reports errors.

Why each piece

All 9 components on the diagram: what each one does, what it talks to, and what stops if it goes down.

  1. Chrome Extension

    Page capture. Calls Node.js API and Clerk (token).

    Nothing else on the diagram depends on it.

  2. Next.js Web App

    In Vercel

    Portal UI. Calls Node.js API and Sentry (errors).

    Nothing else on the diagram depends on it.

  3. Node.js API

    In Vercel

    Central API. Calls Supabase PostgreSQL (writes), Inngest (queues), Sentry (errors), OpenAI (summarizes), Clerk (auth) and Stripe (billing). Called by Chrome Extension and Next.js Web App.

    If it goes down, 2 of 8 components stop working.

  4. Inngest

    In Vercel

    Background jobs. Called by Node.js API (queues).

    If it goes down, 1 of 8 components degrades.

  5. Supabase PostgreSQL

    Primary database. Called by Node.js API (writes).

    If it goes down, 3 of 8 components stop working.

  6. Stripe

    In External Services

    Billing provider. Called by Node.js API (billing).

    If it goes down, 1 of 8 components degrades.

  7. OpenAI

    In External Services

    LLM provider. Called by Node.js API (summarizes).

    If it goes down, 1 of 8 components degrades.

  8. Clerk

    In External Services

    Auth provider. Called by Chrome Extension (token) and Node.js API (auth).

    If it goes down, 3 of 8 components stop working.

  9. Sentry

    Error tracking. Called by Node.js API (errors) and Next.js Web App (errors).

    If it goes down, 2 of 8 components degrade.

When this stack fits

  • The extension needs accounts, sync and a paid plan, not just local storage.
  • Model calls have to happen on your server so your API key stays secret.
  • You want a web app next to the extension, sharing the same API.

When to pick something else

  • Everything can stay on the user’s device: an extension with local storage and no backend is simpler and needs no accounts.
  • Users bring their own model key: then the extension can call the model directly and you run no AI backend.

What you need to build this

9 components across 7 areas of the stack.

Build it with your AI agent

Hand the stack to Claude Code, Codex, Cursor or any coding agent as a brief: how it connects, install steps and a build plan.

Frontend2

  • Next.js Web App

    portal UI

    npm install next

    Docs

  • Chrome Extension

    page capture

Backend & APIs2

  • Node.js API

    central API

    Docs

  • Inngest

    background jobs

Data1

  • Supabase PostgreSQL

    primary database

    npm install @supabase/supabase-js

    Docs

Auth1

  • Clerk

    auth provider

    npm install @clerk/nextjs

    Docs

Payments1

  • Stripe

    billing provider

    npm install stripe

    Docs

AI1

  • OpenAI

    LLM provider

    npm install openai

    Docs

Observability1

  • Sentry

    error tracking

    npm install @sentry/nextjs

    Docs

Install

npm install next @supabase/supabase-js @clerk/nextjs stripe openai @sentry/nextjs

SDKs only. Pick your own database driver or ORM.

See all 30 example stacks