Prism AI is a cutting-edge, AI-powered full-stack web application designed to transform text prompts into fully functional, visually appealing website frontends. Built with Express.js, React (TypeScript/TSX), PostgreSQL, and advanced AI models, it enables users to generate, edit, preview, and manage web projects in real time through a conversational interface.
Prism AI follows a Multi-Tier Client–Server Architecture, providing a clean separation of concerns for scalability, maintainability, and security.
| Layer | Responsibility |
|---|---|
| Frontend | React application, visual editor, and live preview |
| Backend | Express.js APIs and business logic |
| AI Layer | Prompt processing and frontend generation |
| Database | PostgreSQL for users and projects |
| Authentication | Better Auth user management |
Prism AI follows the Software as a Service (SaaS) model by providing centrally hosted functionality that users access through authenticated accounts without local installation.
| Capability | Description |
|---|---|
| AI Chat Sidebar | Describe website ideas or request modifications through conversation |
| Real-Time Code Preview | View generated websites instantly in a secure iframe |
| Visual Editor | Edit text, class names, colors, padding, margin, font size, and typography |
| Responsive Preview | Switch between Desktop, Tablet, and Mobile layouts |
| Modern UI | Built with React, Tailwind CSS, and Lucide React using a professional Prism theme |
| Capability | Description |
|---|---|
| PERN Stack | Node.js, Express.js, React, and PostgreSQL |
| AI Website Generation | Generate clean, production-ready HTML, CSS, and JavaScript using advanced LLMs |
| Version Control | Save project history and restore previous versions with one click |
| Dynamic Loader | Four-stage loading animation during AI generation |
| Feature | Description |
|---|---|
| Better Auth | Secure authentication with custom-themed onboarding |
| Credit System | Track AI usage through credits |
| Community Showcase | Explore projects created by other users |
| My Projects | Organize and manage generated websites |
| Secure Preview | Isolated iframe rendering with secure script injection |
| Version Snapshots | Read-only previews of historical project versions |
User Prompt
↓
AI Website Generation
↓
Live Preview
↓
Visual Editing
↓
Save Version
↓
Project Management
| Layer | Technology |
|---|---|
| Frontend | React.js, TypeScript (TSX), Tailwind CSS, Lucide React |
| Backend | Node.js, Express.js |
| Database | PostgreSQL |
| Authentication | Better Auth |
| API Handling | Axios with Interceptors |
| AI | Advanced Large Language Models (LLMs) |
https://prism-ai-ashhaddev.vercel.app/
Muhammad Ashhadullah Zaheer
LinkedIn: https://www.linkedin.com/in/muhammad-ashhadullah-zaheer-41194a340/