How to do VibeCode for Open-SaaS
I want to connect/import open saas project in Bolt or any AI ide I want some guidance on what Docs or pdf should we upload so that the AI can understand what we are using which technology
4 Replies
Hi @Syed Maaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To help an AI IDE like Bolt or VibeCode understand your Open-SaaS project, you should provide documentation and files that describe the technologies and structure of the project. Based on the knowledge sources, here’s what you should consider:
1. Project Structure & Technologies
Open-SaaS is a Wasp template that uses React, Node.js, and Prisma. It also includes integrations like Stripe, OpenAI GPT API, Google Auth, SendGrid, Tailwind CSS, and Cron Jobs. The main programming languages are JavaScript/TypeScript for the frontend (React) and backend (Node.js), with Prisma for database management. The default database is PostgreSQL, typically run in a Docker container for this template.
See more details here. 2. Key Documentation to Upload
- The main Wasp documentation:
- Wasp Tutorial
- Starter Templates
- CLI Reference - The OpenSaaS-specific documentation:
- OpenSaaS Docs
- OpenSaaS GitHub Repository (for code structure and examples) - Any README.md or docs/ folder in your OpenSaaS project, as these usually describe setup, dependencies, and architecture. 3. What to Highlight for the AI IDE
- The wasp.config.js or wasp file (the main Wasp configuration). - The package.json (lists dependencies and scripts). - The src/ directory, especially: -
- Upload the above documentation and key files. - If the AI IDE supports context files, include the links to the official docs and your project’s README. - If you have a PDF export of the Wasp or OpenSaaS documentation, that can be helpful, but the most important are the actual config and code files. Summary:
Upload your project’s README, the Wasp and OpenSaaS documentation, and the main config/code files (wasp file, package.json, Prisma schema, etc.). This will give the AI IDE the best context about the technologies and structure you are using with OpenSaaS and Wasp. If you need to find the code for specific parts (like the admin dashboard), you can look in
Open-SaaS is a Wasp template that uses React, Node.js, and Prisma. It also includes integrations like Stripe, OpenAI GPT API, Google Auth, SendGrid, Tailwind CSS, and Cron Jobs. The main programming languages are JavaScript/TypeScript for the frontend (React) and backend (Node.js), with Prisma for database management. The default database is PostgreSQL, typically run in a Docker container for this template.
See more details here. 2. Key Documentation to Upload
- The main Wasp documentation:
- Wasp Tutorial
- Starter Templates
- CLI Reference - The OpenSaaS-specific documentation:
- OpenSaaS Docs
- OpenSaaS GitHub Repository (for code structure and examples) - Any README.md or docs/ folder in your OpenSaaS project, as these usually describe setup, dependencies, and architecture. 3. What to Highlight for the AI IDE
- The wasp.config.js or wasp file (the main Wasp configuration). - The package.json (lists dependencies and scripts). - The src/ directory, especially: -
src/client/ (React frontend)
- src/server/ (Node.js backend)
- src/shared/ (shared code)
- Prisma schema (usually in prisma/schema.prisma).
- Any custom scripts or configuration files (e.g., Dockerfile, .env.example).
4. How to Present to the AI IDE- Upload the above documentation and key files. - If the AI IDE supports context files, include the links to the official docs and your project’s README. - If you have a PDF export of the Wasp or OpenSaaS documentation, that can be helpful, but the most important are the actual config and code files. Summary:
Upload your project’s README, the Wasp and OpenSaaS documentation, and the main config/code files (wasp file, package.json, Prisma schema, etc.). This will give the AI IDE the best context about the technologies and structure you are using with OpenSaaS and Wasp. If you need to find the code for specific parts (like the admin dashboard), you can look in
src/client/admin in the OpenSaaS template as mentioned here.
If you need more detailed guidance on a specific AI IDE integration, the knowledge sources do not provide that information, but the above steps are a solid starting point for most AI-powered code tools.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Syed Maaz, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Give me the prompt for it
Wohooo @Syed Maaz, you just became a Waspeteer level 1!
Check out https://www.youtube.com/watch?v=WYzEROo7reY&t=4s, Vinny shows how to vibe code in Wasp (and OpenSaas is "just" a template for Wasp)
Wasp
YouTube
Vibe Code a Full-stack App Effectively - complete tutorial & workflow
Learn how to "vibe code" a full-featured, full-stack web application from scratch! In this video, we walk through building a collaborative envelope budgeting app using Wasp, React, Shadcn-admin (Tailwind + Shadcn/ui), Prisma, and AI assistance with Cursor & Gemini 2.5 Pro
Follow along (timestamps are 👇) as we demonstrate a realistic vibe cod...