docs: developer tools and ai integration docs (#188)

docs/AI-powered-development-with-Cursor.md

@@ -0,0 +1,35 @@
+## Empowering Development with AI
+
+### Using Cursor with Fliplet Extension
+
+Fliplet's VS Code extension is fully compatible with [Cursor](https://cursor.com), an AI-powered IDE that can accelerate your development workflow. Utilizing Cursor's AI capabilities along with Fliplet's platform, you can automate repetitive tasks, refactor code, and get AI-generated suggestions tailored to your specific Fliplet project.
+
+- **Code Generation**: Need a new component or function? Cursor's AI can generate boilerplate code based on your project's structure.
+- **Code Assistance**: Cursor helps with code review, debugging suggestions, and performance optimizations, ensuring you're building robust and scalable apps.
+
+### Getting Started with AI in Fliplet
+
+To start using AI in your development flow:
+1. Install the Cursor IDE
+2. Navigate to the Extensions panel (`Ctrl+Shift+X`).
+3. Search for `Fliplet` and click **Install**.
+4. Once installed, you'll find the Fliplet icon on the Activity Bar. Click it to access the extension's features.
+
+### Initial Configuration
+
+To link the extension with your Fliplet account:
+
+1. Open the Fliplet panel.
+2. Click on the **Fliplet: Login** button.
+3. Enter your Fliplet credentials to authenticate.
+
+## Usage
+
+### Working with Projects
+
+1. Once you've logged in, you can find your projects in the Fliplet panel.
+2. You can open project files in Cursor and make changes.
+3. Use the Cursor AI to generate code, refactor code, and get suggestions.
+
+
+By combining the power of Fliplet's tools with AI-driven development through Cursor, developers can drastically reduce development time and improve app quality.

docs/VS-Code-Extension-Setup-Usage.md

@@ -0,0 +1,39 @@
+# Fliplet VS Code Extension
+
+The Fliplet VS Code Extension is designed to streamline the development workflow for Fliplet apps. With this extension, you can easily integrate your development environment with Fliplet's platform, enabling faster and more efficient app building.
+
+## Setup
+
+### Prerequisites
+
+Before getting started, ensure you have the following installed on your machine:
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+- Node.js (version 12 or higher)
+- Fliplet CLI
+
+### Installation
+
+1. Open Visual Studio Code.
+2. Navigate to the Extensions panel (`Ctrl+Shift+X`).
+3. Search for `Fliplet` and click **Install**.
+4. Once installed, you'll find the Fliplet icon on the Activity Bar. Click it to access the extension's features.
+
+### Initial Configuration
+
+To link the extension with your Fliplet account:
+
+1. Open the Fliplet panel.
+2. Click on the **Fliplet: Login** button.
+3. Enter your Fliplet credentials to authenticate.
+
+## Usage
+
+### Working with Projects
+
+1. Once you've logged in, you can find your projects in the Fliplet panel.
+2. You can open project files in VS Code and make changes.
+
+### Extending App Features
+
+Developers can also use the Fliplet VS Code extension to manage and extend features like app navigation, custom themes, and data source integration. The integration with Fliplet Studio allows for real-time collaboration with your team.

docs/_layouts/default.html

@@ -296,6 +296,17 @@ <h4>Engineering update</h4>
                   <li><a href="/Theme-Settings-In-CSS.html">Use theme settings in your custom CSS</a></li>
                 </ul>
               </li>
+              <li>
+                <a href="#" class="toggle">
+                  <i class="fas fa-caret-right handle"></i>
+                  <i class="fas fa-cog"></i>
+                  Development Tools & AI Integration
+                </a>
+                <ul>
+                  <li><a href="/VS-Code-Extension-Setup-Usage.html">VS Code Extension Setup & Usage</a></li>
+                  <li><a href="/AI-powered-development-with-Cursor.html">AI-Powered Development with Cursor</a></li>
+                </ul>
+              </li>
             </ul>
             <hr />
             <a href="https://status.fliplet.com">Service status</a>