How to Turn Any n8n Workflow Into a Full AI SaaS With Claude Code

TL;DR

Turn an n8n workflow into an AI SaaS by defining the product in a PRD, converting that plan into CLAUDE.md, and using Claude Code to build the frontend, backend, authentication, database, and deployment. The example uses Apify to scrape five TikTok videos, Gemini for analysis, Supabase for user data, and Vercel for deployment. Read on for the architecture and workflow behind the process.

Transcript

So, you've built your NAND workflow, but it's sitting there doing nothing. No users, no revenue, no product. But what if I told you we could take that workflow and turn it into a full-fledged AI SAS in a single cloud code session? I'm talking front end, backend, authentication, databases, deployment, all without writing a single line of code. Well,... Read More

Key Insights

• A product requirements document is the foundation for converting an n8n automation into a SaaS application. It should describe the automation, inputs, outputs, frontend, backend, database, authentication, hosting, and technology stack before Claude Code begins creating the project.
• CLAUDE.md is a persistent project context file for Claude Code. It records the product vision, architecture, webhook details, data structures, and technology choices so the coding process can repeatedly reference a consistent description of what must be built.
• The example SaaS is a viral TikTok video analyzer. It accepts a channel submission, scrapes the latest five videos with Apify, analyzes them with Gemini, and returns findings about concepts, audiences, hooks, calls to action, storylines, structure, visual style, and recreation methods.
• Webhooks connect the web interface to the n8n backend. When a user submits a channel through the application, the frontend sends that information to the production webhook URL, which starts the automation and provides the data required for processing.
• An HTTP POST request returns completed automation results to the web application. The workflow avoids relying on a direct Respond to Webhook step because analysis may take longer than expected, creating a potential timeout during the connection.
• Plan mode is used to align Claude Code with the intended product before file creation begins. Claude examines the requirements template and exported n8n workflow JSON, asks questions, proposes possible answers, and helps clarify the architecture before edits are accepted.
• Next.js 14 with the App Router and Supabase are the recommended defaults in the supplied template. The presenter selects technologies that Claude Code can work with effectively, while noting that builders can replace these choices when their application requires a different stack.
• A complete SaaS requires more than the original automation. The demonstrated development scope includes a frontend, functional backend logic, user authentication, user-specific database storage, local testing, interface design, Vercel deployment, production testing, and troubleshooting.

Questions & Answers

Q: How do you turn an n8n workflow into an AI SaaS with Claude Code?

First, document the workflow’s purpose, inputs, outputs, interface, backend, database, authentication, hosting, and technology stack in a product requirements document. Turn that plan into a CLAUDE.md file that gives Claude Code persistent project context, then build the frontend and backend, connect the app to n8n, test it, and deploy it with Vercel.

Q: What should the product requirements document include?

The PRD should explain what the n8n automation does, what users submit, and what output they receive. It should also define the frontend, backend, database, authentication, hosting, technology stack, and overall architecture before Claude Code starts building.

Q: What is the purpose of CLAUDE.md in Claude Code?

CLAUDE.md gives Claude Code a broad, persistent overview of the product being built. It records the product vision, architecture, technology stack, and other requirements so Claude Code can repeatedly reference them and remain grounded throughout development.

Q: How does the web application connect to the n8n workflow?

The user submits information through the web interface, such as the name of a channel to analyze. That submission starts the n8n automation on the backend, and n8n pushes the completed output back to the web page for display.

Q: How does the example TikTok video analyzer work?

A user enters the channel they want to analyze, and an Apify scraper collects its latest five videos. Gemini then analyzes elements including hooks, calls to action, storylines, audience, content structure, visual style, and ways to recreate similar short-form content.

Q: What parts of a complete SaaS does Claude Code build in this process?

The demonstrated SaaS includes a frontend, backend logic, authentication, a database, and deployment. Authentication lets users log in, Supabase stores data for specific users, and Vercel is used to deploy the application.

Q: Why define the architecture before Claude Code starts building?

Defining the architecture early settles choices such as the database, backend structure, and technology stack before implementation. A thoroughly developed PRD and CLAUDE.md make the building process easier by giving Claude Code a consistent reference for what it should create.

Q: What technology stack does the supplied template recommend?

The template recommends Next.js 14 with the App Router and Supabase for the backend. These are default choices for builders who do not know which technologies to select, but the transcript notes that they do not have to be used.

Summary & Key Takeaways

• The process begins by defining what the n8n automation does, including its required inputs and generated outputs. A product requirements document captures the intended interface, backend behavior, database, authentication, hosting, and technology stack. Claude Code then uses this information to create a persistent CLAUDE.md project guide before implementation begins.

• The demonstrated product turns a viral TikTok analyzer into a web application. A user enters a channel, while n8n uses an Apify scraper to collect the latest five videos and Gemini to analyze hooks, calls to action, storylines, audience, content structure, visual style, and a framework for recreating similar content.

• The web application connects to n8n through a webhook that receives user input. After processing, n8n sends the completed analysis back through an HTTP POST request instead of holding a webhook response open. The lesson also covers Supabase setup, local testing, interface design, Vercel deployment, production testing, and troubleshooting.