Lessons learned about i18n with AI

Internationalization (i18n) has traditionally been one of the most tedious and error-prone processes in web development. However, with the arrival of Artificial Intelligence, we are witnessing a paradigm shift that is completely transforming how we approach translations in our projects.

The shift in approach: from incremental translation to contextual translation

The traditional method

Traditionally, the workflow for internationalization followed an incremental pattern:

1. Parallel development: We built pages while creating translations simultaneously
2. Context fragmentation: Each text was translated in isolation, losing visual and functional context
3. Inconsistencies: Translations were done in parts, generating inconsistencies in tone and style
4. Constant revision: We needed to review and adjust translations as the interface evolved

This approach had a fundamental problem: context loss. By translating texts in isolation, we lost the complete vision of how the page worked as a whole.

The new AI paradigm

With Artificial Intelligence, we can adopt a completely different approach:

1. Complete monolingual development: We build the complete page in one language (preferably the team’s primary language)
2. Preserved context: AI can see the complete page and understand the visual, functional, and user context
3. Contextual translation: AI generates translations that maintain coherence with design and functionality
4. Rapid iteration: We can adjust and improve translations more efficiently

Advantages of the new approach

1. Complete context until the last moment

The greatest advantage is that we maintain visual and functional context until the moment of translation. Instead of working with keys like "button.accept" or "error.validation", AI can see exactly how each text is used in the interface.

2. Better translation quality

AI can generate more natural and contextually appropriate translations because it understands:

• The purpose of each element (button, error, label)
• The visual hierarchy of information
• The user interaction flow
• The general tone and style of the application

3. Automatic consistency

AI can maintain consistency in:

• Technical terminology
• Communication tone
• Writing style
• Interface conventions

Challenges and considerations

Let AI create the hierarchy or do it manually?

This is a crucial point that requires reflection. Traditionally, we extracted patterns to create translation hierarchies:

// Traditional approach
const translations = {
  buttons: {
    accept: "Accept",
    cancel: "Cancel",
    save: "Save",
  },
  errors: {
    validation: "Validation error",
    network: "Connection error",
  },
};

With AI, we have two options:

Option 1: AI generates the structure

Let AI propose the organization of translations based on patterns it detects.

Advantages:

• Less manual work
• Automatic pattern detection
• Adaptation to new contexts

Disadvantages:

• Less control over structure
• Possible inconsistencies in organization
• Difficult to maintain long-term

Option 2: Manual structure with AI guidance

Define patterns and structure, but use AI to generate content.

Advantages:

• Total control over organization
• Consistency in structure
• Easier to maintain

Disadvantages:

• Requires more initial work
• Less flexibility for changes

Recommended patterns to guide AI

1. Error centralization

Errors should be centralized in a single place to facilitate their management and translation:

// Recommended structure
const errorMessages = {
  validation: {
    required: "This field is required",
    email: "Invalid email format",
    minLength: "Minimum {length} characters",
  },
  network: {
    timeout: "Request timeout",
    serverError: "Server error",
  },
};

2. Reuse of common elements

Elements like buttons, links, and navigation texts should be reusable:

const commonElements = {
  buttons: {
    primary: "Continue",
    secondary: "Cancel",
    danger: "Delete",
  },
  navigation: {
    back: "Back",
    next: "Next",
    home: "Home",
  },
};

3. Interpolation patterns

Define clear patterns for variable interpolation:

const patterns = {
  welcome: "Welcome, {name}",
  itemsCount: "{count} items",
  progress: "{current} of {total}",
};

Conclusions

AI is transforming internationalization from a mechanical and error-prone task to a more intelligent and contextual process. The key is finding the balance between automation and manual control.

The fundamental principles are:

• Maintain context until the last moment
• Define clear patterns for reuse
• Use AI as a tool, not as a replacement
• Iterate and continuously improve the process

The future of i18n with AI is not about completely replacing manual work, but about making it more efficient, contextual, and of higher quality.