lingo-adminify

v1.0.4

Published

12 days ago

AI-Powered Multilingual Admin Panel Generator using Lingo.dev - Auto-convert React/Next.js admin panels to multilingual apps

0High
0Medium
0Low

webmine

Lingo Adminify

AI-Powered Multilingual Admin Panel Generator using Lingo.dev

Automatically convert your existing React/Next.js admin panel into a fully multilingual application using the Lingo.dev AI Compiler + CLI.

✨ Features

🔍 Auto-detect UI strings → Scans your React components and extracts translatable text while intelligently ignoring CSS, IDs, and technical keys.
🌍 AI Translation → Pipes detected strings through the Lingo.dev Engine for high-quality translations.
📦 Zero-Config Locale Files → Generates localized JSON files in your public/ directory, ready to be served.
🔄 Auto-Transform Source → The apply command replaces hardcoded strings with t() calls and injects hooks automatically.
💾 Cookie Persistence → Remembers user language preferences using browser cookies (no database required).
✅ CI/CD Built-in → Automatically fails builds if new UI strings haven't been translated.

🚀 Quick Start

1. Installation

npm install -g lingo-adminify
# or
npx lingo-adminify init

2. Initialize in your project

Run this in your project root:

npx lingo-adminify init

This will:

Detect your framework (Next.js or Vite).
Create a lingo-adminify.config.ts.
Set up the src/i18n boilerplates.
Update your package.json with necessary dependencies.

3. Scan for strings

npx lingo-adminify scan

Scans your project and previews all detected UI strings in .lingo/scan.json. It automatically filters out Tailwind classes, camelCase IDs, and numbers.

4. Compile & Translate

Ensure your LINGO_API_KEY is in your .env file, then run:

npx lingo-adminify compile

This sends your strings to Lingo.dev and generates translation files (e.g., fr.json, de.json) in public/locales/.

5. Apply to Source Code

npx lingo-adminify apply

Magic! This command updates your .jsx/.tsx files:

Replaces "Welcome" with {t("welcome")}.
Injects const { t } = useI18n(); into your components.
Adds the required imports at the top of your files.

📖 Commands

`lingo-adminify init`

Initializes configuration and i18n boilerplates.

--force: Overwrite existing config and templates.

`lingo-adminify scan`

Extracts translatable text into .lingo/scan.json for review.

`lingo-adminify compile`

Performs AI translation via Lingo.dev and writes JSON files to public/locales/.

`lingo-adminify apply`

Updates your source code to use the i18n hooks and keys.

`lingo-adminify ci`

Validates that all strings in your codebase have corresponding translations. Use this in your deployment pipeline to prevent shipping missing text.

⚙️ Configuration

Edit lingo-adminify.config.ts:

import type { LingoAdminifyConfig } from 'lingo-adminify';

const config: LingoAdminifyConfig = {
  framework: 'next', // "next" or "vite"
  sourceLocale: 'en',
  defaultLocale: 'en',
  locales: ['en', 'fr', 'de', 'es'],
  include: [
    'src/**/*.{js,jsx,ts,tsx}',
    'app/**/*.{js,jsx,ts,tsx}',
    'pages/**/*.{js,jsx,ts,tsx}',
  ],
  exclude: ['node_modules', 'dist', '.next', 'src/i18n', 'public/locales'],
  outputDir: 'public/locales', // Important: must be in public for the browser to load it
  versioning: true,

  // Uses LINGO_API_KEY from your .env by default
  lingoApiKey: process.env.LINGO_API_KEY,
};

export default config;

🎨 Usage in Your App

1. Setup the Provider

Wrap your main layout/app component.

Next.js (app/layout.tsx):

import LingoProvider from '@/i18n/provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <LingoProvider>{children}</LingoProvider>
      </body>
    </html>
  );
}

2. Add the Language Switcher

The built-in switcher handles everything, including cookie persistence.

import { LanguageSwitcher } from '@/i18n/language-switcher';

export function Header() {
  return (
    <header>
      <LanguageSwitcher />
    </header>
  );
}

3. Manual Translation (If needed)

If you don't use apply, you can use the hook manually:

import { useI18n } from '@/i18n/i18n';

export function CustomComponent() {
  const { t, setLocale, locale } = useI18n();
  return <p>{t('hello_world')}</p>;
}

📁 Project Structure

After setup, your project will include:

your-project/
├── lingo-adminify.config.ts
├── public/
│   └── locales/             <-- Generated JSON translations
│       ├── en.json
│       ├── fr.json
│       └── de.json
├── src/
│   └── i18n/                <-- Generated i18n logic (safe to customize)
│       ├── i18n.tsx
│       ├── provider.tsx
│       └── language-switcher.tsx
└── .lingo/
    └── scan.json            <-- Extraction preview

🛠️ Stack

Frameworks: Next.js (App & Pages Router), Vite (React).
Core: Babel AST Transformation.
AI Engine: Lingo.dev.
Persistence: Browser Cookies.

📝 License

MIT - Feel free to use in commercial and personal projects.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme