Freddy Copilot for Developers - Features guide

These include converting use cases and designs into code, assisting in app migration, and generating code through natural language queries. These features streamline the development process and enhance productivity by leveraging AI capabilities.

1. Open Visual Studio Code, click on Freddy Copilot for Developer Icon to open the extension
2. Click on "Start building apps from scratch"
3. You will be prompted to enter the "folder name". Once entered VS Code will open a new windows with newly created folder as the current workspace.
4. Navigate to the extension, click again on the "Start building apps from scratch" option
5. Select the product for which the app is to be built, such as Freshdesk, Freshcaller, etc
6. Enter the use case as input when prompted, and submit
7. It will infer the app use case with applicable placeholder, click on submit. You can change this placeholder once the app is generated, via manifest.json
8. Verify the generated code by running the app. Refer to the video below when in doubt.

1. Open Visual Studio Code, click on Freddy Copilot for Developer Icon to open the extension
2. Click on "Start building apps from scratch"
3. You will be prompted to enter the "folder name". Once entered VS Code will open a new windows with newly created Folder as the current workspace.
4. Navigate to the extension, click again on the "Start building apps from scratch" option
5. Enter the use case as input when prompted, ensure to keep it clear and concise. Once entered click submit
6. It will infer the modules applicable as per use case. Select or remove the modules as per use case. Click on Confirm. You can change these placeholder once the app is generated, via manifest.json
7. It will infer the applicable placeholders, optionally you can select/remove applicable placeholders manually. You can change these placeholder once the app is generated, via manifest.json
8. Choose one of these options for uploading image for the usecase definition
   1. Drag+Drop the file to Freddy
   2. Upload the file via Browse option
   3. Provide figma link (Available only of Figma API key is configured)
   4. "Proceed without image", if you dont want to upload any image
9. Verify the generated code by running the app. Fix minor JS issues if encountered during app run.
10. Refer to the video below when in doubt.

1. Open Visual Studio Code, click on Freddy Copilot for Developer Icon to open the extension
2. Click on "Generate Code from Design"
3. You will be prompted to upload files in JPEG/PNG format with image size being less than 15 MB.
4. Optionally, if you have added Figma API key under the extension settings, you can give figma URL
5. You can preview edit or delete the uploaded image to ensure the right image is attached
6. Click "Submit" and wait for response, it will take between 10-45 seconds to respond.
7. The generated response will contain HTML code for the given design, you can preview the code, download the file, copy the content or use it in an existing file.

The Copilot’s "AI-assisted App Migration Assistant" feature simplifies the process of upgrading your apps to the latest platform version. This feature automatically understands the changelog, and identifies the necessary changes required for your app code. It allows you to review proposed changes before finalizing the migration, ensuring your apps remain reliable and up-to-date with minimal effort and cost.

Steps:

1. Launch Visual Studio Code and navigate to app project that is currently on platform version 2.X.
2. Navigate to the "App Migration" option and click to start migration
3. Migrations can take a few minutes (2-5 minutes) to complete. You can choose to wait or provide your email address so we can notify you once migration is complete. Come back later when a completion email is received.
4. Once migration is initiated, you will see following messages :
   1. "Migration has started..."
   2. "Migration is in progress..."
5. Once the migration is complete, you will be notified either via email or through a direct message in Visual Studio Code.
6. Once migration completes open the project if not already opened, and go to migration tab to review the changes :
   1. Merge Selected Files: Click "Merge Selected Files" to merge proposed code changes.
   2. Reject Changes: Click "Reject All Changes" to discard all updates and abort the migration process.
7. After accepting the changes, you will see the message: "Migration is successfully completed."
8. Test your app thoroughly to ensure all functionalities are working as expected
9. If any errors occur, you can address them using Copilot or manually
10. Once verified, submit the migrated app for review to ensure compliance with the latest standards

Note:Please provide feedback via thumbs up/down in Copilot extension or via the community to help us improve the feature.

This feature allows you to initiate a conversation with Freddy to get code suggestions, explanations, or assistance with any development-related queries. This feature uses natural language processing to provide relevant answers and code snippets

1. Open a Freshworks App in Visual Studio Code with an existing Freshworks App, if not create one using one of the app creation options mentioned above.
2. Click on "Freddy Copilot for Developers" and in the input box, add your query prompt and submit
3. The output will contain Gen AI service response shown in the chat webview with code options as applicable.
4. Use the interactive options as applicable
   1. Use the "Insert Code" option to insert the code in to the current at the cursor location
   2. Use the "Copy Code" to copy the code shown in the code window
   3. Use the "Download Code" option to download the HTMl file in to your local machine
   4. Use the "Preview Code" option to open the HTML preview of the generated code

These options include tools to document, test, review, refactor, and secure your code. They are designed to boost efficiency, ensure code quality, and provide seamless integration with the Freshworks development environment.

This feature allows you to get detailed explanations for the selected code. Freddy will analyze the selection and provide insights into its functionality, helping you understand complex or unfamiliar code sections of you existing / newly created Frehsworks app.

1. Navigate to your Freshworks App
2. Select a specific segment of the code, recommendations is not to use large code blocks at once.
3. Right Click and select "Freddy: Explain Selection" option
4. The result will be shown in the conversation pane of Freddy

This feature enables you to refactor the selected code to improve its structure and readability. Freddy suggests optimizations and modifications to enhance code quality and maintainability.

1. Navigate to your Freshworks App
2. Select a specific segment of the code, recommendations is not to use large code blocks at once.
3. Right Click and select "Freddy: Refactor Selection" option
4. The result will be shown in the conversation pane of Freddy
5. Use the generated content in your markdowns and incorporate code comments in the selected segement

This feature allows you to generate comprehensive documentation for the code selection for your Freshworks app in a markdown format. This command helps keep your documentation up-to-date and detailed without manual effort.

1. Navigate to your Freshworks App
2. Select a specific segment of the code, recommendations is not to use large code blocks at once.
3. Right Click and select "Freddy: Generate Documentation" option
4. The result will be shown in the conversation pane of Freddy
5. Use the generated content in your markdowns and incorporate code comments in the selected segement

This feature enables you to generate unit test cases for the selected code. Freddy creates unit tests which you can include in your test suite to ensure code reliability and correctness, helping you maintain high code quality.

1. Navigate to your Freshworks App
2. Select a specific segment of the code, recommendations is not to use large code blocks at once.
3. Right Click and select "Freddy: Generate Unit Test" option
4. The result will be shown in the conversation pane of Freddy
5. Use the generated content in your markdowns and incorporate code comments in the selected segement

This feature allows you to generate meaningful comments for the selected code. Freddy creates descriptive comments to improve code readability and provide context for future reference.

1. Navigate to your Freshworks App
2. Select a specific segment of the code, recommendations is not to use large code blocks at once.
3. Right Click and select "Freddy: Generate Code Comments" option
4. The result will be shown in the conversation pane of Freddy
5. Use the generated content in your markdowns and incorporate code comments in the selected segement

This feature allows you to perform a review of the selected code. Freddy provides suggestions for optimization, potential improvements, and best practices to enhance code efficiency and performance to meet Freshworks App Standards.

1. Navigate to your Freshworks App
2. Select a specific segment of the code, recommendations is not to use large code blocks at once.
3. Right Click and select "Freddy: Review Selection" option
4. The result will be shown in the conversation pane of Freddy
5. Use the generated content in your markdowns and incorporate code comments in the selected segement

This feature enables you to perform security checks on the selected code to identify and fix vulnerabilities. Freddy helps ensure that your code is secure and compliant with best practices, reducing the risk of security issues.

1. Navigate to your Freshworks App
2. Select a specific segment of the code, recommendations is not to use large code blocks at once.
3. Right Click and select "Freddy: Security Check" option
4. The result will be shown in the conversation pane of Freddy
5. Use the generated content in your markdowns and incorporate code comments in the selected segement

This category covers the lifecycle of an app from starting, stopping to packaging and publishing app.

Allows you to start your Freshworks application directly from within VS Code.

1. Navigate to the Freshworks App directory
2. Click on "Freddy Copilot for Developers" plugin
3. At the bottom you shall see an option to "Run App", click the same.
4. Navigate to your product account, and append "dev=true" in the query parameters, i.e., "?dev=true" or "&dev=true" as applicable
5. Check for the app placeholder for app rendering depending on your app template placeholder location

1. Navigate to the Freshworks App directory
2. Click on "Freddy Copilot for Developers" plugin
3. At the bottom you shall see an option to "Stop App", click the same.
4. If the app is already running in a terminal, the app run is stopped

This feature allows you to package your Freshworks application and publish it directly to the Freshworks App Management Portal right from within the VS Code. This command streamlines the deployment process, allowing you to quickly test your app by integrating it into the product.

1. Navigate to the Freshworks App directory
2. Click on "Freddy Copilot for Developers" plugin
3. At the bottom you shall see an option to "Pack and Publish", click the same.
4. You shall be prompted with option to publish an "New App" or "Existing App"
5. Fill in the necessary details based on your selection as shown in tabs below.
6. Once complete, click on "Submit" to publish the app the Product account using Developer Account