Locize
LoginRegister
April 7, 20263 min readGuides

Localize Your App with AI in 5 Minutes

If you're building with an AI coding assistant — Cursor, Claude Code, GitHub Copilot, or similar — you can set up a complete localization workflow in minutes. This guide shows the shortest path from zero to live translations using i18next and Locize.

The key insight: Locize is the backend your AI assistant writes translations to. Your AI generates the translations. Locize versions them, delivers them via CDN, and gives your team a UI to review and refine.

Prerequisites

  • A JavaScript/TypeScript project (React, Next.js, Vue, Node.js, or any framework)
  • An AI coding assistant (Cursor, Claude Code, VS Code with Copilot, etc.)
  • A Locize account (register for free — no credit card required)

Step 1: Connect your AI assistant to Locize (2 minutes)

The Locize MCP server lets your AI assistant manage translations directly.

Claude Code:

claude mcp add --transport http locize https://mcp.locize.app

Then run /mcp and complete the OAuth flow.

Cursor / VS Code / Claude Desktop:

Add https://mcp.locize.app as an MCP server in your client's settings and complete the OAuth flow.

Once connected, your AI assistant can read translations, report new keys, publish versions, and manage branches — all from your development environment.

Step 2: Ask your AI to set up i18next (1 minute)

With the MCP server connected, prompt your AI assistant:

"Set up i18next with Locize for my React app. Use my Locize project [PROJECT_ID]. Enable saveMissing so new keys are sent to Locize automatically."

Your AI assistant will:

  1. Install the packages (i18next, react-i18next, i18next-locize-backend)
  2. Configure i18next with your Locize project ID
  3. Enable saveMissing so new translation keys are reported automatically
  4. Wrap your app with the i18next provider

If you prefer to do this manually, here's the minimal setup:

npm install i18next react-i18next i18next-locize-backend
import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'
import Backend from 'i18next-locize-backend'

i18next
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    saveMissing: true,
    backend: {
      projectId: 'YOUR_PROJECT_ID',
      apiKey: 'YOUR_API_KEY'  // only needed for saveMissing in dev
    }
  })

Step 3: Enable automatic translation in Locize (1 minute)

In your Locize project:

  1. Go to Project Settings > EDITOR, TM/MT/AI, ORDERING
  2. Enable Automatic Translation Workflow
  3. Choose your translation provider (Locize AI works out of the box, or bring your own OpenAI/Gemini/Mistral key)

Now every new key that arrives via saveMissing will be auto-translated into all your target languages.

Step 4: Write code — translations happen automatically (1 minute)

Use the useTranslation hook in your components:

import { useTranslation } from 'react-i18next'

function Welcome() {
  const { t } = useTranslation()
  return (
    <div>
      <h1>{t('welcome.title', 'Welcome to our app')}</h1>
      <p>{t('welcome.subtitle', 'Start building something great')}</p>
    </div>
  )
}

When your app runs in development:

  1. i18next detects the missing keys (welcome.title, welcome.subtitle)
  2. saveMissing sends them to Locize with their default values
  3. Locize auto-translates them into all target languages
  4. Your app fetches the translations from the Locize CDN

No files to manage. No deploy needed for translation updates.

Step 5: Use your AI assistant to manage translations

With the MCP server connected, you can ask your AI assistant to:

  • "What's the translation coverage for my project?" — checks completion across all languages
  • "Find all missing German translations in the common namespace" — identifies gaps
  • "Report these new keys to Locize: [list of keys]" — the AI-agent equivalent of saveMissing
  • "Publish the latest version" — pushes translations to the CDN
  • "Create a translation branch for my feature-auth branch" — isolates translations for a feature

This is the AI-first workflow: your coding assistant manages the translation infrastructure while you focus on building features.

What you get

After these 5 minutes, you have:

  • Automatic key discovery — new keys appear in Locize as you write code
  • AI-powered translation — every key is auto-translated using your configured provider with glossary and styleguide context
  • CDN delivery — translations are live in your app without deploying
  • A review UI — translators can review and refine AI translations in the Locize editor
  • AI assistant integration — manage translations from Cursor, Claude, or VS Code via MCP

Next steps

Why not just use AI directly?

Your AI assistant is great at generating translations. But it can't version them, deliver them via CDN, coordinate reviewer feedback, manage branches, or keep your brand voice consistent across thousands of strings.

Use AI for translation. Use Locize to manage it.

Read more: Why not just use AI to translate? →