Live Demo: https://web-smith-ai.vercel.app/
WebSmithAI is a next-generation AI-powered SaaS web application that allows users to generate, edit, and customize complete websites with a single click — all in real time.
Built with Next.js 14, TypeScript, Tailwind CSS, Clerk, ImageKit, Drizzle ORM, and Neon PostgreSQL, it merges AI creativity with human precision.
- Generate full, production-ready websites instantly from a text prompt.
- Uses OpenRouter’s streaming AI API for real-time code generation.
- Generates responsive HTML/CSS/Tailwind code on the fly.
- Unique inline editing feature enables users to modify elements (text, font, color, margin, padding, etc.) directly within the preview.
- Updates are saved instantly to the database — no need to re-trigger the AI model.
- Powered by ImageKit for:
- Smart cropping
- Background removal
- Drop shadows
- Upscaling
- AI-generated images from text prompts
- Transformations are applied instantly using URL-based AI parameters.
- Toggle between desktop and mobile modes for adaptive layouts.
- Built-in iframe-based rendering isolates design styles for accurate previews.
- Clerk handles secure sign-up, sign-in, and multi-factor authentication.
- Integrated subscription billing and credit-based usage model.
- Free-tier users get limited project credits; upgrade for unlimited creation.
- Personalized workspace dashboard with:
- Project list
- Remaining credits tracker
- Profile dropdown
- “Add New Project” button
- Each project stores multiple “frames” (design versions) and associated chat logs.
- Neon PostgreSQL cloud database with Drizzle ORM for schema management.
- Stores:
- User data
- Projects
- Frames (website versions)
- AI conversation history
- All user edits, AI-generated HTML, and transformations are persistently stored.
- Cleaned HTML code is saved and retrievable for preview or download.
- Fully deployed on Vercel with GitHub integration for CI/CD.
- Environment variables configured securely through Vercel’s dashboard.
| Layer | Technologies |
|---|---|
| Frontend | Next.js 14, React, TypeScript, Tailwind CSS, ShadCN UI |
| Backend | Next.js API Routes, Drizzle ORM, Neon PostgreSQL |
| Authentication & Billing | Clerk |
| AI Integration | OpenRouter API |
| Image Processing | ImageKit AI Transformations |
| Deployment | Vercel |
| Utilities | UUID, Axios, React Context API, Toast Notifications |
WebSmithAI follows a modular full-stack architecture, combining React’s client interactivity with serverless APIs for scalability.
User → Clerk Auth → Workspace → Project → Frame → Chat → AI Model → HTML Code → Inline Editor → Database → Save/Preview/Deploy
- Frontend: React + Tailwind + TypeScript for UI/UX.
- Serverless APIs: Handle chat, project CRUD, and AI integration.
- Database (Drizzle ORM + Neon): Stores structured relational data.
- AI Layer: Streams responses from OpenRouter for live content/code generation.
- Storage: ImageKit handles media storage and transformation.
- User Login/Signup via Clerk.
- Create Project → Generates a unique Project ID.
- Send Prompt → AI generates HTML/Tailwind code.
- Preview Website in iframe.
- Edit Inline → Modify text, styles, spacing, etc.
- Save → Updated HTML is persisted to database.
- Upload/Generate Images → Modify visuals with ImageKit.
- View Projects in Workspace.
- Upgrade Plan for extended usage and features.
- Hero section with input for website ideas.
- AI prompt suggestions and interactive UI.
- Clerk-powered sign-in, sign-up, and session handling.
- Custom modals for login prompts on restricted routes.
- Sidebar with projects and credit tracker.
- Project listing with skeleton loaders and progress bar.
- Split-view layout: Chat → Preview → Settings.
- Real-time AI responses stream directly into design preview.
- Inline editing for direct manipulation of elements.
- Save button triggers HTML extraction and cleanup.
- PostgreSQL (via Neon) structured as:
users– user infoprojects– each AI-generated websiteframes– website versionsmessages– chat history
- Clerk’s subscription system for SaaS plan management.
- Restricts advanced features for free users.
- Real-time plan sync via Clerk Webhooks.
"Create a modern landing page for a personal portfolio website with a hero section, project showcase, and contact form."
AI Response: Streams Tailwind-styled responsive code instantly, viewable and editable inline.
- Next.js Docs
- Tailwind CSS
- Clerk Authentication
- ImageKit AI
- Drizzle ORM
- Neon PostgreSQL
- OpenRouter AI
- ShadCN UI
- Inline editing separates WebSmithAI from other AI website generators.
- Streaming AI integration ensures faster feedback than traditional APIs.
- Cloud-native architecture ensures scalability and smooth deployment.
- Clerk + Neon + Vercel combination makes it production-ready out of the box.
AI SaaS • Website Generator • Inline Editing • Next.js • Tailwind CSS • TypeScript • Clerk • ImageKit • PostgreSQL • Drizzle ORM • OpenRouter • Streaming API • WebRTC • Responsive Design • Vercel Deployment
Developed by: Saket Chaudhary
Live Demo: https://web-smith-ai.vercel.app/
GitHub Repo: https://github.com/Saket22-CS/WebSmithAI
“Transforming AI intelligence into creative, editable web experiences.”
This project is licensed under the MIT License – you’re free to use, modify, and distribute with attribution.
If you like this project, please ⭐ the repository and share it! Feedback and suggestions are always welcome.