@btst/stack — BTST

What is BTST?

BTST lets you install production-ready app features as npm packages.

Instead of spending weeks building the same things again and again
(routes, APIs, database schemas, SSR, SEO, forms…):

npm install @btst/stack

Enable the features you need and keep building your product.

Available plugins

Each plugin ships frontend + backend together: routes, APIs, database models, React components, SSR, and SEO — already wired.

Want a specific plugin? Open an issue and let us know!

Why use it?

• Installable features – real product features, not just UI
• Framework-agnostic – Next.js, React Router, TanStack Router, Remix
• Database-flexible – Prisma, Drizzle, Kysely, MongoDB
• Zero boilerplate – no manual route or API wiring
• Type-safe – end-to-end TypeScript

You keep your codebase, database, and deployment.

Minimal usage

import { stack } from "@btst/stack"
import { blogBackendPlugin } from "@btst/stack/plugins/blog/api"
import { createMemoryAdapter } from "@btst/adapter-memory"

export const { handler, dbSchema } = stack({
  basePath: "/api/data",
  plugins: {
    blog: blogBackendPlugin()
  },
  adapter: (db) => createMemoryAdapter(db)({})
})

import { createStackClient } from "@btst/stack/client"
import { blogClientPlugin } from "@btst/stack/plugins/blog/client"
import { QueryClient } from "@tanstack/react-query"

export const getStackClient = (queryClient: QueryClient) =>
  createStackClient({
    plugins: {
      blog: blogClientPlugin({
        apiBaseURL: "http://localhost:3000",
        apiBasePath: "/api/data",
        siteBaseURL: "http://localhost:3000",
        siteBasePath: "/pages",
        queryClient,
      })
    }
  })

Now you have a working blog with API, pages, SSR, and SEO. See the full installation guide for database adapters, auth hooks, and framework-specific setup.

Database schemas & migrations

Optional CLI to generate schemas and run migrations from enabled plugins:

npm install -D @btst/cli

Generate drizzle schema:

npx @btst/cli generate --orm drizzle --config lib/stack.ts --output db/schema.ts

Supports Prisma, Drizzle, MongoDB and Kysely SQL dialects.

Shadcn Registry

Each plugin's UI layer is available as a shadcn registry block. Use it to eject and fully customize the page components while keeping all data-fetching and API logic from @btst/stack:

# Install a single plugin's UI (for example, Media)
npx shadcn@latest add https://github.com/better-stack-ai/better-stack/blob/main/packages/stack/registry/btst-media.json

# Or install the full collection
npx shadcn@latest add https://github.com/better-stack-ai/better-stack/blob/main/packages/stack/registry/registry.json

Components are copied into src/components/btst/{plugin}/client/ — all relative imports remain valid and you can edit them freely.

AI Agent Skills

If you're using an AI coding agent (Cursor, Claude Code, VS Code, OpenAI Codex etc.) you can install the BTST integration skill so your agent understands the plugin system, adapter setup, and wiring patterns out of the box:

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

Or manually copy skills/btst-integration/SKILL.md into your project's agent skills directory.

Live Demo

Try the interactive playground:

• Next.js
• React Router
• TanStack Router

Learn more

Full documentation, guides, and plugin development: 👉 https://www.better-stack.ai

Contributing

Bug reports, plugin PRs, and documentation improvements are welcome. See CONTRIBUTING.md for the plugin development guide, testing instructions, and submission checklist.

If this saves you time, a ⭐ helps others find it.

MIT © olliethedev