Behind the Scenes: How Mckay’s AI Code Translator works?

Includes other translation based AI app ideas

Today’s post is about an awesome AI builder Mckay Wrigley and his coding projects. I have been following Mckway for a long and his journey and demos are really inspiring.

He creates a lot of useful open-source AI projects, like

• ai-code-translator (3.2K GitHub stars)

• chatbot-ui (14.5K GH stars)

• paul-graham-gpt (2.3K GH stars)

• ai-brainstore (500+ GH stars)

• clarity-ai (500+ GH stars)

I will cover ai-code-translator and explain how the overall flow is and how he is creating prompts.

ai-code-translator

It uses AI to translate code from one language to another. Imagine you have a Python function and you want to convert it to a Javascript function. You can easily do it using this app. This app is helpful for anyone who already knows a language and is willing to learn a new language.

The project is easy to use. It shows two input boxes. In the left input box, you enter the source code and select the source language, and then in the right box, you just select the target language and press “Translate”. This is a BYOK (Bring your own key) project so you will have to bring your own OPENAI_API_KEY to use this.

When you click “Translate”, the code is translated from the source language to the target language. I was very intrigued to find out how this is working. I started to dig in the source code and found that a call is being made to OpenAI APIs. In this call, the prompt is very interesting.

The function that generates the prompt is present in ai-code-translator/utils/index.ts . Here is the function

# from: https://github.com/mckaywrigley/ai-code-translator/blob/main/utils/index.ts

const createPrompt = (
  inputLanguage: string,
  outputLanguage: string,
  inputCode: string,
) => {
  if (inputLanguage === 'Natural Language') {
    return endent`
    You are an expert programmer in all programming languages. Translate the natural language to "${outputLanguage}" code. Do not include \`\`\`.

    Example translating from natural language to JavaScript:

    Natural language:
    Print the numbers 0 to 9.

    JavaScript code:
    for (let i = 0; i < 10; i++) {
      console.log(i);
    }

    Natural language:
    ${inputCode}

    ${outputLanguage} code (no \`\`\`):
    `;
  } else if (outputLanguage === 'Natural Language') {
    return endent`
      You are an expert programmer in all programming languages. Translate the "${inputLanguage}" code to natural language in plain English that the average adult could understand. Respond as bullet points starting with -.
  
      Example translating from JavaScript to natural language:
  
      JavaScript code:
      for (let i = 0; i < 10; i++) {
        console.log(i);
      }
  
      Natural language:
      Print the numbers 0 to 9.
      
      ${inputLanguage} code:
      ${inputCode}

      Natural language:
     `;
  } else {
    return endent`
      You are an expert programmer in all programming languages. Translate the "${inputLanguage}" code to "${outputLanguage}" code. Do not include \`\`\`.
  
      Example translating from JavaScript to Python:
  
      JavaScript code:
      for (let i = 0; i < 10; i++) {
        console.log(i);
      }
  
      Python code:
      for i in range(10):
        print(i)
      
      ${inputLanguage} code:
      ${inputCode}

      ${outputLanguage} code (no \`\`\`):
     `;
  }
};

Let’s understand this function step by step.

The first and second condition checks if the inputLanguage (source language) or outputLanguage (target language) is Natural Language. If it is, then the prompt gives one example in Natural language and the corresponding programming language, and then the user input is shared.

One interesting to note here is that both these prompts are ending in a suffix ( Natural Language: or code: ). This forces the LLM to output whatever is asked and generally helps in avoiding any textual explanation. I have had great success with suffixing my prompts with json: at the end whenever I need a JSON output. It has worked 99% of the time.

Coming back to the function, the last else statement it is simply giving an example of translating code from Javascript to Python and then giving inputLanguage and code and asking for code in outputLanguage .

I hope using this learning, you can create various kinds of translators, like

• curl to Python or js code

• plain English to regex or vice versa

• Translate SQL queries to english and vice versa

• English to Elasticsearch query

• Translate between languages

---

Keepingupwith.ai has a new home and we will now be publishing actively on Substack. For those of you, who subscribed via Beehiiv, we have moved the list here.

Also, I am a bit new to the newsletter thing so if you have any feedback or request, please email me or DM me on Twitter.