Back to templates

Template details

Agent with Auth and Payments

Fullstack chat agent with authentication, request credits and payments built in.

About this template

Agent with Auth and Payments is a fullstack boilerplate that pairs a Next.js 15 chat interface with a LangGraph.js agents backend, bundling Supabase authentication, Stripe payments, and a credit system into a single pnpm monorepo.

What is Agent with Auth and Payments?

Agent with Auth and Payments is a LangChain-originated GitHub template (from the langchain-ai organization) that gives developers a complete starter for an agentic SaaS product. It consists of two deployable apps: apps/web, a Next.js 15 chat UI, and apps/agents, a Node.js + TypeScript backend running LangGraph.js ReAct agents. The template outputs a fullstack application where users sign in, buy credits, chat with an AI agent, and have credits automatically deducted per conversation.

Key Features

  • Monorepo structure — pnpm workspaces manage both apps from a single root, with commands like pnpm dev, pnpm build, and pnpm test controlling everything in parallel.
  • Next.js 15 web app — the chat interface is built with Radix UI, Tailwind CSS, and shadcn/ui components, with state handled by Nuqs and Zustand.
  • LangGraph agents backend — the agents app uses LangGraph.js with LangChain and Anthropic for the ReAct agent logic, and includes Jest for unit and integration tests.
  • Supabase auth and database — a supabase-schema.sql file creates a users table, Row Level Security policies, automatic profile creation, and performance indexes during setup.
  • Stripe payments and credits — the app listens for customer.subscription.created, customer.subscription.updated, and customer.subscription.deleted webhooks forwarded to localhost:3000/api/webhooks/stripe; purchased credits are stored and deducted per chat message.
  • Two-app development workflow — pnpm web:dev and pnpm agents:dev start each app independently, while pnpm dev runs both simultaneously.
  • Flexible deployment — the web app targets Vercel, Netlify, or any Node.js host, and the agents app can be containerized with Docker or deployed to Node.js hosting.

Who is it for?

  • SaaS founders — launch an AI-powered chat product with usage-based billing without writing auth, payments, or credits infrastructure from scratch.
  • LangGraph developers — use the repo as a reference for wiring ReAct agents to a modern Next.js frontend with proper middleware authentication.
  • Fullstack engineers — want a concrete example of integrating LangChain, Supabase, and Stripe inside a pnpm monorepo with separate apps.

What can you do with it?

  • Build a credit-based AI assistant — configure your LangGraph agent, connect your Stripe products, and let users purchase credits that are spent on each chat message.
  • Create an agentic SaaS starter — extend the agent with additional tools and expose them through the existing chat UI, using the included auth and billing as your foundation.
  • Study production monorepo patterns — examine how the template splits frontend and backend, shares environment variables, runs tests, and prepares both apps for independent deployment.

How does it work?

  1. Clone the repository and copy the .env.example files to .env for both apps/web and apps/agents, filling in credentials.
  2. Run pnpm install then pnpm dev to start both development servers.
  3. Paste supabase-schema.sql into the Supabase SQL Editor to create the users table and security policies.
  4. Start the Stripe CLI with stripe listen for the three subscription events, forward to the webhook endpoint, and add the webhook secret.
  5. Sign up, confirm your email, buy credits on the pricing page, then chat — each message decrements your credit balance.

FAQ

Do I need my own Supabase and Stripe accounts?

Yes, the template requires external services. You must create a Supabase project and run the provided SQL schema, and you need a Stripe account plus the Stripe CLI to test webhook events locally.

What Stripe events does the webhook handle?

The README's stripe listen command forwards customer.subscription.created, customer.subscription.updated, and customer.subscription.deleted to localhost:3000/api/webhooks/stripe, which updates the user's credit balance.

Can I deploy the web and agents apps separately?

Yes. The web app is a standard Next.js app that can be deployed to Vercel, Netlify, or any Node.js hosting; the agents app is a separate Node.js service that can be deployed independently or containerized with Docker.

Is this template free to use?

The repository is public on GitHub under the langchain-ai organization, so the source code is freely available to clone, modify, and reuse in your own projects.