Extract Keys with AI

Automatically scan your codebase and generate translation files using AI.

AI-Powered Extraction

The CLI uses advanced AI models to understand your code context and extract translatable strings intelligently.

Quick Extraction#

Scan your entire project:

bash

lingo extract

The AI will:

🔍 Scan source files (.js, .ts, .jsx, .tsx, .vue, etc.)
🤖 Identify translatable strings
🎯 Generate proper translation keys
📝 Create organized translation files

Example#

Before - Hardcoded strings in your React component:

typescript

export function Welcome() {
  return (
    <div>
      <h1>Welcome to Our App</h1>
      <p>Get started in minutes</p>
      <button>Sign Up Now</button>
    </div>
  );
}

Run extraction:

bash

lingo extract src/components/Welcome.tsx

After - Generated translation file (en.json):

json

{
  "welcome": {
    "title": "Welcome to Our App",
    "subtitle": "Get started in minutes",
    "cta": "Sign Up Now"
  }
}

Updated component:

typescript

import { useTranslation } from '@lingo.dev/react';

export function Welcome() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.subtitle')}</p>
      <button>{t('welcome.cta')}</button>
    </div>
  );
}

Advanced Options#

Specify File Patterns#

Extract from specific files or directories:

bash

# Single file
lingo extract src/components/Dashboard.tsx

# Directory
lingo extract src/components/

# Glob pattern
lingo extract "src/**/*.tsx"

Custom Key Naming#

Control how keys are generated:

bash

# Nested structure (default)
lingo extract --strategy nested
# Output: { "auth": { "login": "Log in" } }

# Flat structure
lingo extract --strategy flat
# Output: { "auth_login": "Log in" }

# Prefix all keys
lingo extract --prefix app
# Output: { "app_auth_login": "Log in" }

Context-Aware Extraction#

The AI understands code context for better key names:

Code:

typescript

<button>Submit Form</button>
<button>Submit Payment</button>

Generated:

json

{
  "form": {
    "submit": "Submit Form"
  },
  "payment": {
    "submit": "Submit Payment"
  }
}

The AI recognizes different contexts and creates appropriate namespaces.

Review and Refine#

After extraction, review the suggestions:

bash

# Interactive mode - review each suggestion
lingo extract --interactive

# Dry run - see what would be extracted
lingo extract --dry-run

# Output to specific file
lingo extract --output extracted-keys.json

Interactive mode:

plaintext

Found: "Welcome to Our App"
Suggested key: welcome.title
[A]ccept  [E]dit  [S]kip  [Q]uit

> a

✓ Added: welcome.title → "Welcome to Our App"

Framework Support#

The CLI understands framework-specific patterns:

typescript

// JSX text content
<h1>Welcome</h1>

// Props
<Input placeholder="Enter email" />

// aria-labels
<button aria-label="Close dialog">×</button>

Extracted:

json

{
  "welcome": {
    "title": "Welcome",
    "email_placeholder": "Enter email",
    "close_dialog": "Close dialog"
  }
}

Exclusion Patterns#

Ignore specific strings or files:

json

{
  "extract": {
    "exclude": ["**/node_modules/**", "**/dist/**", "**/*.test.tsx"],
    "ignoreStrings": ["className", "id", "key", "http://", "https://"]
  }
}

Bulk Extraction#

Process multiple projects or microservices:

bash

# Extract from monorepo packages
lingo extract apps/web apps/mobile apps/admin

# Merge into single output
lingo extract --merge apps/*

Review AI Suggestions

Always review AI-generated keys before pushing to production. The AI is highly accurate but may occasionally need manual refinement.

Tips for Best Results#

Use semantic HTML - The AI understands semantic elements better
Add code comments - Comments help the AI understand context
Group related strings - Keep related components in same files
Use consistent naming - Maintain naming patterns across your codebase

Next Steps#

Return to How It Works to understand the full workflow
Learn about Quick Start to begin your implementation

Automatically scan your codebase and generate translation files using AI.

AI-Powered Extraction

The CLI uses advanced AI models to understand your code context and extract translatable strings intelligently.

Quick Extraction#

Scan your entire project:

bash

lingo extract

The AI will:

🔍 Scan source files (.js, .ts, .jsx, .tsx, .vue, etc.)
🤖 Identify translatable strings
🎯 Generate proper translation keys
📝 Create organized translation files

Example#

Before - Hardcoded strings in your React component:

typescript

export function Welcome() {
  return (
    <div>
      <h1>Welcome to Our App</h1>
      <p>Get started in minutes</p>
      <button>Sign Up Now</button>
    </div>
  );
}

Run extraction:

bash

lingo extract src/components/Welcome.tsx

After - Generated translation file (en.json):

json

{
  "welcome": {
    "title": "Welcome to Our App",
    "subtitle": "Get started in minutes",
    "cta": "Sign Up Now"
  }
}

Updated component:

typescript

import { useTranslation } from '@lingo.dev/react';

export function Welcome() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.subtitle')}</p>
      <button>{t('welcome.cta')}</button>
    </div>
  );
}

Advanced Options#

Specify File Patterns#

Extract from specific files or directories:

bash

# Single file
lingo extract src/components/Dashboard.tsx

# Directory
lingo extract src/components/

# Glob pattern
lingo extract "src/**/*.tsx"

Custom Key Naming#

Control how keys are generated:

bash

# Nested structure (default)
lingo extract --strategy nested
# Output: { "auth": { "login": "Log in" } }

# Flat structure
lingo extract --strategy flat
# Output: { "auth_login": "Log in" }

# Prefix all keys
lingo extract --prefix app
# Output: { "app_auth_login": "Log in" }

Context-Aware Extraction#

The AI understands code context for better key names:

Code:

typescript

<button>Submit Form</button>
<button>Submit Payment</button>

Generated:

json

{
  "form": {
    "submit": "Submit Form"
  },
  "payment": {
    "submit": "Submit Payment"
  }
}

The AI recognizes different contexts and creates appropriate namespaces.

Review and Refine#

After extraction, review the suggestions:

bash

# Interactive mode - review each suggestion
lingo extract --interactive

# Dry run - see what would be extracted
lingo extract --dry-run

# Output to specific file
lingo extract --output extracted-keys.json

Interactive mode:

plaintext

Found: "Welcome to Our App"
Suggested key: welcome.title
[A]ccept  [E]dit  [S]kip  [Q]uit

> a

✓ Added: welcome.title → "Welcome to Our App"

Framework Support#

The CLI understands framework-specific patterns:

typescript

// JSX text content
<h1>Welcome</h1>

// Props
<Input placeholder="Enter email" />

// aria-labels
<button aria-label="Close dialog">×</button>

Extracted:

json

{
  "welcome": {
    "title": "Welcome",
    "email_placeholder": "Enter email",
    "close_dialog": "Close dialog"
  }
}

Exclusion Patterns#

Ignore specific strings or files:

json

{
  "extract": {
    "exclude": ["**/node_modules/**", "**/dist/**", "**/*.test.tsx"],
    "ignoreStrings": ["className", "id", "key", "http://", "https://"]
  }
}

Bulk Extraction#

Process multiple projects or microservices:

bash

# Extract from monorepo packages
lingo extract apps/web apps/mobile apps/admin

# Merge into single output
lingo extract --merge apps/*

Review AI Suggestions

Always review AI-generated keys before pushing to production. The AI is highly accurate but may occasionally need manual refinement.

Tips for Best Results#

Use semantic HTML - The AI understands semantic elements better
Add code comments - Comments help the AI understand context
Group related strings - Keep related components in same files
Use consistent naming - Maintain naming patterns across your codebase

Next Steps#

Return to How It Works to understand the full workflow
Learn about Quick Start to begin your implementation