This tutorial enables developers to onboard with the latest app development experience for Freshworks App Developers. The content outline for the tutorial is as follows

What is Freddy Copilot for Developers?

Freddy Copilot for Developers is a Generative AI-powered development experience tool that allows quicker and more intuitive app development. Stretching across the Freshworks app development journey, it integrates seamlessly with Visual Studio code and can suggest code snippets through conversational messages.

It is a powerful VS Code extension designed to help developers streamline their Freshworks application development process. With Freddy Copilot for Developers, developers can perform operations such as

  1. Learn app development via Chat-based tutorials
  2. Rapid code generation
  3. Perform 1-Click actions such as
    1. 1-Click Review
    2. 1-Click Documentation
    3. 1-Click Publish

Freddy Copilot for Developers

What's New in Freddy Copilot - Use Case to Code Integration!

We're excited to introduce the latest enhancement to Freddy Copilot, your trusted companion for simplifying Freshworks app development within Visual Studio Code. In this update, we're thrilled to unveil a groundbreaking feature: "Use Case to Code Integration."

What is Use Case to Code Integration?

Imagine a scenario where you have a concept or a requirement in mind for a Freshworks app, but you're not quite sure how to translate it into code. That's where our Use Case to Code Integration steps in!

Simply describe your use case or requirement in plain language, and Freddy Copilot will intelligently analyze your input and generate the corresponding Freshworks app code for you.

Why Use Case to Code Integration Matters:

Detailed feature list

Freddy Copilot for Developers supports a variety of features and here is a quick list of all the supported items

  1. Conversational interface for chat - Text-based code generation via the chat interface
  2. Refactoring code: It can analyze the code selection and suggest improvements to make it more efficient, readable, and maintainable.
  3. Explaining code: It can document the code selection and provide detailed explanations for complex code sections.
  4. Optimising code: It can optimize the code selection for better performance and faster load times. This can include optimizing images, reducing file sizes, and implementing caching techniques.
  5. Writing documentation: It can create documentation for the app, including user guides, developer guides, and API documentation.
  6. Create App: Create an FDK app using the app starter template
  7. Run App: Run the app right from your VSCode by right-clicking anywhere in the text editor and selecting "Run App"
  8. Pack and Publish App: Pack the app zip and publish to AMP without leaving your IDE
  9. Perform security check: For code selected by user, they can perform security check to see if the selection has any security vulnerabilities
  10. Generate unit tests: Write unit test cases for the selection

Freshworks Developer Platform is comprehensive and supports variety of feature and tools to simplify the app development experience.

  1. To kick things off, you would first need to create a Developer Account
  2. Within the Dev Account, Sign up for a free trial account with a Freshworks product of your choice.
  3. Install the Freshworks CLI, aka FDK as pre-requisite for local app development
  4. Install and configure Freddy Copilot for Developers, and start building Freshworks Applications.

Proceed with these items by following the instructions given in the next steps
  1. Navigate to the Developer Platform landing page.
  2. Click on Sign up
  3. Select one of the following options as per applicability
    1. Organization URL for existing organizations of type https://{name}.myfreshworks.com. For example - https://tgs-xxxxxxxxxxxxxxxx.myfreshworks.com
    2. Account URL for Accounts of type https://{name}.freshdesk.com. For example - https://paidappsdemo.freshdesk.com
    3. Use the Signup option if using Freshworks products for the first time.
  4. Choose either of the following options
    1. Sign up using Gmail
    2. Sign up by providing credentials manually
  5. Verify the email address when signing up
  6. Complete the signup process to log in to the Application Management Portal (AMP). The URI for the same would be of type https://tgs-xxxxxxxxxxxxxxxx.myfreshworks.com/developer

Developer Account Signup

For first-time users

  1. Navigate Developer Account created in the previous step, it would be similar to https://tgs-xxxxxxxxxxxxxxxx.myfreshworks.com/developer
  2. The first-time users will be shown a warning message "You need to sign up for at least one product to build the app" with a link to explore products
  3. Click on Explore products and select the product of interest and click on Signup option
  4. Fill in the organization name and click on "Start Free Trial", and complete the signup process.

For existing users

  1. Navigate Developer Account created in the previous step, which would be similar to https://tgs-xxxxxxxxxxxxxxxx.myfreshworks.com/developer, or navigate to the product account which would be similar to https://{accoun-name}.{product}.com for example https://paidappsdemo.freshdesk.com
  2. From the global sidebar, click on "Freshworks Switcher"
  3. Select the product of your choice from the "explore other products" section
  4. Fill in the account name and click on "Start Free Trial", and complete the signup process.

Product Account Signup

This section details the steps required to install the Freshworks Developer Command Line Toolkit commonly referred to as Freshworks Development Kit (FDK) on different operating system platforms. The content outline for this section is as below.

6.1 Prerequisites for FDK CLI

The FDK is built as a Node JS application and requires the following software to be installed

  1. Node version manager/NVM (Optional)
  2. Node JS v18.13.0+

FDK Installation

6.2 NVM Installation

The NVM installation instructions defer based on the platforms. Choose the steps for the respective operating system and follow the instructions to install the CLI.

MacOS

  1. Install brew using the command below. Skip this step if already have brew installed locally 
    # run below command via terminal
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Verify the installation
brew version
  2. Install NVM via brew 
    # run below command via terminal
# install nvm
brew install nvm
  3. Add nvm to your shell profile: To make nvm available every time you open a new terminal window, you will need to add the following line to your shell profile (e.g., ~/.bash_profile or ~/.zshrc): 
    source $(brew --prefix nvm)/nvm.sh
  4. Verify NVM version 
    # verify version
nvm --version
# output should be v0.39.1 or higher

Ubuntu

  1. Patch your system with the latest software updates 
    # Update your system software
# When prompted enter the admin user credentials to execute the command
sudo apt update && sudo apt upgrade -y
  2. You must have cURL installed 
    # run below command
sudo apt install curl
  3. Download and execute the installer script using the following Command 
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
  4. NVM keeps all files under the $HOME/.nvm directory. Then it sets the environment in the user's .bashrc file. You need to load this environment to set the required configuration by running the following command: 
    source ~/.bashrc
  5. Verify NVM version 
    # verify version
nvm --version
# output should be v0.39.1 or higher

Windows

Install via installers

  1. Download the NVM Setup from here
  2. Complete the installation process using steps given here

Install via chocolatey package manager

  1. Launch the Poweshell in Admin mode
  2. Run the following command 
    Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
  3. Verify Chocolatey installation using the command given below 
    choco -v
  4. Install NVM via chocolatey package manager 
    # install nvm
choco install nvm
  5. Verify NVM installation 
    nvm --version
# output should be v0.39.1 or higher

Install inside Windows Subsystem for Linux

  1. Open WSL2 for Ubuntu from the start menu
  2. If you don't already have it, install curl 
    sudo apt-get install curl
  3. Run the NVM installation script as shown below 
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  4. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc). 
    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" 
# This loads nvm

CentOS/RHEL7

  1. Patch your system with latest software updates 
    # Update your system software
sudo yum update
  2. You must have cURL installed 
    # run below command
sudo yum install curl -y 
# when prompted enter the admin user credentials to execute the command
  3. Download and execute the installer script using the following Command 
    curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
  4. NVM keeps all files under the $HOME/.nvm directory. Then it sets the environment in the user's .bashrc file. You need to load this environment to set the required configuration by running the following command: 
    source ~/.bashrc
  5. Verify NVM version 
    # verify version
nvm --version
# output should be v0.39.1 or higher

6.3 Node Installation

Installation Using NVM

  1. Check if you have existing NVM installation and is pointing to right version 
    nvm -v
# output should be v0.39.1 or higher
  2. Use NVM to install Node 18 
    nvm install 18
# output should be similar to "Downloading and Installing node v18.13.0 or higher"
# towards completion you should see similar to "Now using node v18.13.0 (npm v9.5.0)"
  3. Verify the Node version 
    node -v
# output should be higher than v18.13.0
  4. Set default alias for Node 18 
    nvm alias default 18
# default -> 18 (v18.13.0) or higher

Installation Using Installers

  1. Download the setup for Node from here as applicability
  2. Follow the installation steps in the installer when prompted

Installation using other package managers

  1. For CentOS
    dnf module install nodejs:18/common
  2. For Windows
    winget install OpenJS.NodeJS

6.4 FDK Installation

Fresh installation

  1. Use Node Package Manager (NPM) to install latest Freshworks CLI 
    npm install https://cdn.freshdev.io/fdk/latest.tgz -g
  2. Verify the installation using command below 
    fdk -v

Upgrade the existing version of FDK CLI

  1. For existing Users of FDK CLI with version <9.0.0, remove the existing version of FDK using the command given below 
    npm uninstall fdk -g
  2. Remove the ~./fdk folder manually using the command given below 
    # remove the ~/.fdk folder
rm -r ~/.fdk
  3. Use Node Package Manager (NPM) to install latest Freshworks CLI 
    npm install https://cdn.freshdev.io/fdk/latest.tgz -g
  4. Verify the installation using command below 
    fdk -v

Installation summary

Towards the end of the installation, your output should be the same or higher than the listed versions

#for nvm -v
0.39.3
# for node -v
v18.13.0
# for npm -v
9.5.0
# for fdk -v
9.0.2

Here is the content outline for this section

Visual Studio Code Setup

  1. Download Visual Studio Code installer from here as per your workspace environment.
  2. Follow the installation steps as per your workspace environment
    1. For MacOS
    2. For Windows
    3. For Linux

Freddy Copilot for Developers - Download

  1. Launch the Visual Studio Code application
  2. Navigate to Visual Studio Code Marketplace by clicking on "Extensions"
  3. Under "Search Extensions in Marketplace" search for "Freddy Copilot for Developers"
  4. Click on "Install", post installation it should reload the workspace.
  5. If not reloaded automatically you will be prompted with success message with option to "Reload"

Copilot Installation instructions

Freddy Copilot for Developers - Configuration

  1. Navigate to installed extensions, and select Freddy Copilot for Developers.
  2. Click on settings gear, select extension settings
  3. When launched you shall see following settings in the settings page
    1. FDK Path - Refers to the FDK installation path available for your workspace
    2. API Key - To be retrieved from Developer profile from AMP page
    3. User Name - Name that will be visible for your chat in conversational interface
    4. Context Settings - Number of previous conversation responses to be remembered and referred to while framing a new answer with stored context for the respective conversation. This ensures more accuracy in the answer given.
  1. Open integrated terminal by selecting Terminal -> New Terminal
  2. Check your Node version if it is v18.13.0 or higher, using command given below. If not installed already then install it using steps in "6.1 Prerequisites for FDK CLI" 
    node -v
# if you have more than one Node JS installations with nvm, use the v18.xx.x instance using following command
nvm use 18
  3. Check if FDK is installed and is v9.0.2 or higher, using command given below. If not installed already then install it using steps in "6.4 FDK Installation" 
    fdk -v
# if using older versions of FDK it might ask for an FDK update. When prompted allow the upgrade
  4. Get the FDK installation path
    1. For MacOS or Linux environments use command given below 
      which fdk
    2. For Windows instances
      1. If Node is installed using Chocolatey then the path will be as follows 
        C:\ProgramData\nvm\v18.xx.x\fdk
      2. If Node is installed via installer then - the path will be as shown below 
        C:\Program Files\nodejs\fdk
      3. If installed at any other location than the relevant location 
        <DRIVE_NAME>:\<INSTALLATION_LOCATION>\nodejs\fdk
      4. Optionally it can be present under following location 
        C:\Users\{YOUR_USERNAME}\AppData\Roaming\npm\{node_version}\bin\fdk

Copilot Configuration instructions

Feature list

Followiing are the features supported in current release of Freddy Copilot for Developers

  1. App creation
    1. Existing app creation experience
    2. App creation via app templates
    3. Use case to code conversion
    4. Build your own app template
  2. One click operations
    1. Run App
    2. Stop App
    3. Pack and Publish
  3. Developer productivity options
    1. Conversation to code
    2. Insert and copy code
    3. Download code
    4. Explaining code
    5. Optimising code
    6. Writing documentation
    7. Perform security check
    8. Generate Unit Test cases
    9. Perform code review

App creation

Existing app creation experience

Freshworks Developer Platform supports command line interface for app development, referred to as Freshworks CLI (FDK). It is a Node JS based utility that allows developer to create apps for Freshworks product by using pre-configured app templates.

  1. Using fdk create option, developer can create a starter app by selecting product for which the app is to be built.
  2. Once the desired product and template is selected, the app directory is created with required files in it.
  3. The Developer then would need to start the application via fdk run command and stop the same using Ctrl + C option
  4. Once the development is complete, the app need to be bundled using fdk pack and the generated app distribution bundle archive need to be manually uploaded to the AMP for app listing/publishing.

Here is a quick glimpse of exiting app developer journey

Existing app development journey

App creation via app static templates with Freddy Copilot for Developer GUI

  1. Open Visual Studio Code workspace with an empty directory
  2. Open Freddy Copilot for Developer extension from the empty directory, you shall see an option for app creation
  3. Click on "Choose Template"
  4. Select the product for which you wish to build the app
  5. Select the starter app template name from the dropdown
  6. Click "Submit", to create a new app in the current app workspace

Create a new app via templates

Build your own app template

  1. Open Visual Studio Code workspace with an empty directory
  2. Open Freddy Copilot for Developer extension from the empty directory, you shall see an option for app creation
  3. Click on "Create Template"
  4. Enter the prompt for your application use case begining with "I want to build an app"
  5. Click "Submit", to create a new app in the current app workspace

Create a new app by generating custom templates

Use case to code conversion

  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
  6. Enter the use case as input when prompted, and submit
  7. It will infer the app use case with placeholder,click on submit
  8. It will generate the app as per use case
  9. Verify the generated code. Refer to the video below when in doubt.

Generate app from your use case

One click operations

Run App

  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
  5. Check for the app placeholder for app rendering depending on your app template placeholder location

Run Freshworks App

Stop App

  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

Stop running Freshworks App

Developer productivity options

Chat based code generation

  1. Open a Freshworks App in Visual Studio Code
  2. Click on "Freddy Copilot for Developers" and in the input box, add your query prompt and submit
  3. The output should be a response from Freddy Copilot Generative AI Service shown in the chat webview

Text to code

Insert code

  1. The generated output of chat based code generation, if contains a code segment, by default option to insert and copy code are shown along with code segment
  2. Open the file in which you want to insert the code
  3. Click on or select the segment where you wish to insert the generated code.
  4. Navigate to chat response in Freddy Copilot for Developers and click insert, the content in file should get replaced with the new one.

Insert code

Copy code

  1. The generated output of chat based code generation, if contains a code segment, by default option to insert and copy code are shown along with code segment
  2. Navigate to chat response in Freddy Copilot for Developers and click copy code option.
  3. Navigate to the file where you wish to paste the code content
  4. Select the segemnt or bring your cursor to the place where you wish the paste the content and paste it.

Copy code

Explain code

  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 -> Explain code

Explain code

Writing documentation

  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 -> Write documentation
  4. Use the generated content in your markdowns and incorporate code comments in the selected segement

Generate documentation

Perform security check

Security Review code

Pack and Publish

  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.
  6. Once complete, click on "Submit" to publish the app the Product account using Developer Account

Pack and publish workflow

What is Freddy Copilot for Developers?

Freddy Copilot for Developers is the Generative AI-powered development experience that enables faster and more intuitive app development. Stretching across the app development journey, it integrates seamlessly with Visual Studio code and can suggest code snippets through conversational messages. It helps developers build and publish reliable apps faster through chat-based tutorials, Rapid code generation, and 1-Click actions such as 1-Click review, 1-Click Documentation, and 1-Click Publish.

With Freddy Copilot for Developers, you can forget mundane coding tasks or build apps from scratch and get started with building apps for your business needs right when you need them, and as quickly as you need it.

Why should I use Freddy Copilot for Developers?

Through the power of generative AI, Freddy Copilot for Developers helps you ship high-quality, reliable Apps faster. Using the chat-based tutorials, Freddy Copilot for Developers empowers you to overcome upskilling challenges on a new platform. With rapid code generation, you can swiftly generate code for mundane, repetitive tasks. With 1 -Click actions you can review, document, and publish easily.

With assistance across the development journey, you can transform ideas from use cases to code deployments in a breeze. Freddy Copilot for Developers enables you with more time for value-added tasks and driving innovation across your business.

What training data was ingested by Freddy Copilot for Developers?

Freddy Copilot for Developers is capable of addressing app development-related queries along with general programming paradigms as it has the context of Freshworks Developer documentation. With future releases and advancements in the platform, additional documentation will be added or updated in its knowledge base to ensure users get relevant results.

How can I enable Freddy Copilot for Developers for my organization?

You can list your email for our beta access, and keep eyes on the email and community announcements on open launch.

Which programming languages does Freddy Copilot for Developers support?

Currently, the Freshworks Developer Platform supports Node JS and React-based applications. To be consistent with platform behavior Freddy Copilot for Developers support the same.

What guidelines should I follow to get better results from Freddy Copilot for Developers?

Kindly follow the standard input prompting techniques for conversational AI models. Furthermore, to get improved results kindly use Freshworks app development context-related query terms.

Can I choose not to use the code produced by Freddy Copilot for Developers?

You can very well do that. The Freddy Copilot for Developers operates as a developer assistant for code that provides chat-based code recommendations and one-click actions. The generated code output provides users explicit options to "copy code" or "insert code." Developers can choose to include or discard the output code as deemed necessary.

What is the correctness of the code produced by Freddy Copilot for Developers?

The Freddy Copilot for Developers is an AI assistant and produces moderately accurate code snippets for the Freshworks app context when prompted correctly. However, since it is in its early stages of development, at times the results might not be accurate. We recommend developers provide feedback on the output response whenever met with such a situation, which will allow us to improve the code quality for such sections.

Which all conversational languages can I use apart from English while using Freddy Copilot for Developers?

The multi-lingual support is not there yet and English is the only supported language. When demand for a specific language increases it may be incorporated into Freddy in future versions.

Is there any pricing?

Currently there is no pricing for Freddy Copilot for Developers, we are opening gates for developers to explore Freddy Copilot for Developers and build apps for freshworks. There will be rate limiting on API calls.**

Is Freddy Copilot for Developers available across all regions?

Yes, as of 15th June 2023, Freddy Copilot for Developers is available globally in all the Freshworks regions.

Is there any limit on plugin usage or tokens?

The Freddy Copilot for Developers is available with hourly token limit. These limits can be configured at account level and can be increased with formal requests via support process.

These tokens are a soft quota limit to put control the on number of calls allowed via developer interface to limit platform abuse. The available tokens for use will be shown in the left top corner of the conversational chat interface.

Remaining tokens

Will Freddy Copilot for Developers reproduce my private code?

No, Freddy Copilot for Developers will not be having any code base except one you give it as an input. Freddy can accept textual input as well as code-based inputs. When passed private code as input, it can analyze and suggest improvements for the code.

What is the context persistence setting in Freddy Copilot for Developers?

Freddy explicitly uses chat context to give contextual results based on user input queries. It results in higher token usage; hence, it is a configurable option that users can opt in or out of. By default, it uses five query responses as context for giving relevant results, which are maintained in the local storage of the workspace. Once the user closes the current workspace, the data is lost.

How can I control the sharing and use of my data in Freddy Copilot for Developers?

Freddy implicitly captures user data such as output feedback (upvote, downvote, and textual inputs), tokens used, and input prompts to enhance output quality in the future. It further uses chat context of last five interactions to provide relevant results. However, it doesn't support chat persistence, so no confidential or personal information is captured or stored. Hence, the data sharing controls are not in place.

Are there any data and privacy guidelines that are followed?

When developing applications that deal with sensitive data, we recommend complying with local data and privacy guidelines with local regulations for app building while using Freddy. For example, EU-GDPR when dealing with customer data for the European region.

Use case list

In this section we will build few simple app use cases from real time and try to build apps for the same using Freddy Copilot for Developers. They are listed as below

  1. Developer Profile Analyser
  2. Bitly URI shortner
  3. Shopify App
  4. TeamViewer integration with Freshservice

Use case definitions

The above mentioned use cases can be solved with Freshworks in following manner

  1. Developer Profile Analyser - Can be built as client side application that captures these details in a Crayons form and send this data and send it to external API built by Prince
  2. Bitly URI shortner - takes a long URL as input, converts it to a short one and displays the short URL on the UI
  3. Shopify App - Fetch order information from Shopify using email ID as input, and shows the information in a card layout
  4. TeamViewer integration with Freshservice - Creates a remote session via API integration in Freshservice against a ticket in sidebar. When clicked on Start Remote Session, it initiates the new remote session.

Token limit exhausted

The configured token limit for the developer account is 60000 tokens per hour. If exhausted the quota limit, wait for the cooldown period and try again. Be mindful when using large and complex queries as it will consume higher amount of tokens.

Packed and published app not visible under my account

Verify your API key and account association is pointing to the environment being referred to. If you have more than one developer account, then the respective account API tokens will be different and will be used for publishing the apps using the same.

Hands on labs

Use cases link

What lies in future DevRel roadmap items for Freddy Copilot for Developers

  1. Improved developer productivity Features
  2. Support for natural language inputs for building app as opposed to Freshworks specific terminologies
  3. Advanced support for prompt
  4. Chat based guided tutorial for app building
  5. Sample Apps with follow along tutorials for building Apps via Freddy Copilot for Developers and many more.