ZOYKUHot Board

better-stack-ai/better-stackDocumentazione

Open-source TypeScript system for installing full-stack features into existing React applications

Nota sulla lingua:Documentazione tradotta non disponibile. Visualizzazione dell'originale ufficiale in inglese.
npm i better-stack

BTST

Add complete features to the React app you already own.

BTST is an open-source TypeScript system for installing full-stack features into existing React applications.

It is built for React/TypeScript developers and small product teams adding a substantial feature to an app they already have. A full-stack plugin can bring the routes, APIs, database schema, hooks, SSR-aware pages, and customizable UI that its feature needs.

You own the whole application. Your app, data, deployment, and ejected UI stay yours. BTST runs inside your stack as an open-source dependency you can inspect, fork, or replace, never as a required hosted control plane.

Quickstart with Blog · View the live Blog · Read the docs

npm MIT

BTST promise above a focused view of the real Blog route from the generated application.

Real output from the repository's generated Next.js application.

Where BTST fits

BTST is more complete than a UI kit, more incremental than a starter application, and more ownable than a hosted feature service.

Starting point What it gives you Adoption boundary
UI kit Components and interaction primitives Your team still builds the feature's routes, data model, APIs, and workflows
Starter application An application foundation with initial features You adopt its application structure as the place you start
Hosted feature service A feature operated behind a vendor service boundary Its control plane, runtime, or data path remains outside your application
BTST An installable feature runtime, generated integration, and customizable views Add one capability inside the app, database, and deployment you already operate

Start with one plugin and add more only when they are useful. BTST does not replace your application foundation or require a hosted control plane.

Diagram separating the application and operating boundaries a team owns from the BTST runtimes and plugins running inside it.

BTST composes client and backend plugins inside the application; the app shell, ejected views, database, deployment, and external services remain yours.

Quickstart: Blog in an existing Next.js app

This local evaluation uses the public stable releases with Node.js 22, an existing Next.js 15+ App Router application, and Radix-based shadcn/ui with CSS variables. If shadcn/ui is not configured yet, initialize that verified base and add the components Blog needs:

pnpm dlx [email protected] init --base radix --preset nova --css-variables
pnpm dlx [email protected] add button dropdown-menu sonner --yes

Render the generated <Toaster /> in your root layout and start from a clean commit you can review. The complete prerequisite checklist covers the remaining application requirements.

Run the released generator from the application root:

pnpm dlx @btst/[email protected] init \
  --framework nextjs \
  --adapter memory \
  --plugins blog

The generator shows detected-file and conflict prompts before it writes. It installs @btst/[email protected], @btst/[email protected], [email protected], registers Blog on the backend and client, mounts the API and page routes, adds the plugin CSS, and wires the shared provider.

Set the trusted local origins in .env.local:

BTST_SITE_URL=http://localhost:3000
BTST_API_URL=http://localhost:3000

Then start the app and open the generated route:

pnpm dev
# http://localhost:3000/pages/blog

/pages/blog is the success condition. A fresh local route can be empty until you create content. The memory adapter resets with the process and is for evaluation and tests, not production persistence; Blog image uploads also remain an explicit application override. Continue with the production and manual setup reference before deploying.

Real BTST Blog page with three published product-update posts in the generated Next.js application.

The same generated Blog route after deterministic sample content is added.

The registration that produces the route

Core v6 separates the plugin packages from the shared runtime: the backend plugin supplies Blog's server behavior and data model; the client plugin supplies its routes and UI. The generator provides the surrounding adapter, API/site runtime, QueryClient, catch-all routes, and provider wiring.

import { createBackendStack } from "@btst/stack"
import { createMemoryAdapter } from "@btst/adapter-memory"
import { blogBackendPlugin } from "@btst/plugin-blog/api"
import { serverAuth } from "./authorization.server"

createBackendStack({
  basePath: "/api/data",
  auth: serverAuth,
  adapter: (db) => createMemoryAdapter(db)({}),
  plugins: { blog: blogBackendPlugin() },
})

serverAuth is an application-owned identity and permission mapping, defined here in authorization.server.ts. Configure it for your authentication provider before exposing protected operations; follow the authorization guide.

import { createClientStack } from "@btst/stack/client"
import { blogClientPlugin } from "@btst/plugin-blog/client"
import type { QueryClient } from "@tanstack/react-query"

function createAppClientStack(queryClient: QueryClient, origin: string) {
  return createClientStack({
    api: { baseURL: origin, basePath: "/api/data" },
    site: { baseURL: origin, basePath: "/pages" },
    queryClient,
    plugins: { blog: blogClientPlugin() },
  })
}

The current Blog backend and client registrations point to the real published Blog route they produce.

Blog adds publishing routes, API operations, its data model, hooks, SSR-aware pages, editor UI, published-page metadata, and sitemap entries. Other plugins have different boundaries: one-sided and companion plugins are labeled instead of being forced into a full-stack claim.

Released capabilities

Every capability below is installable from the released CLI. Follow its documentation for the actual payload, services, storage, auth, and adapter prerequisites.

Capability Topology Outcome Screen
Blog Full-stack Publishing, revision history, editorial review, scheduling, and public routes View
AI Chat Full-stack Streaming conversations, model integration, history, routes, and chat UI View
CMS Full-stack Typed content models, generated forms, publication policies, and revision history View
Form Builder Full-stack Form authoring, conditional fields, uploads, validation, and submissions View
Kanban Full-stack Boards, columns, tasks, assignment, and drag-and-drop UI View
CRM Full-stack Contacts, duplicate review, transactional merges, and Kanban-backed deal ownership View
Newsletter Full-stack Subscribers, campaigns, delivery recovery, and optional forms integration View
Calendar Full-stack Appointments, provider sync, team assignment, group capacity, and waitlists View
School Full-stack · requires CMS Course authoring, enrollment, progress, and application-owned payments View
Job Board Full-stack · requires CMS and Form Builder Job listings, applications, and hiring workflows View
Ecommerce Full-stack · requires CMS Catalog, checkout, orders, protected digital delivery, and refund recovery View
Affiliate Full-stack Referral tracking, attribution, commissions, and payout workflows View
Analytics Full-stack Page and event tracking, dashboards, funnels, and experiment attribution View
Feature Flags Full-stack Flag evaluation, variants, targeting, and experiment reporting View
Feedback Full-stack Feature requests, voting, a public roadmap, and changelog View
Helpdesk Full-stack Private support tickets, agent inbox, attachments, and response deadlines View
Notifications Full-stack In-app inbox, preferences, delivery lifecycle, and optional plugin bridges View
Search Full-stack Permission-aware search across registered application sources View
Comments Full-stack Threads, replies, reactions, moderation, and embeddable UI View
Media Full-stack Media storage, library routes, uploads, folders, and picker UI View
UI Builder Client-only · requires CMS Visual page authoring and public rendering over CMS content View
OpenAPI Backend-only Generated OpenAPI document and interactive API reference endpoint View
Route Docs Client-only Generated route reference and navigation UI View
Better Auth UI Companion · requires Better Auth Auth and account pages for an existing Better Auth backend See companion docs

Explore the released catalog or compare complete generated setups in the interactive playground.

New plugin screens

These are real routes from the generated Next.js application, populated with synthetic local fixtures. The capture record identifies the source commits and the limits of each screen.

Real BTST Feedback roadmap with planned, in-progress, and shipped feature requests.

Feedback stores requests and votes and presents them on a public roadmap.

Real BTST Helpdesk agent inbox with synthetic tickets, priorities, assignments, and response deadlines.

Helpdesk presents private tickets in an agent inbox. Ticket search requires an application-supplied search implementation.

Real BTST Notifications inbox populated by Kanban task and Helpdesk ticket assignment events.

Notifications receives real assignment events through the optional plugin bridges; this screen proves in-app delivery only.

Real BTST Search page showing results from registered Blog and application sources.

Search combines registered sources while preserving their application-owned permission checks.

Compatibility and prerequisites

The maintained and tested Core v6 integration paths are:

Framework Maintained integration
Next.js 15+ App Router Route handlers, request-aware and static pages, metadata, and sitemap factories
React Router 7+ Framework routes, SSR loaders, navigation, metadata, and sitemap response helpers
TanStack Start File routes, SSR loaders, navigation, metadata, and sitemap response helpers

React Router 8 requires Node.js 22.22+ and React/React DOM 19.2.7+. Other React integrations may be possible through custom adapters, but they are not part of that maintained matrix.

Versioned adapters are published for Prisma, Drizzle, Kysely, and MongoDB. Support is not blanket-equivalent: plugins that need isolated transactions have stricter persistent-adapter requirements, and the generated Form Builder and Media configurations reject MongoDB. The memory adapter is local and single-process only. Check compatibility and prerequisites and the adapter guide for current versions and limits.

Keep the view code, too

BTST's packaged runtime keeps data fetching and behavior upgradeable. When a plugin offers a shadcn v4 registry block, it copies the view layer into your application. Edit that code freely, then pass pages back through the plugin's component overrides where available or render copied components directly; hooks and API behavior can remain package dependencies.

Read the ejection guide

Go deeper

Optional AI-agent guidance

After you understand the human installation path, you can give a coding agent the repository's BTST integration skill:

npx skills@latest add better-stack-ai/better-stack/.agents/skills/btst-integration

Contributing and license

Bug reports, plugin contributions, and documentation improvements are welcome. Read CONTRIBUTING.md for the development workflow, tests, and submission checklist; public-facing copy follows the BTST message and claims contract.

BTST is released under the MIT License.

If BTST is useful to you, a star helps other React developers find it.

Mirror archiviato dal repository ufficiale GitHub · Visita su GitHub
Data snapshot: 2026-11-08