CLAUDE.md Template for Building a No Code AI Workflow Builder with Next.js, TypeScript, Supabase, Clerk, Stripe, OpenAI

Overview

CLAUDE.md template for building a complete No Code AI Workflow Builder using Next.js, TypeScript, Supabase, Clerk, Stripe, drag-and-drop nodes, OpenAI, and workflow execution logs. This page includes a copyable CLAUDE.md template block you can paste into Claude Code to scaffold the stack-specific setup.

Direct answer: This CLAUDE.md template encodes a full stack blueprint (UI, auth, payments, AI actions, and logging) that you can drop into a Claude Code session and customize for your project.

When to Use This CLAUDE.md Template

• Building a no-code AI workflow builder UI with Next.js and TypeScript.
• Integrating Supabase for persistence and logs.
• Using Clerk for authentication and user management.
• Incorporating Stripe for payments and webhooks with proper verification.
• Composing AI actions via a drag-and-drop node editor powered by OpenAI.
• Need a copyable CLAUDE.md template to bootstrap the stack quickly.

Copyable CLAUDE.md Template

# CLAUDE.md

# CLAUDE Code Instructions for Next.js + TS + Supabase + Clerk + Stripe + OpenAI No Code AI Workflow Builder

Project role
- You are Claude, a software architect and code generator that specializes in turn-key CLAUDE.md templates for full-stack Next.js + TypeScript apps with Supabase, Clerk, and Stripe, plus AI workflow execution with OpenAI. Produce exact, copyable code blocks and architecture rules.

Architecture rules
- Build a No Code AI Workflow Builder with:
  - Next.js 14 app router (TypeScript)
  - Supabase Postgres for data (workflows, nodes, executions, logs)
  - Clerk for authentication
  - Stripe for payments (webhooks validated)
  - A drag-and-drop node editor to compose AI actions
  - OpenAI API integration for AI actions
  - Serverless function endpoints for orchestration and safety
  - Observability: status and execution logs persisted to Supabase
- Do not bypass authentication or expose admin endpoints publicly.
- All API keys must be accessed from environment variables and never hard-coded.

File structure rules
- Use a Next.js project layout under /apps/web or /src/app
- Put domain code under /modules or /features if applicable
- Keep a minimal, scalable structure:
  /apps
    /web
      /src
        /app
          /workflows
          /nodes
          /api
        /components
        /lib
        /services
        /styles
        /types
        /utils
      /public
  /db
    /supabase
- Do not include irrelevant folders or configs (e.g., avoid monolithic monorepo noise).

Authentication rules
- Clerk is configured with a provider-friendly sign-in/up UI
- Ensure only authenticated users can read/write workflows
- Use server actions to protect sensitive operations

Database rules
- Supabase tables: users, workflows, nodes, executions, logs
- users: id uuid primary key, email, role
- workflows: id uuid, owner_id references users.id, name, config(JSON), created_at
- nodes: id uuid, workflow_id references workflows.id, type, config(JSON)
- executions: id uuid, workflow_id references workflows.id, started_at, finished_at, status
- logs: id serial, execution_id references executions.id, timestamp, message
- Enforce foreign keys and row-level security as per Supabase guidelines
- Validation: ensure IDs are valid UUIDs, config JSON matches schema
- Indexes: index on workflows.owner_id, executions.workflow_id for fast queries

Security rules
- Use role-based access: owner, collaborators
- Never expose secrets to the client
- Validate inputs on serverless endpoints
- Verify Stripe webhooks with signature and secret
- OpenAI keys stored in environment, not code

Testing rules
- Unit tests for node graph validation
- Integration tests for workflow start, node execution, and logging
- E2E tests for sign-in, create workflow, run, and verify logs

Deployment rules
- Deploy to Vercel or similar; ensure environment variables are configured
- Use preview deployments for workflow changes
- Keep CLAUDE.md template up to date with stack versions

Things Claude must not do
- Do not generate code that disables auth
- Do not include hard-coded secrets
- Do not bypass webhooks validation
- Do not assume any business logic not specified

Recommended Project Structure

apps/
  web/
    src/
      app/
        workflows/
          [id]/
            page.tsx
            components/
        nodes/
          index.tsx
        layout.tsx
      components/
      lib/
      services/
      hooks/
      styles/
      types/
      utils/
    public/
    next.config.js
    tsconfig.json
 db/
  supabase/
    migrations/
    seeds/
    schemas/

Core Engineering Principles

• Type safety: TypeScript throughout the stack
• Explicit data contracts between nodes
• Deterministic node execution with idempotent actions
• Separation of concerns: UI, orchestration, persistence
• Observability: structured logs and metrics

Code Construction Rules

• Define Node types with explicit JSON schemas and validation
• Use server actions for sensitive workflows and avoid client inference
• Validate OpenAI calls with input constraints and fallback rules
• Store workflow config as JSON in the database and retrieve for rendering
• Do not rely on client-side secrets; fetch on server

Security and Production Rules

• Verify Stripe webhooks and store Stripe events securely
• Protect endpoints with Clerk session checks
• Keep OpenAI API keys in environment variables, rotate regularly
• Use CSRF protections where appropriate
• Audit logging for access to workflows

Testing Checklist

• Unit tests for node graph validation and action handlers
• Integration tests for workflow orchestration and OpenAI calls
• End-to-end tests for authentication and workflow creation
• Deployment checks for environment variable availability

Common Mistakes to Avoid

• Over-modeling the graph without user-facing constraints
• Storing large configs without compression or pagination
• Ignoring Stripe webhook verification
• Hard-coding OpenAI keys or endpoints

Related implementation resources: AI Use Case for Software Agencies Using Github Copilot To Accelerate Boilerplate Code Generation for New Client Mvps and Why authorization checks belong in AI coding instructions for production-grade systems.

FAQ