A world-class AI-powered landing page generator built with Next.js 16, Lamatic.ai, and json-render. Generate beautiful, conversion-optimized landing pages in seconds using Lamatic.ai flows powered by free Groq models.
- AI-Powered Generation: Uses Lamatic.ai flows to generate complete landing pages from natural language prompts
- 22 Professional Components: Hero sections, features, testimonials, pricing, CTAs, and more
- Beautiful Design: Modern, responsive UI with Tailwind CSS v4
- Type-Safe: Fully typed with TypeScript and Zod validation
- Guardrailed AI: Uses json-render to constrain AI output to predefined safe components
- Zero Dependencies: No shadcn or external UI libraries - pure custom components
- Enterprise-Ready: Powered by Lamatic.ai's production-grade AI middleware
- Framework: Next.js 16.1.4 with App Router
- AI Platform: Lamatic.ai - AI Middleware Platform
- Rendering: json-render for safe, structured AI output
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Type Safety: TypeScript + Zod
pagecraft-ai/
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ └── generate/
│ │ │ └── route.ts # Lamatic.ai API integration
│ │ ├── page.tsx # Main generator UI with preview
│ │ ├── layout.tsx # Root layout with metadata
│ │ └── globals.css # Global Tailwind styles
│ │
│ ├── components/
│ │ ├── error-boundary.tsx # Error boundary for safe rendering
│ │ └── landing/ # 22 landing page components
│ │ ├── index.ts # Component registry export
│ │ ├── badge.tsx # Badge component
│ │ ├── button.tsx # Button with variants
│ │ ├── container.tsx # Max-width container
│ │ ├── cta-section.tsx # Call-to-action section
│ │ ├── feature.tsx # Single feature card
│ │ ├── feature-grid.tsx # Features grid layout
│ │ ├── footer.tsx # Footer with links
│ │ ├── grid.tsx # Responsive grid
│ │ ├── heading.tsx # Typography headings
│ │ ├── hero.tsx # Hero section
│ │ ├── hero-with-image.tsx # Hero with side image
│ │ ├── image.tsx # Responsive image
│ │ ├── logo-cloud.tsx # Logo showcase
│ │ ├── navbar.tsx # Navigation bar
│ │ ├── paragraph.tsx # Text paragraph
│ │ ├── pricing-card.tsx # Pricing plan card
│ │ ├── pricing-grid.tsx # Pricing plans grid
│ │ ├── section.tsx # Full-width section
│ │ ├── stack.tsx # Flexbox stack layout
│ │ ├── stats.tsx # Statistics showcase
│ │ ├── testimonial.tsx # Testimonial card
│ │ └── testimonial-grid.tsx # Testimonials grid
│ │
│ ├── lib/
│ │ ├── catalog.ts # json-render catalog with Zod schemas
│ │ ├── component-helpers.ts # Type-safe design token helpers
│ │ ├── design-system.ts # Centralized design tokens
│ │ └── tree-parser.ts # Response parser & validator
│ │
│ └── types/
│ └── index.ts # TypeScript type definitions
│
├── .env.example # Environment variables template
├── .gitignore # Git ignore rules
├── package.json # Dependencies & scripts
├── pnpm-lock.yaml # Lock file
├── README.md # This file
├── tailwind.config.ts # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
- Node.js 18+ and pnpm
- Lamatic.ai account (sign up here)
- Install dependencies:
pnpm install-
Set up Lamatic.ai:
- Sign up at lamatic.ai
- Create a project and get your Project ID and API Key
- Create a Flow that accepts
{ prompt: string }and outputs landing page data - Deploy the flow and get your Flow ID
-
Configure environment - Create
.env.local:
# Get your credentials from Lamatic.ai dashboard
LAMATIC_ENDPOINT=https://your-org-your-project.lamatic.dev/graphql
LAMATIC_PROJECT_ID=00000000-0000-0000-0000-000000000000
LAMATIC_API_KEY=your_api_key_here
LAMATIC_FLOW_ID=00000000-0000-0000-0000-0000000000000- Run the app:
pnpm dev- Open
http://localhost:3000
Input: { "prompt": "string" }
Output: A single JSON object with this structure:
{
"root": "main-stack",
"elements": {
"navbar": {
"key": "navbar",
"type": "Navbar",
"props": { "brandName": "MyApp" }
}
// ... more elements
}
}Note: The parser also supports JSONL format for backwards compatibility, but JSON is recommended for reliability.
pnpm build
pnpm start-
Describe your landing page in the text area:
- Example: "A modern SaaS product for team collaboration"
- Example: "An AI-powered writing assistant for content creators"
-
Click "Generate Landing Page" and watch as the AI creates your page in real-time
-
Review the result - a complete landing page with:
- Navigation bar
- Hero section
- Features section
- Testimonials or social proof
- Pricing (if applicable)
- Call-to-action sections
- Footer
- Section: Full-width container with color schemes
- Container: Max-width content wrapper
- Grid: Responsive grid layout
- Stack: Flexible vertical/horizontal stack
- Hero: Main hero with headline, subheading, CTAs
- HeroWithImage: Hero with side-by-side image
- Feature: Single feature with icon, title, description
- FeatureGrid: Grid container for features
- Testimonial: Customer testimonial card
- TestimonialGrid: Grid of testimonials
- LogoCloud: Company logos display
- Stats: Key statistics showcase
- PricingCard: Pricing plan card
- PricingGrid: Grid of pricing plans
- Navbar: Top navigation bar
- Footer: Footer with links and info
- Heading, Paragraph, Image, Button, Badge, CTASection
- Component Catalog: All components are defined in
src/lib/catalog.tswith Zod schemas - Lamatic.ai Flow: Your custom AI flow processes prompts and generates landing page data
- API Integration: Next.js API route calls Lamatic.ai SDK with user prompts
- json-render: Validates and renders AI output using predefined components
- Real-time Preview: Frontend displays the generated landing page instantly
For best results, include:
- Target audience: "for small businesses", "for developers"
- Key features: "with real-time collaboration", "AI-powered analytics"
- Unique value: "10x faster than competitors", "Privacy-first approach"
- Industry: SaaS, e-commerce, consulting, etc.
- AI can only use predefined components - no arbitrary code generation
- All props are validated with Zod schemas
- Type-safe throughout with TypeScript
- No XSS or injection vulnerabilities
MIT
- Built with json-render by Vercel
- Powered by Lamatic.ai - AI Middleware Platform
- UI components built with Tailwind CSS
- Icons from Lucide
- User submits prompt → API route
- Lamatic SDK executes your flow →
lamatic.executeFlow(flowId, { prompt }) - Parser normalizes response → Handles JSONL or tree format
- Validator checks structure → Ensures valid json-render tree
- Renderer displays page →
<Renderer tree={tree} registry={componentRegistry} />
src/app/api/generate/route.ts- Lamatic.ai API integration & flow executionsrc/lib/tree-parser.ts- Response parser, validator & normalizersrc/lib/catalog.ts- Component catalog with Zod schemassrc/lib/design-system.ts- Design tokens & Tailwind class mappingssrc/lib/component-helpers.ts- Type-safe design system helperssrc/types/index.ts- TypeScript type definitionssrc/components/landing/*- 22 landing page componentssrc/components/error-boundary.tsx- Error boundary for safe renderingprompt/LAMATIC_SYSTEM_PROMPT.txt- AI system prompt for Lamatic flow
Built with ❤️ using Next.js 16, Lamatic.ai (with free Groq models), and json-render
PageCraft AI is powered by Lamatic.ai using free Groq models. If you find this useful, consider buying me a coffee to help cover API token costs and keep this service free for everyone!