build-an-openai-powered-vscode-extension-in-no-time

These days, everyone is talking about ChatGTP, which is a powerful AI tool that can have natural conversations with humans. It is powered by OpenAI. I have started to use ChatGPT in different scenarios. Besides using it to write some scripts, I also use it to revise or translate some text. In some cases, it provides a better result than Google Translate or DeepL. However, I still need to copy and paste the text to the website. I often use VS Code to write or translate technical documents, so I want to integrate AI power into my VS Code. Similar to Translator Helper, I spent around three hours building an OpenAI-powered VS Code extension. The extension is called ReVision. It is an open-source project, and you can find the source code on GitHub.

In this article, I will show you how to build an OpenAI-powered VS Code extension in no time. With the help of AI, the productivity of developers will definitely be improved.

Idea

One thing in my daily work is to write various technical documents or emails. Previously, I used some tools such as Grammarly to check the grammar. In some cases, I may need to rewrite the whole paragraph in another way. For example:

Revise the text in a professional style:
Code-review is important in our daily development. Some developers may spend lots of time on learning new features of the languages, DDD, distributed system or some fancy stuff but the first thing we should keep in mind is we need to write the robust, maintainable code. Here are some tips from my recent code-review and I hope it would be helpful for you.

ChatGPT can help me to revise the text in a professional style:

Code review is an integral aspect of our daily development process. While it is essential for developers to stay abreast of the latest features and trends in languages, DDD, distributed systems, and other advanced concepts, it is imperative to prioritize writing robust and maintainable code. In light of this, I would like to share some tips from my recent code review experience, which I believe will prove beneficial to you.

You may find that the revised text has more professional words and the sentence structure is better. It is a good tool to help me write a better document (and improve my English writing skills).

Note
There are some arguments about whether we should use AI to produce content, and whether the content produced by AI is meaningful. For sure, students should not use AI to cheat in their exams. I won’t discuss this topic in this article because it is out of the scope.

We can also use ChatGPT to translate the text. For example, I can translate the following text from English to Chinese:

ChatGPT is powered by OpenAI, which provides a powerful API to use its AI model. My idea is to follow the approach of Translator Helper to build an OpenAI-powered VS Code extension so that I can easily revise or translate the text in VS Code without leaving the editor. Because I have already built the Translator Helper, I can reuse some code to build the new extension.

Creating an OpenAI account and getting the API key

The first step is to create an OpenAI account and get the API key. You can create an account on OpenAI. After creating the account, you can get the API key on the API Keys page.

Note that the API key only shows once. You need to save it somewhere safe. If you lose the API key, you need to create a new one.

OpenAI provides a set of examples to show you how to use the API: https://platform.openai.com/examples. Here is an example to translate the text from English to three different languages:

So the basic usage of the API is to send a request to the API endpoint with a Prompt:

Translate this into 1. French, 2. Spanish and 3. Japanese:

<The text you want to translate>

Similarly, we can use the API to revise the text. OpenAI provides a playground to test the API: https://platform.openai.com/playground. Let’s try to revise the text:

In the settings panel, you can choose settings such as Model, Temperature, and Top P, etc. The default settings are good enough for most cases.

To learn more about the settings, you can read the OpenAI API documentation.

Creating the extension

Now we have the API key, we can start to build the extension. First, I asked ChatGPT to advise me on what name I can use.

Not bad, isn’t it? I would use the name ReVision for the extension.

So the next step is to create a new VS Code extension project. You can find more information about how to create a VS Code extension project in the VS Code document: Your First Extension. I will skip this step and assume that you have already created a new VS Code extension project.

Installing the OpenAI SDK

OpenAI provides a set of SDKs to help developers to use the API. You can find the SDKs on this page: https://platform.openai.com/docs/libraries. I will use the OpenAI Node.js SDK. Run the following command to install the SDK:

npm install openai

Writing the code

The idea is similar to Translator Helper. We click a paragraph and then press a shortcut key to trigger the extension. The extension will automatically select the whole paragraph and then send a request to the OpenAI API endpoint. The response will be inserted into the editor after the current paragraph.

Using different shortcuts, we can send different requests to revise or translate the text. For example, we can use shift+alt+r to revise the text and use ctrl+shift+t to translate the text.

Extension configurations

We will need two commands: revision.reviseInsert and revision.translateInsert. Here are the settings for commands and keybindings in the package.json file:

"commands": [
  {
    "command": "revision.reviseInsert",
    "title": "Revise & Insert"
  },
  {
    "command": "revision.translateInsert",
    "title": "Translate & Insert"
  }
],
"keybindings": [
  {
    "command": "revision.reviseInsert",
    "key": "shift+alt+r",
    "mac": "shift+alt+r",
    "when": "editorTextFocus"
  },
  {
    "command": "revision.translateInsert",
    "key": "ctrl+shift+t",
    "mac": "cmd+shift+t",
    "when": "editorTextFocus"
  }
],

We also need these configurations in the package.json file:

• revision.openAIApiKey: the API key of OpenAI
• revision.writingStyle: the writing style, which can be professional or casual
• revision.sourceLanguage: the source language
• revision.targetLanguage: the target language to be translated
• revision.maxTokens: the maximum number of tokens to be generated. OpenAI API has a limit of 4097 tokens shared between prompt and completion.

We can provide some default styles in the package.json file:

"revision.writingStyle": {
  "type": "string",
  "default": "professional",
  "enum": [
    "professional",
    "formal",
    "casual",
    "humorous",
    "sarcastic",
    "informative",
    "empathetic",
    "authoritative",
    "poetic",
    "other"
  ],
  "enumDescriptions": [
    "A professional tone that is appropriate for business documents, such as proposals, reports, and presentations.",
    "A formal tone that is appropriate for documents that require a high level of formality, such as legal documents, academic papers, and business correspondence.",
    "A casual tone that is appropriate for documents that are meant to be read by friends, family, or colleagues.",
    "A humorous tone that is fun and playful.",
    "A sarcastic tone that is characterized by its use of irony and sarcasm, often used to express displeasure or frustration.",
    "An informative tone that focuses on presenting factual information in a clear and concise manner.",
    "An empathetic tone that is used to express understanding and compassion towards the reader, often used in customer service or support contexts.",
    "An authoritative tone that is used to convey expertise and authority on a particular subject, often used in instructional or educational contexts.",
    "A poetic tone that is appropriate for poems, song lyrics, and other works of art.",
    "A custom tone that is not one of the above."
  ]
},

By the way, these settings and descriptions were generated by ChatGPT as well.

So users can choose the writing style in the settings panel:

Extension code

We can reuse lots of code from Translator Helper, including the code to get the current paragraph and the code to insert the text into the editor. The main difference is the code to send the request to the OpenAI API endpoint.

Here is the code to revise the text:

async revise(
  text: string,
  language: string,
  writingStyle: string
): Promise<string | undefined> {
  try {
    const maxTokens = getMaxTokensConfiguration();
    const response = await this.openaiService.createCompletion({
      model: "text-davinci-003",
      prompt: `Revise this into better sentences and paragraphs in ${language} using a ${writingStyle} tone:\n\n${text}\n\n`,
      temperature: 0.3,
      max_tokens: maxTokens,
      top_p: 1.0,
      frequency_penalty: 0.0,
      presence_penalty: 0.0,
    });
    let result = response.data.choices[0].text;
    return result;
  } catch (error: any) {
    throw error;
  }
}

The code to translate the text is similar:

async translate(
    text: string,
    sourceLanguage: string,
    targetLanguage: string
  ): Promise<string | undefined> {
    try {
      const response = await this.openaiService.createCompletion({
        model: "text-davinci-003",
        prompt: `Translate this into ${targetLanguage} from ${sourceLanguage}:\n\n${text}\n\n`,
        temperature: 0.3,
        max_tokens: 2048,
        top_p: 1.0,
        frequency_penalty: 0.0,
        presence_penalty: 0.0,
      });
      let result = response.data.choices[0].text;
      return result;
    } catch (error: any) {
      throw error;
    }
  }

The core code here is just to get the selected text and build a prompt. OpenAI API will generate the text based on the prompt. You can fine-tune the parameters to get better results. Prompts are very important in AI applications. You can read more about it here: Best practices for prompt engineering with OpenAI API. I think prompts may be a future programming language for developers - who knows?

The code to insert the text into the editor is the same as Translator Helper.

Now when we edit the text, we can press shift+alt+r to revise the text:

And press ctrl+shift+t to translate the text:

It’s nearly done!

Publishing the extension

I have described how to publish the extension in the previous post, including how to set up the Azure DevOps pipeline. So I won’t repeat it here.

Summary

In this article, I have shown you how easy it is to develop a VS Code extension using the OpenAI API. OpenAI API provides various possibilities for developers. Check the examples of OpenAI and see if you can find any interesting ideas. The code of ReVision is available on GitHub: vs-code-revision. Try this extension in VS Code and feel free to leave comments and suggestions. Thanks for reading!