MDX

AI translation for MDX files with Lingo.dev CLI

What is MDX?

MDX is a format that combines Markdown with JSX, allowing you to use React components directly in your Markdown content. It's commonly used for documentation sites and content-rich web applications.

For example:

---
title: "Restaurant Review: Bella Vista"
description: "Our dining experience at the new Italian restaurant downtown"
author: "not-localized-author"
---

# Dinner at Bella Vista

We finally tried the new Italian restaurant that opened last month on Main Street.

## The Atmosphere

The restaurant has a warm, inviting atmosphere with:

- **Dim lighting** that creates an intimate setting
- *Soft jazz music* playing in the background

What is Lingo.dev CLI?

Lingo.dev CLI is a free, open-source CLI for translating apps and content with AI. It's designed to replace traditional translation management software while integrating with existing pipelines.

To learn more, see Overview.

About this guide

This guide explains how to translate MDX files with Lingo.dev CLI.

You'll learn how to:

  • Create a project from scratch
  • Configure a translation pipeline
  • Generate translations with AI

Prerequisites

To use Lingo.dev CLI, ensure that Node.js v18+ is installed:

❯ node -v
v22.17.0

Step 1. Set up a project

In your project's directory, create an i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

This file defines the behavior of the translation pipeline, including what languages to translate between and where the localizable content exists on the file system.

To learn more about the available properties, see i18n.json.

Step 2. Configure the source locale

The source locale is the original language and region that your content was written in. To configure the source locale, set the locale.source property in the i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

The source locale must be provided as a BCP 47 language tag.

For the complete list of the locale codes that Lingo.dev CLI supports, see Supported locale codes.

Step 3. Configure the target locales

The target locales are the languages and regions you want to translate your content into. To configure the target locales, set the locale.targets property in the i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Step 4. Create the source content

If you haven't already, create one or more MDX files that contain the content to be translated. These files must be located at a path that includes the source locale somewhere in the path (e.g., as a directory name like en/ or as part of the filename like messages.en.mdx).

Step 5. Create a bucket

  1. In the i18n.json file, add a "mdx" object to the buckets object:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "mdx": {}
  }
}

  2. In the "mdx" object, define an array of one or more include patterns:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "mdx": {
      "include": ["./[locale]/example.mdx"]
    }
  }
}

    These patterns define which files to translate.

    The patterns themselves:

    • must contain [locale] as a placeholder for the configured locale
    • can point to file paths (e.g., "[locale]/blog.mdx")
    • can use asterisks as wildcard placeholders (e.g., "[locale]/*.mdx")

    Recursive glob patterns (e.g., **/*.mdx) are not supported.

Step 6. Configure an LLM

Lingo.dev CLI uses large language models (LLMs) to translate content with AI. To use one of these models, you need an API key from a supported provider.

To get up and running as quickly as possible, we recommend using Lingo.dev Engine — our own, hosted platform that offers 10,000 tokens of free, monthly usage:

  1. Sign up for a Lingo.dev account.

  2. Run the following command:

    npx lingo.dev@latest login

    This will open your default browser and ask you to authenticte.

  3. Follow the prompts.

Step 7. Generate the translations

In the directory that contains the i18n.json file, run the following command:

npx lingo.dev@latest run

This command:

  1. Reads the i18n.json file.
  2. Finds the files that need to be translated.
  3. Extracts the translatable content from the files.
  4. Uses the configured LLM to translate the extracted content.
  5. Writes the translated content back to the file system.

The first time translations are generated, an i18n.lock file is created. This file keeps track of what content has been translated, preventing unnecessary retranslations on subsequent runs.

Example

en/example.mdx

---
title: "Restaurant Review: Bella Vista"
description: "Our dining experience at the new Italian restaurant downtown"
author: "not-localized-author"
published: "2024-03-15"
rating: 4.5
locked_key_1: "This value should remain unchanged in all locales"
ignored_key_1: "This field should not appear in target locales"
---

# Dinner at Bella Vista

We finally tried the new Italian restaurant that opened last month on Main Street. Here's our honest review.

## The Atmosphere

The restaurant has a warm, inviting atmosphere with:

- **Dim lighting** that creates an intimate setting
- *Soft jazz music* playing in the background
- Fresh flowers on every table

es/example.mdx

---
title: "Reseña de Restaurante: Bella Vista"
description: "Nuestra experiencia gastronómica en el nuevo restaurante italiano del centro"
author: "not-localized-author"
published: "2024-03-15"
rating: 4.5
locked_key_1: "This value should remain unchanged in all locales"
---

# Cena en Bella Vista

Finalmente probamos el nuevo restaurante italiano que abrió el mes pasado en Main Street. Esta es nuestra reseña honesta.

## El Ambiente

El restaurante tiene un ambiente cálido y acogedor con:

- **Iluminación tenue** que crea un ambiente íntimo
- *Música de jazz suave* sonando de fondo
- Flores frescas en cada mesa

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "mdx": {
      "include": ["./[locale]/example.mdx"],
      "lockedKeys": ["locked_key_1"],
      "lockedPatterns": ["pattern_1"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  0d5b5aa6d2b9937d47fd63868ef9e9f6:
    meta/title: a4bdd0dee24f8318f3300dcae130a353
    meta/description: 609213841f122e494f62262618ee4761
    meta/author: f3f7164b5963b4da6cd31a2ec0251630
    content/0: 8a8520492d23503da5691602e60bd22a
    content/1: 1fc859854cda505b2a94a04c8b09ab43
    content/2: 8add667f2a1d5d791a64b50bde54fa59
    content/3: e6e34c4c92eda512ec209266abe8e074
    content/4: 07f1896ad050b9606d7674f70d847818
    content/5: bd4d40a4f0cc92ac8a880c8d9ce8b43d
    content/6: 3036a07a887121ea080427d84fc80912
    content/7: f555318416c5c5388c1d961ef02f5955
    content/8: 90e02688ab103de60e42c70ece7efc4d
    content/9: 8c5be3cd002a3a194c991821e0182e08
    content/10: 3495801a7461ac5ea8d78369873a5409
    content/11: d444739ce3d48afb7976067c67149a9e
    content/12: 5f02c0a3b6385f80bdd08cf7e2d8c04d
    content/13: 0a15fd446b87d907f58c303aece0882b
    content/14: 778ed0aa1f81768280a23afe559c55f7
    content/15: fa244af2d8e558d6c3644ff8c1a64562
    content/16: 14f593e7cf3b3df84a21e17db318912e
    content/17: 5f42d26a42aa29be063019eea27ad07c
    content/18: 48bb7e89e72d68d6de12f5cdac64fc18
    content/19: 1639b9ef57bf363e04293e27d1c13952
    content/20: bb1c8d22064f7af4879c69d444e6e769
    content/21: 52f9d6beaa85591f77811e1162d756c4