# Checkpoints
Source: https://easycode.mintlify.app/best-practices/checkpoints
Best practices for using checkpoints in your workflow.
## Checkpoints
*Best practices for using checkpoints.*
# Context Management
Source: https://easycode.mintlify.app/best-practices/context-management
Best practices for managing context in your project.
## Context Management
*Best practices for managing context.*
# Security
Source: https://easycode.mintlify.app/best-practices/security
Best practices for keeping your project secure.
## Security
*Best practices for security.*
# Task Breakdown
Source: https://easycode.mintlify.app/best-practices/task-breakdown
How to break down tasks for better productivity.
## Task Breakdown
*Best practices for breaking down tasks.*
# Installation
Source: https://easycode.mintlify.app/get-started/installation
Set up EasyCode Flow.
EasyCode Flow is an **IDE for vibe coders**. Unlike web based app builders, EasyCode Flow needs to be installed on your operating system.
This provides many benefits:
* you have full control of the development environment
* you have full ownership of the codebase
* you have full access to IDE features
## Download
This is a beta release. Please report any issues you encounter to help us improve the software.
M Series Macs
Not supported right now
1. Download the correct installer from above.
2. Open the installer, move EasyCode to the Applications folder.
3. Open EasyCode.
## Initial Set Up
EasyCode requires **NodeJS** and **Git** to function properly.
If they are not installed, EasyCode will guide you through the installation.
During Git installation, you will asked to include `xcode-select`, make sure to **Accept**. This step will take 5-10 minutes but is the only official to install **Git**.
Most Win 10/11 devices
Not supported right now
1. Download the correct Windows installer from above.
You may need to bypass Browser security to download the file.
2. Bypass Windows Security if necessary.
3. Open the installer and follow the instructions.
## Initial Set Up
EasyCode requires **NodeJS** and **Git** to function properly.
If they are not installed, EasyCode will guide you through the installation.
You will be prompted to give `Electron` and `NodeJS` network access during installation, make sure to **Accept**.
Linux is currently not supported.
## Common Installation Problems
**Step 1: Check for browser notifications**
Some browsers can silently block large files or ask for download permission. Check for any browser notifications.
**Step 2: Try a different browser**
Some users who use Brave or Arc have reported issues with downloading the installer. Try using Chrome or Safari.
**Step 3: Try direct download**
If you continue to experience issues, you can try downloading directly from these links:
* [Windows x64 Installer (Direct Download)](https://update.easycode.ai/download/stable/b1f034d572336bd0f1c855c997973d52230612d4/EasyCode-Installer.exe)
* [Mac Silicon Installer (Direct Download)](https://update.easycode.ai/download/stable/b1f034d572336bd0f1c855c997973d52230612d4/EasyCode-Installer.dmg)
This is likely caused by NodeJS or Git not being installed correctly. If installation fails after multiple attempls, please try installing NodeJS and Git manually.
You can find the official NodeJS and Git installation instructions below:
* [NodeJS Official Download](https://nodejs.org/en/download)
* [Git Official Download](https://git-scm.com/downloads)
# Quick Start
Source: https://easycode.mintlify.app/get-started/quick-start
Get started with EasyCode Flow in 5 minutes
This quickstart guide will walk you through building a full stack app using EasyCode Flow's core features. By the end, you will be familiar with the end to end process from planning to deployment.
**Prerequisites**: If you haven't installed and set up the IDE, please follow the [Installation Guide](./installation.mdx)
As an example, we will use the following app idea:
> ```
> Build a notes app with user authentication
> ```
## 1. Plan your app
* Enter app idea
* Give app name
* Review the plan
* **Accept**, **Reject**, or **Chat** to modify the plan
If you alraedy have a detailed PRD, you can copy and paste the PRD into the initial prompt and EasyCode will break it down to logical steps.
## 2. Build the first screen
* Approve agent's context selection
* Wait for code changes to finish
* Click **Open App** to inspect the app inside EasyCode Browser
* **Chat** to make adjustment or **Start Next Step**
The app is still a mock up at this stage, core functionalities are likely not implemented yet and will be added during later steps.
## 3. Connect Supabase
* Connect to your Supabase
* Approve access to organization
* Return to EasyCode Flow and **create a new project**.
* Approve Supabase changes
Currently we only integrate with new Supabase projects. If you'd like to use your existing Supabase project, let us know here and you will be the first to know when it becomes available.
## 4. Deploy your app
* Click **Deploy** -> **Deploy App** in the EasyCode Flow menu bar
* Wait for deployment to complete
* Inspect the deployed URL
Support for custom domain is coming soon.
## Next Steps
Fix errors the right way.
Integrate with 3rd party APIs such as OpenAI, Stripe (coming soon), etc.
## Common Problems
* Make sure you still have available project slots in your Supabase organization. If you are on a free Supabase plan, you will have 2 project slots.
* If you already have 2 or more projects, you can pause one of the projects to make room for new projects.
If all fails, try creating a New Organization in Supabase on a free tier, and click "Connect to Supabase" again from within EasyCode to initiate the access authorization.
Make sure all linter errors and runtime errors are fixed before trying to deploy.
After fixing any remaining errors, initiate deployment again.
Use EasyCode Flow's debugging tools:
* For compile/lint errors: Use the automatic quick fix prompts
* For runtime errors: Click "Fix Error" in the Flow Diagram
* For UI issues: Use Built-in Screenshot, Attach Image, or Element Selector
* For unexpected behaviors: Use the Interactive Debugger when prompted
Check the [Debugging Guide](../guides/debugging) for detailed instructions.
# Build the Front End
Source: https://easycode.mintlify.app/guides/build-the-front-end
Learn how to build the front end of your application.
* Approve agent's context selection
* Wait for code changes to finish
* Click **Open App** to inspect the app inside EasyCode Browser
* **Chat** to make adjustment or **Start Next Step**
# Connect APIs
Source: https://easycode.mintlify.app/guides/connect-APIs
Make your app work with 3rd party APIs.
3rd party APIs gives your app the additional capablities, for example you may want to:
* connect OpenAI API to build a chatbot.
* connect with Weather API to build a weather app.
* connect with Stripe to process payment.
EasyCode Flow has **native integration** with many 3rd party APIs, this means that:
✅ easy to integrate - simply add the API keys
✅ already has access to the correct documentation
\[images/guides/connect-api.gif]
All API keys are stored locally and not shared with anyone elese. EasyCode Agent will always store them server side so they are not exposed to the public.
## Native Integrations
Authentication, Database, realtime, etc.
Everything payment related - coming soon!
## Popular Integrations
## Other Integrations
# Connect Supabase
Source: https://easycode.mintlify.app/guides/connect-supabase
How to connect your project to Supabase.
* Connect to your Supabase
* Approve access to organization
* Return to EasyCode Flow and **create a new project**.
* Approve Supabase changes
Currently we only integrate with new Supabase projects. If you'd like to use your existing Supabase project, let us know here and you will be the first to know when it becomes available.
# Debugging
Source: https://easycode.mintlify.app/guides/debugging
Techniques and tools for debugging your application.
The key to AI debugging is:
* knowing which type of error you have
* choosing the right tool/technique to fix it
* using AI debugging best practices
## General Best Practices
* use advanced models for bug fixing
* be specific when prompting the AI (use images, what's working, what's not working, etc)
* use checkpoints to create "backups" of your codebase
* if you notice the AI is getting stuck, revert to a previous checkpoint and try different approach
For more on debugging workflow, check out our comprehensive debugging flow chart.
## Fix Lint/Compile Errors
Lint/compile errors happen before the execution of your app. It can be a failed type check, a formatting issue, an unused import, etc.
You can easily spot lint/compile errors because EasyCode Flow runs lint and build checks after each edit, catch errors, and display them either in the **Chat Panel** or in the **App Preview**.
You will be prompted with a **automatic quick fix**. You can either Accept or Reject.
Some lint errors do not break your app's functionality. However, we recommend you try to fix them as they come up to prevent accumulation of errors.
## Fix Runtime Errors
Runtime errors happens during the execution of your app. It can be an unhandled exception, a failed network request, etc.
You can find them inside server side or client side console logs. To make things easier, EasyCode constantly checks for runtime errors in your logs and display them in the **Flow Diagram**.
To fix runtime errors:
* click **Fix Error** inside the Flow Diagram
* notice it injects runtime logs into your Chat Context with pre-populated prompt
* submit chat
## Fix UI Issues
When trying to fix UI issues, provide as much details as possible. You can do so by:
* describe in detail via text
* provide an image using **Built-in Screenshot** or **Attach Image**
* specify the element using **Element Selector**
## Fix Unexpected Behaviors
Unlike lint or runtime errors, there may not be an explicit error message. Here is an exmaple:
**Expected Behavior**: Click button, modal opens up. \
**Actual Behavior**: Click button, nothing shows up.
Use the **Flow Diagram** to unerstand where things are failing. It could be in the front end, database, config or in a 3rd party library. Knowing this will help you prompt the AI better, significantly increasing the chance of fixing it.
To fix unexpected behaviors:
* describe **both** what is happening, and what you expect to happen.
* provide runtime log when relevant
* use **interactive debugger** if prompted
### Interactive Debugger
Once you describe the problem to the AI, EasyCode will automatically assess the situation and decide if **Interactive Debugger** should be activated. When activated, it will ask you to carry out the steps that cause the unexpected behavior.
This can be simple such as clicking a button, or invovle multiple steps such as loggin in, navigating to a different page, providing some user input, and clicking a submit button.
As you take these steps, EasyCode will add logpoints inside the relevant functions, tracing code execution end-to-end to determine where things went wrong.
Log points are different from console logs, they do not pollute your code thus do not need to be removed.
EasyCode adds the relevant log data to context, and tries to fix the problem
# Deploy App
Source: https://easycode.mintlify.app/guides/deploy-app
How to deploy your application to production.
* Click **Deploy** -> **Deploy App** in the EasyCode Flow menu bar
* Wait for deployment to complete
* Inspect the deployed URL
Support for custom domain is coming soon.
# Planning
Source: https://easycode.mintlify.app/guides/project-planning
Planning before implementation increases code quality and prevents unnecessary errors.
EasyCode's **Planning Mode** can be triggered at 2 different levels:
* **Project level**: break down a large idea into features, user flows, API integrations etc.
* **Feature level**: scope out a feature into techinical steps, with order of implementation.
There are 2 ways to activate Planning Mode\*\*:\*\*
1. Automatic Mode
2. Manual Mode
It's critical to take the time to **review AI generated plans**. \
\
Otherwise, there may be a difference between what you have in mind, and what the AI thinks you are trying to build - causing many issues during testing and validation.
## Automatic Planning Mode
At the start of every new chat, including the very first prompt, EasyCode Agent will assess the complexity & vagueness of your prompt.
If it deems the prompt is either too complex, or too vague, it will enter planning mode.
## Manual Planning Mode
To activte planning manually, simply tell the AI to
> Create a plan to \_\_\_\_\_\_\_
This will cause the AI to enter planning mode, and create a `plan.md` which you can modify directly or chat with the AI to modify.
To see a diagram of the plan, click **View Visualization** at the bottom right.
# FAQs
Source: https://easycode.mintlify.app/troubleshoot/faqs
Frequently asked questions and answers.
## Getting Started
Follow the 4-step Quick Start above, or check out the full [Quick Start Guide](../get-started/quick-start) for a detailed walkthrough.
Check for any browser notifications. Some browsers can silently block large files or ask for download permission.
Try a different browser. Some users who use Brave or Arc have reported issues with downloading the installer. Try using Chrome or Safari.
This is likely caused by NodeJS or Git not being installed correctly. If installation fails after multiple attempts, please try installing NodeJS and Git manually.
You can find the official NodeJS and Git installation instructions below:
* [NodeJS Official Download](https://nodejs.org/en/download)
* [Git Official Download](https://git-scm.com/downloads)
EasyCode Flow requires **NodeJS** and **Git** to function properly. Currently supported platforms:
* **MacOS**: Apple Silicon (M Series Macs) - Apple Intel not supported right now
* **Windows**: Windows x64 (Windows arm64 not supported right now)
* **Linux**: Currently not supported
## Supabase Integration
Currently, EasyCode Flow integrates with new Supabase projects. Existing project support is coming soon—let us know if you need early access!
* Make sure you still have available project slots in your Supabase organization. If you are on a free Supabase plan, you will have 2 project slots.
* If you already have 2 or more projects, you can pause one of the projects to make room for new projects.
If all fails, try creating a New Organization in Supabase on a free tier, and click "Connect to Supabase" again from within EasyCode to initiate the access authorization.
## APIs and Integrations
Go to the [API Integration Guide](../guides/connect-APIs) for step-by-step instructions on adding popular APIs. EasyCode Flow has native integration with many 3rd party APIs like Supabase, OpenAI, and more. Stripe integration is coming soon!
Yes! All API keys are stored locally and not shared with anyone else. EasyCode Agent will always store them server side so they are not exposed to the public.
EasyCode Flow has native integrations with:
* **Supabase**: Authentication, Database, realtime, etc.
* **Stripe**: Coming soon! Everything payment related
* **Popular APIs**: OpenAI, OpenRouter, Reddit, Anthropic, and more
We're constantly adding new integrations! If you don't see a specific API or service you need:
* **Stripe**: Payment integration is coming soon
* **Other integrations**: Check back regularly as we add new native integrations
* **Custom APIs**: You can still connect any REST API manually by adding your API keys and endpoints
* **Feature requests**: Let us know what integrations you'd like to see via [Discord](https://discord.gg/3kqeNhsQxH) or [email](mailto:support@easycode.ai)
## Debugging and Deployment
Make sure all linter errors and runtime errors are fixed before trying to deploy.
After fixing any remaining errors, initiate deployment again.
Use EasyCode Flow's debugging tools:
* For compile/lint errors: Use the automatic quick fix prompts
* For runtime errors: Click "Fix Error" in the Flow Diagram
* For UI issues: Use Built-in Screenshot, Attach Image, or Element Selector
* For unexpected behaviors: Use the Interactive Debugger when prompted
Check the [Debugging Guide](../guides/debugging) for detailed instructions.
* **Lint/compile errors** happen before your app runs (type checks, formatting issues, unused imports). EasyCode Flow displays these in the Chat Panel or App Preview.
* **Runtime errors** happen during execution (unhandled exceptions, failed network requests). These appear in console logs and the Flow Diagram.
## Support and Feedback
For code-related support, submit a report directly from within the app during the beta period. For general support:
* **Discord**: Join our community [here](https://discord.gg/3kqeNhsQxH)
* **Email**: Contact us at [support@easycode.ai](mailto:support@easycode.ai)
Since we're in early beta, you can:
* Submit code-related issues directly from within the app
* Join our [Discord community](https://discord.gg/3kqeNhsQxH) for discussions
* Email us at [support@easycode.ai](mailto:support@easycode.ai) for feature requests
# Support
Source: https://easycode.mintlify.app/troubleshoot/support
How to get help and support for your project.
We are currently in early beta. There will be bugs and missing features, and we'd love to hear your feedback as we continue to improve the platform.
### Code-Related Support
For code-related support issues, you can submit a report directly from within the app. One of our engineers will take a look and try our best to help you with the issue.
*Note: This level of support is offered only during the beta period.*
### General Support
For other support-related issues, you can reach out to us through:
* **Discord**: Join our community [here](https://discord.gg/3kqeNhsQxH)
* **Email**: Contact us at [support@easycode.ai](mailto:support@easycode.ai)
We're here to help and appreciate your patience as we work to make the platform better!
## Initial Set Up
EasyCode requires **NodeJS** and **Git** to function properly.
If they are not installed, EasyCode will guide you through the installation.
**Step 2: Try a different browser**
Some users who use Brave or Arc have reported issues with downloading the installer. Try using Chrome or Safari.
**Step 3: Try direct download**
If you continue to experience issues, you can try downloading directly from these links:
* [Windows x64 Installer (Direct Download)](https://update.easycode.ai/download/stable/b1f034d572336bd0f1c855c997973d52230612d4/EasyCode-Installer.exe)
* [Mac Silicon Installer (Direct Download)](https://update.easycode.ai/download/stable/b1f034d572336bd0f1c855c997973d52230612d4/EasyCode-Installer.dmg)
You will be prompted with a **automatic quick fix**. You can either Accept or Reject.
EasyCode's **Planning Mode** can be triggered at 2 different levels:
* **Project level**: break down a large idea into features, user flows, API integrations etc.
* **Feature level**: scope out a feature into techinical steps, with order of implementation.
There are 2 ways to activate Planning Mode\*\*:\*\*
1. Automatic Mode
2. Manual Mode
## Manual Planning Mode
To activte planning manually, simply tell the AI to
> Create a plan to \_\_\_\_\_\_\_
This will cause the AI to enter planning mode, and create a `plan.md` which you can modify directly or chat with the AI to modify.
To see a diagram of the plan, click **View Visualization** at the bottom right.
# FAQs
Source: https://easycode.mintlify.app/troubleshoot/faqs
Frequently asked questions and answers.
## Getting Started