Using ShaDo AI
How to Use
A walkthrough of every major feature — from first project to export.
1. Create Your First Project
After completing the setup wizard, you land on the Dashboard. Click New Project and fill in:
- Project name — e.g. "My SaaS MVP"
- Type — Web App or Mobile App
- Description / Prompt — Describe what the product does in plain English
You can also start from a Template — switch the toggle to "From Template", pick one of the 10 built-in starters, and customise the prompt before generating.
2. Generate Pages
Inside a project, open the Pages tab and click Generate. ShaDo AI will:
- Analyse your prompt and decide which pages your app needs
- Generate each page in parallel (HTML preview, feature overview, user stories, backlog)
- Produce an ERD diagram for the project
Generation typically takes 30–90 seconds depending on the number of pages and your OpenRouter quota.
Each page opens in a live iframe preview. You can switch between Desktop and Mobile frame views from the top toolbar.
3. Version History & Rollback
Every generation creates a new version. The version history sidebar (right side of the page detail view) lists all versions with timestamps.
- Click any version to preview it
- Click Restore to make a version current — this creates a new version from the old content (nothing is destroyed)
- You cannot delete a page's only version
Versions are unlimited — regenerate as many times as you like.
4. Templates
Navigate to Templates in the sidebar to browse the 10 built-in starters:
- E-commerce Store
- SaaS Dashboard
- Admin Panel
- Hospital Management System
- School Management System
- Restaurant Ordering
- Mobile Banking App
- Food Delivery App
- Fitness Tracker
- Landing Page
Expand any template to preview its default prompt. Click Use Template to open the new-project form with the prompt pre-filled — then customise before generating.
5. AI Chat Assistant
The floating chat button (bottom-right corner) opens the AI assistant. It has full context about the current project — name, type, pages, and descriptions.
Use it to:
- Ask for regeneration suggestions ("Make the dashboard more minimal")
- Get user story breakdowns
- Brainstorm features or API design
- Ask general product management questions
The chat keeps the last 10 messages in context. Use the Clear button to start a fresh conversation.
6. Collaboration
Open a project and go to the Collaborators tab. Invite team members by email and assign a role:
| Role | Can View | Can Edit | Can Delete |
|---|---|---|---|
| Viewer | ✓ | — | — |
| Editor | ✓ | ✓ | — |
| Admin | ✓ | ✓ | ✓ |
You can also enable a public share link from the project Settings tab. Anyone with the link can view the project read-only — no login required.
7. Export
Click the Export dropdown in the project header to download your project in different formats:
| Format | Contents |
|---|---|
| ZIP | All HTML pages as standalone files |
| Prompt | Plain-text prompt used to generate the project |
| Figma JSON | Component structure importable into Figma |
| User Stories CSV | All user stories for import into Jira / Linear |
To export a single page as PDF, open the page detail view and click the PDF button in the top toolbar.