.jpeg)
Learn how to use AIFA’s open-source AI tool to spin up production-ready websites from a single prompt using React 19 + Next.js 15. A full tutorial.
Imagine describing your dream website in plain English—
“A SaaS landing page with a hero, features, testimonials, and pricing.”
—and within minutes, having:
That’s the promise of AIFA’s open source AI-driven Next.js framework (GitHub repo).
This tutorial-style blog walks you step by step through:
By the end, you’ll have your own AI-powered website generator, ready to customize, extend, and scale.
git clone https://github.com/aifa-agi/aifa.git
cd aifa
npm install
npm run dev
Your dev server should start at http://localhost:3000.
📸 Screenshot suggestion:
npm run devAt its heart, AIFA is spec-driven:
Next.js 15’s App Router with [...slug] lets AIFA resolve any path dynamically:
// app/[...slug]/page.tsx
import { PageHtmlTransformer } from "@/components/PageHtmlTransformer";
import { getPageConfig } from "@/lib/pageConfig";
export default async function Page({ params }) {
const config = await getPageConfig(params.slug);
return <PageHtmlTransformer config={config} />;
}
/pricing → Renders pricing page./blog/ai-tools → Renders AI blog article page.📸 Screenshot suggestion:
This component takes the AI-generated config and renders React components:
export function PageHtmlTransformer({ config }: { config: PageConfig }) {
return (
<>
<Head>
<title>{config.title}</title>
</Head>
{config.sections.map((section, i) => {
switch (section.type) {
case "hero":
return <Hero key={i} {...section} />;
case "features":
return <Features key={i} {...section} />;
case "pricing":
return <Pricing key={i} {...section} />;
default:
return null;
}
})}
</>
);
}
This ensures predictability and safety—AI cannot generate random components outside your schema.
AIFA enforces TypeScript types for all sections:
export type PageConfig = {
title: string;
sections: Section[];
};
type Section =
| { type: "hero"; headline: string; cta: string }
| { type: "features"; items: string[] }
| { type: "pricing"; tiers: string[] };
If AI outputs type: "banana", it fails validation immediately.
📸 Screenshot suggestion:
npm run generate "A SaaS landing page for FlowPilot with hero, features, testimonials, pricing"
{
"title": "FlowPilot - Automate Your Workflow",
"sections": [
{ "type": "hero", "headline": "Automate Everything", "cta": "Start Free" },
{ "type": "features", "items": ["Smart Scheduling", "AI Integrations", "24/7 Support"] },
{ "type": "pricing", "tiers": ["Free", "Pro", "Enterprise"] }
]
}
npm run build
npm start
Boom 💥 — your new SaaS landing page is live locally.
📸 Screenshot suggestion:
git add .
git commit -m "First AI website"
git push origin main
📸 Screenshot suggestion:
npm install stripe @stripe/stripe-js
// app/api/checkout/route.ts
import Stripe from "stripe";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: "2023-10-16" });
export async function POST(req: Request) {
const { priceId } = await req.json();
const session = await stripe.checkout.sessions.create({
line_items: [{ price: priceId, quantity: 1 }],
mode: "subscription",
success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`
});
return Response.json({ url: session.url });
}
📸 Screenshot suggestion:
npm install prisma @prisma/client
npx prisma init
model User {
id String @id @default(cuid())
email String @unique
createdAt DateTime @default(now())
}
npx prisma migrate dev
Now your app has a production-grade Postgres backend.
📸 Screenshot suggestion:
Example integration:
import OpenAI from "openai";
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
export async function generatePageConfig(prompt: string) {
const res = await client.chat.completions.create({
model: "gpt-4o-mini",
messages: [{ role: "user", content: prompt }]
});
return JSON.parse(res.choices[0].message?.content || "{}");
}
Founder spins up a SaaS landing page in 30 minutes, integrates Stripe, and starts pre-selling subscriptions.
AI generates developer docs directly from GitHub repo READMEs.
EduTech startup creates AI-generated step-by-step lessons without manual coding.
This isn’t just about building sites faster. It’s about:
As AIFA evolves, we’ll see AI co-developers that:
The takeaway is simple:
AI isn’t replacing developers—it’s replacing boilerplate.
By adopting AIFA’s open-source spec-driven framework, you’ll:
