Build an app using Freddy AI Copilot for Developers

You can use Freddy AI Copilot for Developers to create a new app with the help of Visual Studio Code itself. Freddy generates the initial app structure and code from a natural-language use case, allowing you to focus on customizing app logic rather than writing boilerplate code.

To get started, use the following sample use case to build and test a new app:

A Bitly app that appears in the ticket sidebar in Freshdesk. When the user clicks a button, the app calls the Bitly API to shorten the current ticket URL and displays the shortened URL in the UI.

1. Open Visual Studio Code and launch the Freddy AI Copilot for Developers sidebar.

2. Under the Start a New App section, click Use-case to Code.

3. When prompted, enter a name for your new folder.

   • By default, the folder is created in your home directory (~/).
   • The folder name is also used as the app name.

4. When prompted, enter your app use case in the text box and click Generate Description.

   For the Bitly app use case mentioned here, you may enter the following prompt:

   Create a Bitly app that appears in the ticket sidebar in Freshdesk. When the user clicks a button, the app calls the Bitly API to shorten the current ticket URL and displays the shortened URL in the UI.

5. Freddy AI generates an app description and displays it for review.

   • To edit the generated description, click Modify Description.
   • To approve it and continue building the app, click Approve Description & Build.

6. After you approve the app description, Freddy AI begins generating the app code.

   The duration may vary depending on the complexity of your use case.

7. Once the app code is generated, Freddy prompts you to review it.

   • To accept the generated code, click Accept app code.
   • To reject and regenerate, click Reject all.

8. After you accept the app code, a success message confirms that the generated app code is available in the folder you created.

   You can now open the folder to review the generated files, explore the app structure, and begin customizing the app logic and UI.

9. To use additional actions, select a block of code, right-click on it, and choose from the available options:

   • Generate code comments
   • Perform a security check
   • Explain or refactor code, and so on

   To learn more about features, see Freddy AI for Developers features.

After the app code is ready, proceed to test the app.

You can use Freddy AI to update, refactor, or enhance an existing app directly in Visual Studio Code. Freddy automatically detects the app’s context and assists you with intelligent code suggestions and project-level insights.

1. Open your app project.

   1. Open your app project in Visual Studio Code.
   2. Verify that the project contains the required files and folders such as manifest.json, server/, and config/.

2. Verify configuration settings.

   1. Open your app project in Visual Studio Code.
   2. Ensure that your Freddy API key and FDK path are correctly set in the extension settings.
   3. If required, reauthenticate using your Freddy API key.

3. Launch Freddy AI Copilot for Developers.

   Open the Freddy AI Copilot for Developers sidebar in Visual Studio Code.

   When activated, Freddy automatically detects your app context and scans the project files to provide relevant assistance.

4. Describe the required changes.

   1. Open the Copilot chat pane

   2. You can choose between Agent mode and Ask mode to control how Freddy AI generates output.

      • Agent mode modifies files in your workspace. You can review the proposed changes and choose to accept or reject them before they are applied.
      • Ask mode generates code snippets or explanations without automatically modifying files in your workspace.

      To learn more about Agent/Ask mode, see Conversation to code.

   3. Describe the modifications you want to make using natural language.

   Freddy analyzes your request and generates the corresponding code snippet.

5. Review and apply the changes.

   If the changes meet your requirements, do one of the following:

   • In Agent mode, approve the changes to apply them to your workspace.
   • In Ask mode, manually insert the generated code into the appropriate project files.

6. Use additional Copilot features (optional)

   You can perform additional actions by selecting a code block, right-clicking, and choosing one of the following options:

   • Explain selection
   • Refactor selection
   • Review selection
   • Generate documentation
   • Generate code comment
   • Generate Unit test
   • Security Check

7. Test the app

   After applying your changes, test the app to ensure it functions as expected.

Follow these steps to test your app:

1. In the Freddy AI Copilot for Developers panel, click the "Run App" icon. Wait for the development server to start.

2. Log in to the Freshworks product account where you want to test the app deployment. To the default account URL displayed in the address bar, append ?dev=true.

   Example URL: https://subdomain.freshdesk.com/helpdesk/tickets/1?dev=true

3. Navigate to the location where the app is deployed and verify that the app renders correctly.

4. Test the app functionality to ensure it behaves as expected.

Note: To learn more about locally testing your front-end or serverless app, see Developer documentation > Test the app.

When you’re finished testing, click the "Stop App" icon to stop the development server.