Getting Started

To keep things simple, we will start with an example that does depend on any specific framework just yet (we will cover this later on in Supported Frameworks).

Before you start

To use mooi you would need an OpenAI API key thas has access to GPT4.

Installation

Simply run:

npm i -g mooi-cli

If you don't have npm installed, you can get it from the official website

Define text that needs translation

Let's assume that we are working on an app that shows a Hello World message on its main page. We would want this to be available in English, German, and Spanish.

Let's start by creating a mooi directory:

mkdir mooi

Inside, define a translations.yaml file that will be our source of truth for all product texts:

# mooi/translations.yaml

languages: [de, es]          # German and Spanish, and we already covering English in this file
entries:
  - key: main_page_title     # We will need this key later when we will be referring to our copy from code
    value: Hello World       # The actual text that we want to translate
    description: A message shown on the main page of the app

Take a closer look at the description field - this is the main superpower of mooi compared to other machine translators. AI will take this description into account when

Translate it!

To start the translation, run:

npx mooi-cli translate --openAiKey {YOUR OPENAI API KEY}

Once the command completes, you will see results in mooi/translations/ folder.

Output Format

That is great, however, we are only halfway there. One could parse the output yaml files to use it in their project, but there is a better way. mooi provides a way to output translations in whatever format you desire by leveraging HandlebarJS framework.

Let's imagine that we would like to have our translations to be stored in a bunch of JSON files (one file per language) called translations_en.json, translations_de.json, etc. And we would like these files to look something like this:

{
    "main_page_title": "Hallo Welt"
}

To achieve that, define a mooi/config.yaml file:

formats:
  - outputPath: outputs/translations_{{languageCode}}.json
    format: |
      {
      {{#each translations}}
        "{{key}}": "{{{value}}}"{{#unless @last}},{{/unless}}
      {{/each}}
      }

Now just run mooi-cli again and you will see the output being written into outputs folder (that we have configured above):

npx mooi-cli translate --openAiKey {YOUR OPENAI API KEY}

Do not hesitate to re-run mooi-cli as many times as you need. It keeps track of values that were already translated and won't translate them again, so you are not risking incurring any additional costs.

You can refer to Supported Frameworks section for pre-made recipes on how to integrate mooi with your specific framework.

Supported Frameworks