Getting Started

Your first project

App2 offers three ways to start building. Choose the approach that fits your workflow.

Option 1: Describe your idea

The fastest way to start. Simply describe what you want to build in plain language.

How to start:

1. Visit App2.dev

2. Choose your template: Web (React/Vite) or Mobile (Expo)

3. Type your app idea in the chat box

4. Hit Enter and watch App2 build your app

Example prompts:

• "Build a todo app with dark mode and priority tagging"

• "Create a recipe sharing app with user profiles and search"

• "Make a fitness tracker that logs workouts and shows progress charts"

Tip: The more specific you are, the better the results. Include features, design preferences, and user flows.

Option 2: Import from Figma

Turn your Figma designs into working mobile apps (React Native/Expo).

How to import:

1. Click "Import Figma Design" on the homepage

2. Connect your Figma account (OAuth)

3. Paste your Figma file URL

4. Press “Import Figma Design”

5. App2 analyzes your design and creates scenes

6. Choose which scenes to implement (frontend/backend)

What gets analyzed:

• Screen layouts and components

• Navigation flows

• Design tokens (colors, typography, spacing)

• Interactive elements

Note: Figma import currently supports mobile apps only. Web support coming soon.

Option 3: Start with a template

Browse pre-built templates to jumpstart your project.

Available templates:

• Web App (React/Vite): Modern single-page applications

• Mobile App (Expo): Cross-platform iOS/Android apps

• Premium & Community templates (coming soon)

Building with prompts

Once your project is created, you'll interact with App2 through conversational prompts in the chat interface.

Chat modes

App2 offers different modes for different tasks. Select the mode that matches your goal.

Tip: Use the right mode for the right job for best results and credits usage

Writing effective prompts

Do:

• Be specific about what you want

• Mention UI details, user flows, and edge cases

• Reference existing files or components

• Break complex features into smaller requests

Example good prompts:

• "Add a login form with email validation and a 'forgot password' link to the homepage"

• "Create a user profile page showing name, avatar, bio, and recent activity"

• "Add error handling to the API calls in UserService.ts"

Don't:

• Use vague descriptions like "make it better"

• Request too many features at once

• Assume the AI remembers previous conversations (use @mentions instead)

Using Quick Actions

Access powerful context tools through the Quick Actions panel.

Available actions:

📄 Docs & Rulesets

• Add custom documentation files to guide the AI

• Set project-specific rules and conventions

• Use @docs/filename to reference in prompts

📁 Files

• Browse your project's file structure

• Reference specific files with @file/path

• Helps AI understand existing code

🔗 Integrations

• Check connection status

• Configure GitHub, Vercel, Supabase, Figma

• Quick access to integration settings

🎨 Figma Flow (Figma projects only)

• View all scenes and categories

• Jump to any scene (frontend/backend)

• Track completion progress

Tip: Use @mentions to give the AI context about specific files or docs.

Working with Figma imports

Figma projects follow a guided workflow organized by scenes and phases.

Understanding scenes

Scenes represent individual screens or components from your Figma design. Each scene has two phases:

• Frontend: UI implementation, styling, layout

• Backend: Data logic, API calls, state management

Navigating scenes

Flexible workflow:

• Jump to any scene in any order

• Work on high-priority screens first

• Switch between frontend and backend freely

• Mark scenes complete for progress tracking

How to select a scene:

1. Open Quick Actions → Figma Flow

2. Browse scenes by category

3. Click a scene to set it as your target

4. Send prompts related to that scene

Viewing progress:

• Header shows completed/total scenes

• Green chips = completed, Grey chips = pending

• Storyboard modal shows full overview

Note: Completion tracking is for visualization only. All scenes are always accessible.

Figma-specific prompts

Example prompts:

• "Implement the Home Screen frontend with all components"

• "Add backend logic for the Profile screen to fetch user data"

• "Connect the Login scene to Supabase authentication"

Understanding your workspace

Your project workspace has three main areas.

Preview panel

Real-time app preview:

• Live preview URL updates automatically

• Test your app as it's being built

• Refreshes when code changes

• Works on both desktop and mobile devices

Controls:

• Open in new tab

• Refresh preview

• View in different screen sizes

File browser

Navigate your code:

• Browse project structure

• View file contents

• See recent changes

• Click files to reference in chat (@file/path)

Sandbox controls

Manage your development environment:

• Restart: Reload the sandbox without rebuilding

• Rebuild: Full rebuild from scratch (fixes most issues)

• View logs: Check console output and errors

Tip: If your preview isn't updating, try restarting the sandbox first before rebuilding.

Chat sessions

Organize your conversations by creating multiple chat sessions. Each session is a separate conversation thread where you can work on different aspects of your project.

Managing sessions

Create a new session:

1. Click the session dropdown in the header

2. Select "New Session"

3. Give it a descriptive name

4. Optionally inherit context from parent session

Why use multiple sessions:

• Keep conversations focused on specific features

• Separate different workstreams (frontend vs. backend)

• Maintain clean conversation history

• Easily switch between different tasks

Tip: Create separate sessions for major features. Name them clearly like "User Authentication" or "Payment Integration".

Connecting integrations

Enhance your App2 projects with powerful integrations.

GitHub [PRO]

Automatic repository creation:

• App2 creates a GitHub repo for every project

• Code syncs automatically with every change

• View commits and history

• Clone and work locally anytime

How to connect:

1. Click Settings → Integrations → GitHub

2. Connect your GitHub account

3. Select organization (or personal account)

4. Repository created automatically

Vercel [PRO]

One-click deployments:

• Deploy your app to production

• Get preview URLs for every change

• Configure custom domains

• Automatic builds on code changes

How to connect:

1. Link Vercel account in Settings → Integrations

2. Choose or create a Vercel project

3. Configure environment variables

4. Deploy with one click

Supabase

Backend-as-a-Service integration:

• Connect your own Supabase project

• Use your database, auth, and storage

• App2 AI understands your schema

• Generate queries and mutations

How to connect:

1. Create a Supabase project

2. Get your project URL and anon key

3. Add in Settings → Integrations → Supabase

4. Tell App2 to use Supabase in prompts

Example prompt:

• "Add Supabase authentication with email and password"

• "Create a 'tasks' table in Supabase with user_id, title, and status"

Figma

Design import integration:

• OAuth authentication

• Access your Figma files

• Import mobile app designs

• Sync design updates

How to connect:

1. Click "Import Figma" from homepage

2. Authorize App2 to access Figma

3. Designs available for import

Deploying your app

Get your app live in three easy steps.

1. GitHub sync

Your code is automatically synced to GitHub after every change.

Access your code:

• View repo in Integrations panel

• Clone: git clone https://github.com/your-org/your-repo.git

• Work locally with your preferred tools

2. Vercel deployment

Deploy directly from your GitHub repo.

Deploy from GitHub:

1. Connect Vercel project to your App2 project

2. Automatic deployments on every push

3. Preview deployments for branches

3. Custom domain (optional)

Add your own domain:

1. Configure in Vercel dashboard

2. Add DNS records from your provider

3. SSL certificate automatically provisioned

Team collaboration

Work together on projects in shared workspaces.

Inviting team members

How to add collaborators:

1. Go to Workspace Settings → Members

2. Click "Invite Member"

3. Enter email address

4. Choose role (Owner or Member)

Roles:

• Owner: Full access to billing, settings, and projects

• Member: Can create and edit projects, use workspace credits

Shared credits

• Team members share workspace credit pool

• Track usage by team member

• Set up Pro subscription for team access

Multiple projects

• Create unlimited projects in your workspace

• Free tier: public projects only

• Pro tier: private projects with access control

Tips for success

Credit management

Save credits:

• Use Plan mode for discussions

• Be specific to avoid multiple iterations

• Use @file mentions to provide context

Monitor usage:

• Check credit balance in top bar

• View usage history in billing section

• Buy additional credits as needed

Best practices

For prompts:

• Start with core functionality, add polish later

• Test features before moving to the next

• Use descriptive names for files and functions

• Request error handling and loading states

For Figma imports:

• Clean up your Figma file before importing

• Use clear, descriptive layer names

• Group related components

• Define navigation flows clearly

For collaboration:

• Use sessions to organize work

• Document decisions in project docs

• Review changes before deploying

• Communicate through session comments

Getting help

If something's not working:

1. Check sandbox status (restart if needed)

2. Review error messages in preview console

3. Use Debug mode to troubleshoot

4. Use Review mode to get code quality feedback

Support channels:

• FAQ - Common questions answered

• Discord - Community help

• Email: hello@app2.dev

Next steps

Now that you know the basics, explore advanced capabilities:

Learn more:

• Plans and Credits - Understand pricing and credits

• FAQ - Find answers to common questions

• GitHub Integration Guide (coming soon)

• Supabase Integration Guide (coming soon)

• Figma Import Deep Dive (coming soon)

Try advanced features:

• Set up Supabase backend with authentication

• Connect Stripe for payments

• Deploy to production with custom domain

• Invite team members to collaborate

Example project ideas:

• Task management app with real-time sync

• E-commerce store with Stripe checkout

• Social app with user profiles and feeds

• Portfolio website with CMS integration

Related links

• Welcome to App2

• Plans and Credits

• FAQ