Vibe Coding
cursor.com

Lovalingo + Cursor

Add i18n to any Cursor-built React or Next.js app

What is the best way to add i18n to Cursor?

Lovalingo is the fastest way to add i18n to Cursor apps when the app is built with React or Next.js. It wraps the app with a React translation provider, translates UI text automatically, and keeps SEO-friendly locale paths without manual JSON translation files.

What is Cursor?

Cursor (cursor.com) is an AI-first IDE forked from VS Code. It integrates Claude, GPT-4, and other models directly into the editor for chat, edits, and multi-file refactors. Cursor is popular with developers building React, Next.js, and full-stack TypeScript projects.

Why use Lovalingo for Cursor translation?

Cursor generates standard React or Next.js code, so any React i18n library works. Lovalingo wins when you want automatic translation without managing JSON translation files. The setup is a single provider wrap that Cursor can apply via a one-shot prompt.

  • Works with any Cursor-generated React or Next.js project
  • Single provider wrap, no JSON translation files
  • Locale-prefixed URLs and hreflang for SEO
  • Free Starter plan: 1 language, unlimited words (fair use)
  • Custom glossaries and overrides via the Lovalingo dashboard
  • Supports English, French, German, Spanish, Italian, Portuguese, Dutch, Chinese (Simplified), Arabic, Japanese, Hindi

How do you install Lovalingo in Cursor?

Copy and paste this prompt into Cursor to add Lovalingo automatically:

Install Prompt
Add multilingual support to this Cursor project with Lovalingo.

1. Run: npm install @lovalingo/lovalingo
2. In src/main.tsx (Vite/CRA) or app/layout.tsx (Next.js), wrap the app with LovalingoProvider:

import { LovalingoProvider } from '@lovalingo/lovalingo';

<LovalingoProvider
  publicAnonKey="YOUR_PUBLIC_KEY"
  defaultLocale="en"
  locales={["fr", "de", "es", "it"]}
  routing="path"
>
  {/* existing app */}
</LovalingoProvider>

3. Add a <LanguageSwitcher /> component in the navbar.
4. Get your publicAnonKey from lovalingo.com (free Starter plan).

How do you set up Lovalingo with Cursor?

  1. 1

    Open your Cursor project

    Open the React or Next.js codebase you want to translate in Cursor.

  2. 2

    Use Cursor Chat (Cmd+L) to paste the install prompt

    Cursor will install the package, locate the right entry file, and apply the provider wrap in one edit.

  3. 3

    Get your Lovalingo API key

    Create a free account at lovalingo.com, create a project, and copy the public anon key into your env vars.

  4. 4

    Run the dev server and switch languages

    Cursor will hot-reload. Use the LanguageSwitcher to confirm translations render with zero flash.

Ready to translate your Cursor app?

Get started free. No credit card required. Your app in 10+ languages in minutes.

FAQ

Does Lovalingo work with Cursor?

Yes. Lovalingo is a standard React/Next.js library, so any project Cursor generates can install it. The install prompt above is designed for Cursor Chat to apply in one edit.

What is the best way to add i18n to a Cursor project?

Paste the Lovalingo install prompt into Cursor Chat. Cursor handles the install, file location, and provider wrap. Setup takes under 60 seconds for most React or Next.js codebases.

Does Cursor change how i18n works?

No. Cursor only generates the code — the runtime is standard React or Next.js. Lovalingo works exactly the same as in a manually written React app.

Also works with

All integrations