WholeStack Docs

WholeStack helps you move from an app idea, customer workflow, or business need to a working mobile app. The platform gives you one workspace for planning, screen direction, AI-assisted building, real-device preview, store builds, publishing, and source export.

The fastest path for a new app is the guided prompt workflow. You describe the app, WholeStack creates a project plan first, you approve the plan, and then you choose whether to design screens before building or start building right away.

The recommended first build sequence

1. 1Open the dashboard and choose Create with Prompt.
2. 2Give the project a clear app or business name, then describe what you want in the prompt box.
3. 3Open the generated guided project and review the Planning tab.
4. 4Use the planning chat to revise screens, backend notes, API recommendations, data model notes, risks, or open questions.
5. 5Approve the plan with Approve & Design if you want screen direction first, or Approve & Start Coding if the scope is ready for implementation.
6. 6In Screen Design, choose a theme, optionally add visual direction, and generate the planned screens.
7. 7Approve the screens that should guide the build.
8. 8In AI Coding, review the prepared build prompt and use Send Planned Prompt when you are ready to start the coding chat.
9. 9Use the file explorer and editor to inspect or adjust code while the AI coding agent works.
10. 10Preview on your phone with Expo Go, then use Build & Publish when you are ready for store-ready artifacts.

Good app idea examples

Build a service booking app for a home cleaning company. It needs client onboarding, service package selection, availability calendar, booking confirmation, customer profile, payment-ready checkout screens, and an admin-friendly bookings view.

Build a mobile app for a boutique fitness coach. It needs onboarding, workout plans, habit tracking, progress charts, messaging, subscription-ready membership screens, and a clean premium visual direction.

Build an internal field operations app for a repair team. It needs a jobs queue, visit details, status updates, photos, technician notes, offline-friendly task flows, and manager review screens.

Guided workflow is used for projects created from a prompt. It is designed for professional delivery work where you need to turn a request into a plan, align on screens, and then build with clear context.

• Planning is where the product direction is generated, reviewed, revised, versioned, and approved.
• Screen Design is where approved plan screens become visual mobile screen directions that can be approved or regenerated.
• AI Coding is the full builder workspace with chat, file explorer, code editor, and a prepared build prompt based on the approved plan and screens.
• Preview on your Phone lets you run the project through Expo Go on a real device.
• Build & Publish lets paid users create store builds and submit retained builds when store credentials are ready.

Guided tabs you will see

• Planning: product plan, screen list, backend and API recommendations, implementation tasks, and planning-only chat.
• Screen Design: dark canvas, theme selector, generated mobile frames, Specs, approve, regenerate, delete, and PNG download.
• AI Coding: coding chat, prepared build prompt, file explorer, code editor, live coding visibility, and manual code editing.
• Preview on your Phone: Expo Go QR flow and phone preview session controls.
• Build & Publish: Expo connection, Android/iOS setup, retained builds, and publishing.

The Planning tab is the first stage of a prompt-created project. It turns the original brief into a structured product plan that you can review with a client or use internally before design and coding.

What the plan includes

• App Summary: a plain-language explanation of what the app should become.
• Target Users: the people who will use the app and what they need from it.
• Feature Scope: the core features the first version should include.
• Screens To Build: the screen list that can later feed Screen Design and AI Coding.
• Backend & Infrastructure: recommended backend pieces such as authentication, data storage, payments, notifications, or admin needs.
• Proposed API Connections: integrations that may be useful for the project, such as payments, analytics, maps, scheduling, messaging, or a database service.
• Data Model Notes: the main records the app will likely need, written in a user-friendly way.
• Implementation Tasks: a build checklist for the AI Coding stage.
• Risks: scope, data, release, or integration concerns to handle early.
• Open Questions: decisions you may still need from the client or team.

Planning chat

The chat inside Planning is only for planning changes. Use it to ask for a different screen list, more detail on backend needs, simpler scope, stronger API recommendations, or clearer implementation tasks. It is not the place to edit code.

1. 1Read the current plan version.
2. 2Ask the planning chat for a specific change, such as adding an admin dashboard screen or simplifying the first release.
3. 3Wait for the new version to finish.
4. 4Use the Version selector to compare versions if needed.
5. 5Approve the version you want to use for design or coding.

Approval choices

• Approve & Start Coding: approves the selected plan and opens AI Coding with prepared build context.
• Approve & Design: approves the selected plan and opens Screen Design so you can generate visual screen direction before coding.
• Retry planning: appears when planning fails or takes too long, and starts a fresh planning attempt.

Screen Design turns the approved plan screen list into mobile screen directions. It is useful when you want to align with a client on layout, visual direction, screen purpose, and app flow before asking AI Coding to implement the app.

Generating screens

1. 1Open Screen Design after approving a plan.
2. 2Review the planned screen count in the left panel.
3. 3Choose a Theme if you want a different visual direction.
4. 4Optionally add visual direction, such as premium, playful, dense dashboard, calm healthcare, or client brand notes.
5. 5Click Generate Planned Screens.
6. 6Wait while each screen appears on the canvas. You can leave the tab and return; generation state is preserved.

Screen generation and regeneration use your monthly plan usage. The UI shows the planned screen count before you start.

Using the canvas

• Use Select mode to choose and manage a screen frame.
• Use Hand mode to pan around the dark canvas.
• Use zoom controls to zoom in, zoom out, or reset the canvas view.
• Drag and resize mobile frames when you want to compare screens or inspect a taller screen.
• Tall screens expand so you can inspect the full generated direction instead of only the first visible area.

Screen actions

• Approve or unapprove a screen to decide whether it should guide AI Coding.
• Regenerate a screen with a short prompt when one screen needs a different layout, tone, or content emphasis.
• Open Specs to review the screen purpose, status, theme, and implementation guidance in a user-readable format.
• Download PNG when you want to share a screen direction outside WholeStack.
• Delete a screen if it no longer belongs in the project direction.

AI Coding is where the app is implemented. Guided projects show the full builder workspace here: coding chat, file explorer, editor, live coding visibility, and a prepared build prompt based on the approved plan and approved screens.

Prepared build prompt

The prepared build prompt summarizes the approved plan and screen direction so the coding agent starts with the right product context. It is visible by default, can be collapsed with the arrow button, refreshed, and sent with Send Planned Prompt.

How to use AI Coding well

1. 1Review the prepared build prompt and confirm it matches the approved plan.
2. 2Click Send Planned Prompt when you are ready to start coding.
3. 3Paste or adapt it into the coding chat and send it with the selected AI Coding model.
4. 4Watch live coding indicators to see what files are being touched.
5. 5Inspect files in the file explorer and editor.
6. 6Use focused follow-up messages for one feature, screen, bug, or design adjustment at a time.
7. 7Use Quick Edit for small targeted changes inside a selected block of code.

Coding model selector

AI Coding lets paid users choose from grouped OpenAI, Google, and Claude coding models. The model picker uses qualitative usage-impact labels. Free users are locked to Gemini 3 Flash Preview.

• OpenAI: GPT-5.5, GPT-5.4, GPT-5.2.
• Google: Gemini 3.1 Pro Preview, Gemini 3 Flash Preview, Gemini 2.5 Pro.
• Claude: Claude Sonnet 4.6, Claude Opus 4.7, Claude Haiku 4.5.

Standard projects are projects created from templates or imported from GitHub. They skip the guided Planning and Screen Design tabs because they already start with a codebase. Their main workspace starts in Code and keeps the normal builder experience.

Template projects

Templates are best when you want a polished foundation instead of a blank project. They include realistic screens, file structure, placeholders, and setup notes you can adapt to a client brand or internal business use case.

1. 1Open the dashboard and choose Start from Template or Browse All Templates.
2. 2Search or browse the template catalog.
3. 3Open a template to review Images, Phone preview, About, Included, Supabase tables, and Integrations.
4. 4Enter a project name.
5. 5Click Use Template.
6. 6Continue in the standard Code workspace with AI chat, file explorer, editor, preview, and build tools.

• Available starters include appointment booking, restaurant ordering, fitness coaching, real estate leads, marketplace, field service ops, event ticketing, membership community, e-commerce catalog, and SaaS companion apps.
• Templates are standalone app foundations. They include placeholders and setup guidance for backend services where relevant.
• Use AI Coding after template creation to tailor copy, screens, styling, business rules, or integrations.

GitHub imports

Use GitHub import when you already have a repository and want to keep building it inside WholeStack. GitHub import is available on paid plans and requires your GitHub account connection.

1. 1Choose Use GitHub from the dashboard.
2. 2Paste the Repository URL, such as https://github.com/owner/repo.
3. 3Start the import and wait for the project to finish importing.
4. 4Open the standard Code workspace when the repository is ready.
5. 5Use AI Coding, file editing, phone preview, export, and Build & Publish as needed.

Export to GitHub

Export to GitHub is available from the project top action bar. Set a repository name, choose public or private visibility, add an optional description, and follow the export status until the repository is created.

Every project workspace combines AI chat, files, code editing, preview, build tools, and export actions. Guided projects arrange those tools by stage; standard projects show the Code tab directly.

File explorer and editor

• Open files with a single click.
• Pin tabs with a double click when you want a file to stay open.
• Use file and folder actions to create, rename, or delete project files.
• Use editor tabs and breadcrumbs to keep track of the current file.
• Drag files into the workspace when upload is available for the project.

AI chat

• Build mode is for implementing features, changing UI, fixing bugs, and updating files.
• Test and Security modes are shown according to plan access and feature availability.
• History lets you review previous conversations.
• New conversation starts a fresh thread without deleting older project history.
• Cancel or stop controls appear while an AI message is actively processing.

Quick Edit

1. 1Select a block of code in the editor.
2. 2Open Quick Edit from the selection control or keyboard shortcut.
3. 3Describe the exact change you want.
4. 4Review the result and continue editing if needed.

Preview on your Phone lets you run the project through Expo Go on a real device. It is useful for checking navigation, spacing, forms, taps, and client review moments before you create store builds.

Phone preview steps

1. 1Open Preview on your Phone in the project workspace.
2. 2Use Step 1: Install or Open Expo Go if you do not already have Expo Go installed.
3. 3Use the iOS App Store or Android Google Play QR code for Expo Go.
4. 4Go to the preview step and click Start Phone Preview.
5. 5Wait for the status to move through Queued, Starting, and Running.
6. 6Scan the project QR code with Expo Go.
7. 7Use Copy Link when you need to share the preview link.
8. 8Click Stop when you are done testing.

• Ready to scan means the preview is running and waiting for your phone.
• Queued means your preview is waiting for a worker to start.
• Starting means the preview session is being prepared.
• Error means the session could not start or continue; use the suggested next step shown in the error panel.

Build & Publish is the project workflow for creating store-ready app files and submitting retained builds when your store accounts are ready. It is available on paid plans.

Step 1: Connect your Expo account

Paste an Expo access token so WholeStack can run build and submit actions using your Expo account. You can replace or disconnect the token later from the same workflow.

Step 2: Add app details used by both platforms

Save the Expo account owner for the project. This should be your Expo username or the Expo team that should own the app.

Step 3: Set up iPhone (iOS)

• Save a unique iPhone bundle identifier.
• Choose whether Expo should manage signing or whether you will provide your own credentials.
• For publishing, save the App Store Connect app ID and App Store Connect API key JSON.
• Use TestFlight or App Store release as the iOS publishing destination when submitting.

Step 4: Set up Android

• Save a unique Android package name.
• Choose whether Expo should manage signing or whether you will provide your own keystore.
• For publishing, save the Google Play service account JSON.
• Confirm the first manual upload in Google Play Console before using automated publishing.
• Use Internal testing, Closed testing, Open testing, or Production as the Android destination.

Step 5: Create the app file to send to the store

Use Create Android AAB or Create iPhone build. The Latest build attempt shows current status, and retained successful builds stay available for download or later publishing.

Step 6: Publish the build

Choose the platform, destination, and retained build, then click Publish this build. WholeStack validates the setup before starting the submission. After submission, Apple or Google may still require review, metadata, compliance answers, rollout actions, or final approval inside their store consoles.

WholeStack uses your Expo account for preview-related build work, store builds, and store submissions. Your Expo access token proves which account WholeStack should act as, and the Expo owner tells WholeStack which user or team owns the app.

1. 1Open expo.dev and sign in.
2. 2Open your profile menu and go to Account settings.
3. 3Open Access Tokens.
4. 4Create a new access token.
5. 5Copy the token and paste it into Step 1 of Build & Publish.
6. 6Save the Expo owner in Step 2. Use your Expo username or the Expo team name.

Android setup has two levels: build setup and publish setup. A build needs a package name and signing choice. Publishing also needs Google Play access and the first manual upload completed in Google Play Console.

1. 1Choose a unique Android package name, such as com.companyname.appname.
2. 2Choose managed signing if you want Expo to manage signing, or provide your own keystore if your client already has one.
3. 3Create the app in Google Play Console if you want to publish.
4. 4Create or select a Google service account, grant it access to the app, and download the JSON key.
5. 5Paste the Google Play service account JSON into WholeStack.
6. 6Complete the first manual upload in Google Play Console.
7. 7Return to WholeStack and publish to Internal testing, Closed testing, Open testing, or Production.

iOS setup has two levels: build setup and publish setup. A build needs a bundle identifier and signing choice. Publishing also needs App Store Connect app information and API credentials.

1. 1Choose a unique iPhone bundle identifier, such as com.companyname.appname.
2. 2Choose managed signing if you want Expo to manage signing, or provide your own credentials if your client already has them.
3. 3Create the app record in App Store Connect.
4. 4Find the App Store Connect app ID and save it in WholeStack.
5. 5Create an App Store Connect API key JSON with the right permissions and save it in WholeStack.
6. 6Create a successful iPhone build.
7. 7Publish to TestFlight or App Store release when the app and store account are ready.

WholeStack tracks AI work through monthly plan usage for planning, screen generation, and AI Coding messages. The platform shows percentages used, percentages remaining, reset times, and the current plan without exposing internal spend or token counts.

How usage is shown

• Plan Usage shows your monthly usage percentage.
• Monthly usage shows percent used, percent remaining, and reset time.
• Eligible paid users can restart monthly usage when delivery work needs more room before the natural reset.
• Free users can try the platform but do not see restart package actions.

Monthly plan access

• Free: starter usage, 5 total projects, limited phone preview, and free coding model access.
• Plus: more plan usage, 10 projects, unlimited phone preview, paid coding models, screen design, and builds.
• Professional: professional usage, more project capacity, GitHub import/export, unlimited phone preview, paid coding models, screen design, builds, and publishing.
• Max: max usage, higher project capacity, higher delivery volume, and access to advanced features as they become available.

AI Coding model usage impact

• Efficient models are best for routine cleanup, copy changes, and small UI edits.
• Balanced and Advanced models are better for feature work, debugging, and larger implementation passes.
• Premium models have higher usage impact and should be used for difficult architecture, major refactors, or complex debugging.

Example project usage

• A guided app with several planned screens uses plan capacity for planning, screen generation, and coding messages.
• A quick client prototype can use planning, a few screens, and several low-cost coding messages.
• A polished client delivery may use planning revisions, full screen design, premium coding passes, phone preview sessions, and store builds.

The Plans & Billing page shows your current plan, plan usage percentages, billing cycle controls, plan actions, billing history, and paid usage restart options.

• Use Billed Monthly or Billed Annually to compare plan billing options.
• Use Manage Plan or Billing History for existing subscription and invoice actions.
• Use Choose Plus, Choose Professional, Choose Max, Switch to Plus, Switch to Professional, or Switch to Max when changing plans.
• Use monthly restart packages when you need extra AI work before a natural reset.
• If a billing sync looks stale, use Retry sync when it appears.

Project creation fails

• Check that the project name is 2-50 characters.
• Make sure the prompt is not empty when using Create with Prompt.
• Confirm your plan has not reached its project limit.
• Check Plan Usage if the prompt workflow cannot start planning.

Planning is stuck or failed

• Wait briefly while the plan finishes generating.
• Use refresh if the page has been open for a while.
• Use Retry planning when the failed or long-running state appears.
• If a planning chat revision is not what you wanted, use the Version selector to return to another version.

Screen Design does not show screens

• Confirm that a plan version was approved in Planning.
• Check that the approved plan includes screens.
• Click Generate Planned Screens if no screens have been generated yet.
• If one screen fails, keep the successful screens and regenerate the failed screen.

AI Coding context looks incomplete

• Return to Planning and approve the plan version you want AI Coding to use.
• Approve the Screen Design screens that should guide the implementation.
• Use the refresh button in AI Coding to rebuild the prepared prompt.
• If you skipped Screen Design, AI Coding should still include the approved plan screen list.

AI message rejected

• Check Plan Usage for a reached monthly usage limit.
• Choose a lower-impact AI Coding model if the request can be handled with one.
• Free users can only use the free coding model.
• Make the request smaller if the message is too broad or hard to process.

Phone preview is not starting

• Stop and start the preview again if the session looks stale.
• Check the error panel for the next suggested action.
• Copy the error details into AI Coding if the app code needs a fix.
• Make sure Expo Go is installed on the phone you are using to scan.

Build or publish is blocked

• Confirm your plan includes Build & Publish access.
• Connect your Expo token and save the Expo owner.
• Check the Android package name or iPhone bundle identifier.
• Make sure another build is not already running.
• For publishing, confirm the platform-specific store credentials are saved.
• For Android publishing, confirm the first manual Google Play upload is complete.

GitHub import or export fails

• Confirm your plan includes GitHub import/export.
• Connect the correct GitHub account.
• Check the repository URL for imports.
• Check repository name, visibility, and permissions for exports.

Guided project

A project created from a prompt. It uses Planning, Screen Design, and AI Coding stages before preview and release work.

Standard project

A project created from a template or imported from GitHub. It starts directly in the Code workspace.

Plan version

A saved version of the guided product plan. Planning chat revisions create new versions so you can compare and approve the right one.

Screen specs

Readable screen details that explain the purpose, content, and implementation direction for a generated screen.

Prepared build prompt

The AI Coding context generated from the approved plan and approved screens. Use Send Planned Prompt when you are ready to start implementation.

Retained build

A successful store build kept in the project so it can be downloaded or submitted later.

Android AAB

The Android App Bundle file used for Google Play distribution.

Expo owner

The Expo user or team that should own the app for build and submit operations.