DEV Community: Sachintha Kodagoda

Agent-Native Localization for 2026 and Beyond

Sachintha Kodagoda — Mon, 15 Jun 2026 09:24:49 +0000

Software teams are shipping globally earlier than ever. A product can launch in one market today and need Spanish, French, Japanese, German, Arabic, or Hindi support tomorrow. The old way of handling that work was built for a slower software cycle: export strings, upload files, wait for translators, download translations, fix broken keys, repeat.

i18.dev is built for a different world. It is a localization platform designed for teams that already work with AI coding agents, modern frameworks, CLI workflows, and continuous delivery.

Instead of treating localization as a separate project management process, i18.dev brings localization directly into the developer workflow.

The Problem With Legacy Translation Systems

Traditional translation management systems were useful when software releases happened in long cycles. They usually revolve around dashboards, file uploads, manual string extraction, per-seat pricing, per-word pricing, and a lot of operational coordination.

That model creates friction for modern teams.

Developers still need to find hardcoded strings across the codebase. Someone has to create translation keys, wire the i18n library, keep locale files in sync, copy strings into a translation platform, check whether translations were approved, and then bring the finished work back into the repository.

Legacy systems often assume localization starts after the product is already built. For modern product teams, that is too late.

Common pain points include:

Manual string extraction from frontend code.
Long setup guides for each framework and i18n library.
Pricing based on words, seats, projects, or hidden enterprise tiers.
Translation workflows that live outside the developer environment.
Slow handoffs between developers, product teams, and translators.
Review processes that are hard to connect back to the codebase.

The result is predictable: localization becomes a release blocker instead of a normal part of building software.

What Makes i18.dev Different

i18.dev is agent-native. That means it is designed to work with the tools developers already use in 2026: Cursor, Claude, Codex, terminal workflows, pull requests, and automated code changes.

The key idea is simple: your AI coding agent should be able to understand your localization state and take the next correct action.

i18.dev provides the platform, project context, translation memory, glossary, dashboard, and CLI commands. Your coding agent uses that information to update the codebase.

This turns localization from a manual workflow into a guided development workflow.

How i18.dev Works

The i18.dev workflow starts inside your project.

First, you initialize your preferred i18n setup. For a Next.js app, that might mean setting up a library such as next-intl. The goal is not to force every team into one framework or one translation format. The goal is to help your existing stack become multilingual faster.

Then i18.dev helps your agent scan the codebase, detect hardcoded user-facing strings, extract them into translation keys, and replace inline copy with the right i18n function calls.

After extraction, translations are generated and managed through i18.dev using LLM-token based translation instead of old per-word fee models. Teams can review, confirm, and refine translations in the dashboard, then pull approved translations back into the repository.

A typical workflow looks like this:

# Set up the i18n library
npx i18dev init --framework next-intl

# Extract strings, update code, and translate
npx i18dev extract --write --translate

# Pull reviewed translations back into the repo
npx i18dev pull --confirmed

Behind those commands is a bigger workflow:

i18.dev understands your project structure.
The CLI gives your agent deterministic commands to run.
The dashboard tracks strings, languages, and review state.
Prompt suggestions tell your agent what to do next.
Confirmed translations sync back into version-controlled locale files.

This keeps localization close to the code, close to review, and close to shipping.

Why CLI-First Matters

Many localization tools try to solve developer workflow through plugins, browser dashboards, or complex integrations. i18.dev takes a CLI-first approach because the terminal is the shared language of modern development tools.

AI coding agents understand commands, file paths, exit codes, diffs, and build output. A CLI workflow is fast, scriptable, reviewable, and easy to run in local development, CI, or an automated agent session.

That makes i18.dev different from tools that depend heavily on manual clicking or editor-specific extensions.

CLI-first means:

Works across Cursor, Claude, Codex, Replit, terminals, and CI.
Produces code changes that can be reviewed in pull requests.
Fits naturally into scripts and release workflows.
Avoids fragile browser automation and plugin lock-in.

For developer teams, this is a major advantage. Localization becomes something your development workflow can operate on directly.

Intelligent Prompt Suggestions

One of the biggest differences in i18.dev is that it does not just store translations. It helps generate the next useful prompt for your coding agent.

For example, if your team adds Japanese as a target language, confirms checkout translations, or changes the i18n library configuration, i18.dev can suggest a focused prompt that tells the agent exactly what to update.

Instead of reading documentation, searching through settings, or guessing the next step, the developer can copy a prompt and let the agent continue the work.

This is where i18.dev moves beyond a traditional translation dashboard. It becomes an operational layer between your localization state and your codebase.

Better Translation Economics

Legacy localization platforms often charge by seat, word, hosted key, machine translation character, or opaque enterprise package. Those models made sense when human translation volume was the main unit of work.

In 2026, more software teams use LLMs to create, refine, and adapt translations. That changes the cost structure.

i18.dev is designed around stored strings and LLM token bandwidth. This makes the relationship between usage and cost clearer for teams that translate product UI, onboarding flows, checkout pages, error messages, and documentation snippets across many languages.

The practical benefit is simple: teams avoid the feeling that every additional language or translation pass creates another unpredictable per-word bill.

Content-Aware Localization

Good localization is not just replacing English words with another language. A checkout button, an error message, a billing warning, and an onboarding headline all need different tone and context.

i18.dev is built around content-aware localization. The goal is to preserve meaning, product intent, and user experience across languages.

That matters more as products become more global. Users do not judge a product by whether the translation exists. They judge whether it feels natural, trustworthy, and clear.

Why i18.dev Is the Best Choice Moving Forward

i18.dev is a strong fit for teams that want localization to keep up with modern software development.

It is best for teams that:

Use AI coding agents as part of daily development.
Want to convert an existing app into a multilingual product faster.
Prefer CLI workflows over manual dashboard operations.
Need translation review without disconnecting from the repository.
Want predictable localization economics as language coverage grows.
Care about context, tone, and product-quality translations.

The biggest shift is that i18.dev treats localization as an engineering workflow, not just a translation storage problem.

That makes it especially relevant for 2026 and beyond. As AI agents become more capable, the best platforms will not only provide APIs and dashboards. They will give agents the right context, the right commands, and the right next steps.

i18.dev is built for that future.

Conclusion

Legacy translation systems helped teams manage multilingual content, but they were not designed for agent-driven software development.

i18.dev is different. It connects the dashboard, CLI, translations, review state, project context, and coding agent into one workflow. Developers can extract strings, convert code, translate content, review changes, and sync confirmed translations without turning localization into a separate release project.

For teams building global products in 2026, that difference matters.

i18.dev helps teams ship multilingual apps faster, with less manual work, clearer costs, and a workflow that matches how modern software is actually built.

Try i18.dev for free!

How to Translate Your Next.js App with React Intl + i18.dev (In Under 1 Minute)

Sachintha Kodagoda — Mon, 15 Jun 2026 08:20:43 +0000

You already built your app in Next.js with React. Now make it multilingual.

Here's the exact workflow to go from single-language to fully translated using i18.dev's intelligent prompt system — no documentation rabbit holes, no per-word fees, no legacy TMS overhead.

Step 1: Set Up Your i18.dev Project (30 seconds)

Go to i18.dev and sign in (or create a free account).
Aceess to Dashboard.

Free tier includes: 100 stored strings, 25K in / 10K out LLM tokens, 20 team members, unlimited languages.

Step 2: Get Your Environment Variables

From your i18.dev dashboard page:

Click "Quick Setup" to open the getting-started guide.
Click "Create Project + PAT" if you haven't already. This will create new project and Personal Access Token.
Copy your environment variables to your .env, .env.local:

I18DEV_API_KEY=your_api_key_here
I18DEV_PAT_TOKEN=your_pat_token_here

Add them to your Next.js project:

The i18dev CLI auto-loads .env, .env.local, .env.development, and .env.production. No extra configuration needed.

Step 3: Copy the Prompts from i18.dev (30 seconds)

On the i18.dev quickstart page, select react-intl as your i18n library. Two prompts appear:

Prompt 1: "01-Setup Prompt"

Click Copy. Paste it into Cursor, Claude, Codex, or any AI editor connected to your repo.

This prompt tells your AI agent to:

Install and configure react-intl + i18dev-cli
Scan your repo to detect your framework, package manager, and source structure
Find your header/layout and add a language switch component
Configure i18dev.config.cjs so i18dev pull writes files to src/lang/{locale}.json
Create an i18dev-readme.md file in your project for future reference

Your agent runs commands like:

# Install i18dev CLI
npm install --save-dev i18dev-cli

# Initialize configuration
npx i18dev init --framework react-intl

# Verify setup
npx i18dev status

Prompt 2: "02-Localize a Page or Component"

Click Copy. Paste it into your AI editor and specify your target:

Target: app/page.tsx

This prompt tells your agent to:

Find all user-facing strings in the selected file
Replace them with react-intl translation calls (FormattedMessage, useIntl)
Push new locale strings to the i18.dev dashboard automatically

Your agent runs:

# Extract strings and push to i18.dev
npx i18dev extract --write
npx i18dev push

Here is your section extended with the additional information you requested:

Prompt 2: "02-Localize a Page or Component"

Click Copy. Paste it into your AI editor and specify your target:

Target: app/page.tsx

This prompt tells your agent to:

Find all user-facing strings in the selected file
Replace them with react-intl translation calls (FormattedMessage, useIntl)
Push new locale strings to the i18.dev dashboard automatically

Your agent runs:

# Extract strings and push to i18.dev
npx i18dev extract --write
npx i18dev push

What Happens After You Push

Once the push completes:

i18.dev automatically creates a new namespace for your page or component (e.g., page.home, checkout.form)
Your translations appear in the project language view — each string is listed with:
- Source language (original English)
- Target translations (auto-generated by AI)
- Status (pending review / approved)
Refresh the i18.dev dashboard to see the latest strings and translations populate in real time
Review and approve translations directly in the dashboard, or invite team members to refine them

💡 Pro Tip: Each time you run npx i18dev push, i18.dev detects new strings, updated strings, and removed strings — updating your dashboard automatically. No manual CSV uploads. No copy-pasting JSON files.

Step 4: Add a New Language

Once your strings are pushed to i18.dev:

Open your i18.dev dashboard.
Go to your project.
Click "Add Language" from the left sidebar.
Select the language you want (e.g., Spanish, French, German, Japanese).

i18.dev's AI automatically translates all your strings instantly.

Review and approve the translations (or invite a translator to refine).

The Smart Part: Auto-Generated Prompts

As soon as you add a language, a notification appears in the top-right corner:

"New language added — Copy prompt"

Click "Copy prompt" — i18.dev has already written the exact prompt you need. Paste it into your AI editor. Done.

No manual prompt writing. No guessing. i18.dev knows you just added Japanese, so it generates the precise prompt to:

Pull ja.json via i18dev pull
Wire it into your app's IntlProvider
Update the language switcher list

# Pull the new translations
npx i18dev pull

# Verify
npx i18dev status

Step 5: Prompts on Demand

Instead of requiring hours of documentation reading, i18.dev is designed with an AI-first workflow — delivering a significantly better user experience. Whenever you need a prompt, simply click the mini sidebar Prompts button in the i18.dev project view. It provides ready-made prompts for your for your daily tasks.

Setup prompts — for new developers joining the project
Localization prompts — to translate new pages or components
Sync prompts — to pull confirmed translations into your repo
One shot prompt — one-prompt to localize project at once ( Recommend only to run this on paid plan )

and more ...

Examples of what the sidebar generates:

"You confirmed 12 checkout strings in Japanese. Pull them into your repo."

Copy. Paste. Run.

Why i18.dev + React Intl for Next.js?

Legacy TMS	i18.dev
Read docs for 2 hours	Copy a prompt, paste, done
Per-word translation fees	LLM tokens included in your plan
Seat-based pricing	20 team members free
Manual string extraction	`i18dev extract` scans your codebase
Browser-based file uploads	CLI: `i18dev push` / `i18dev pull`
Vendor lock-in	Works with react-intl, next-intl, i18next, vue-i18n, and more

Key i18.dev CLI Commands

# Setup and configuration
npx i18dev init --framework react-intl    # Create i18dev.config.cjs
npx i18dev setup                          # Scan repo, suggest config

# Translation workflow
npx i18dev extract --write                # Extract strings from code
npx i18dev push                           # Push strings to i18.dev dashboard
npx i18dev pull                           # Pull translations into your repo
npx i18dev pull --confirmed               # Only pull reviewed translations

Content-Aware Localization

i18.dev doesn't just translate words — it adapts to context:

Checkout CTAs → natural call-to-action phrasing per locale
Error messages → culturally appropriate tone
Onboarding flows → region-aware user experience

Reference: React Intl in Next.js

After i18.dev sets up your project, here's how you use react-intl in your components:

Server Components

// app/[locale]/page.tsx
import { getMessages } from '@/i18n/server';
import { FormattedMessage } from 'react-intl';

export default async function HomePage() {
  const messages = await getMessages('en');

  return (
    <IntlProvider messages={messages} locale="en">
      <h1>
        <FormattedMessage id="hero.title" defaultMessage="Welcome" />
      </h1>
      <p>
        <FormattedMessage
          id="hero.subtitle"
          defaultMessage="Build faster with our platform"
        />
      </p>
    </IntlProvider>
  );
}

Client Components

'use client';

import { useIntl, FormattedMessage } from 'react-intl';

export default function HeroSection() {
  const intl = useIntl();

  return (
    <section>
      <h1>
        <FormattedMessage id="hero.title" defaultMessage="Welcome" />
      </h1>
      <button>
        {intl.formatMessage({ id: 'cta.primary', defaultMessage: 'Get Started' })}
      </button>
    </section>
  );
}

Pluralization (ICU MessageFormat)

<FormattedMessage
  id="cart.itemCount"
  defaultMessage="{count, plural, =0 {No items} one {# item} other {# items}}"
  values={{ count: items.length }}
/>

What i18.dev Creates in Your Repo

After running the setup prompt, your project includes:

my-nextjs-app/
├── src/
│   ├── lang/                     # Translation files (from i18dev pull)
│   │   ├── en.json
│   │   ├── es.json
│   │   └── ja.json
│   ├── components/
│   │   └── LanguageSwitcher.tsx  # Auto-generated language switcher
│   └── i18n/
│       └── provider.tsx          # IntlProvider configuration
├── i18dev.config.cjs             # i18dev CLI configuration
├── i18dev-readme.md              # Project reference for your team
└── .env.local                    # I18DEV_API_KEY + I18DEV_PAT_TOKEN

The i18dev-readme.md file includes:

Which i18n library was used and why
Where locale files live
Required environment variables
CLI commands (setup, init, pull, status, push, extract)
How the language switcher works
Code examples for translating text
How to add new languages (with copy-ready prompt)
How to add new namespaces (with copy-ready prompt)

Summary

Step	Action	Time
1	Create i18.dev project + PAT	15 sec
2	Add env vars to your project	15 sec
3	Copy Prompt 1 → paste into AI editor	15 sec
4	Copy Prompt 2 → localize your page	15 sec
Total		~1 minute

After setup, adding a new language is two clicks + one paste. i18.dev writes the prompt for you.

Get Started Free

No credit card required
100 stored strings on the free tier
25K in / 10K out LLM tokens/month
20 team members
Unlimited languages

Stop reading docs. Start shipping multilingual.

How to Translate Your Existing Lovable app with i18.dev (In Under 1 Minute)

Sachintha Kodagoda — Wed, 27 May 2026 16:24:10 +0000

You Already Built Your App in Lovable. Now Make It Multilingual.

Here’s the exact workflow to go from single-language to fully translated using i18.dev’s built-in Lovable integration.

Step 1: Set Up Your i18.dev Project (30 seconds)

Go to i18.dev and sign in (or create an account).
Open the Projects page.

That’s it — you’re ready.

Step 2: Add Your i18.dev Environment Variables in Lovable

In the i18.dev project page, click the "Quick Setup" button to open the 1-minute getting-started guide.

then click the "Create Project + PAT" button to create a project and generate your Personal Access Token.

Then, ask Lovable to set up the keys for you:

"Set up keys for i18.dev — #keys from above ..."

Follow the chat instructions to complete the configuration.

Step 3: Choose “Lovable + React” as Your Library

i18.dev gives you two ready-made prompts. Click Copy on each and paste them directly into Lovable’s chat:

Prompt 1: “01-Setup prompt”

Paste this into Lovable. It will:

Set up Lovable + React + FormatJS + i18.dev CLI
Find your header and add a language switch component
Create an i18.dev readme file in your project for reference

Prompt 2: “02-Ask to translate your home page”

Paste this into Lovable. It will:

Find all user-facing strings in the selected page
Replace strings with Lovable + React translation calls
Push new locale strings to the i18.dev dashboard automatically

Step 4: Add a New Language

Once your strings are pushed to i18.dev:

Open your i18.dev dashboard.
Go to your project — "Quick Start Project".
Click "Add Language" from the left sidebar.
Select the language you want (e.g., Spanish, French, German, Japanese).
i18.dev’s AI automatically translates all your strings instantly.
Review & approve the translations (or invite a translator to refine).

Now here’s the smart part: as soon as you add the language, a notification pops up in the top-right corner:

Click "Copy prompt" — i18.dev has already written the exact prompt you need. Paste it into Lovable. Done.

No manual prompt writing. No guessing. i18.dev knows you just added Arabic, so it generates the precise prompt to pull ar.json, wire it into your app, and update the language switch list.

Step 5: The Mini Sidebar — Prompts on Demand

Anytime you need a prompt, click the mini sidebar Prompts button in the i18.dev project view. It shows:

Now you have a translation-ready web app in minutes. Invite your translator or localization expert to fine-tune wording using i18.dev project settings.

Happy Vibe Coding!