Lovalingo + Windsurf
Add i18n to Windsurf-built React and Next.js apps
What is the best way to add i18n to Windsurf?
Lovalingo is the fastest way to add i18n to Windsurf 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 Windsurf?
Windsurf (codeium.com/windsurf) is an agentic AI IDE that runs full multi-step workflows. The Cascade agent can scaffold features, refactor across files, and ship pull requests. Windsurf is popular for React, Next.js, Python, and TypeScript projects.
Why use Lovalingo for Windsurf translation?
When Windsurf's Cascade scaffolds a React or Next.js feature, Lovalingo is a single provider drop-in that adds multilingual support to the entire feature. The Cascade agent can apply the install in one flow including the provider wrap, env var, and language switcher component.
- Cascade applies the full install in one workflow (install + wrap + switcher + env)
- Works on any React or Next.js codebase Windsurf opens
- Locale-prefixed URLs and hreflang for SEO
- Free Starter plan: 1 target language, unlimited words (fair use)
- Supports English, French, German, Spanish, Italian, Portuguese, Dutch, Chinese (Simplified), Arabic, Japanese, Hindi
How do you install Lovalingo in Windsurf?
Copy and paste this prompt into Windsurf to add Lovalingo automatically:
Cascade: add multilingual support to this React or Next.js project using Lovalingo.
1. Install: npm install @lovalingo/lovalingo
2. Wrap the app entry (src/main.tsx for Vite or app/layout.tsx for Next.js):
import { LovalingoProvider } from '@lovalingo/lovalingo';
<LovalingoProvider
publicAnonKey={process.env.NEXT_PUBLIC_LOVALINGO_KEY}
defaultLocale="en"
locales={["fr", "de", "es", "it"]}
routing="path"
>
{/* existing app */}
</LovalingoProvider>
3. Add a <LanguageSwitcher /> in the navbar.
4. Add NEXT_PUBLIC_LOVALINGO_KEY to .env.local with the free key from lovalingo.com.
5. Run npm run dev and verify locale switching.How do you set up Lovalingo with Windsurf?
- 1
Open your Windsurf project
Open the React or Next.js codebase in Windsurf.
- 2
Run Cascade with the install prompt
Paste the install prompt as a Cascade workflow. Cascade handles the multi-file edits in one shot.
- 3
Provision the Lovalingo project
Create a free Lovalingo project at lovalingo.com and copy the public anon key into .env.local.
- 4
Verify with the dev server
Start the dev server. Use the language switcher to confirm zero-flash language changes.
Ready to translate your Windsurf app?
Get started free. No credit card required. Your app in 10+ languages in minutes.
FAQ
Does Lovalingo work with Windsurf Cascade?
Yes. The install prompt above is designed to run as a Cascade workflow that installs the package, wraps the app, adds the switcher, and updates env vars in one flow.
What is the best way to add i18n to a Windsurf React project?
Paste the Lovalingo install prompt into Cascade. The agent applies the multi-file changes including the provider wrap and component placement. Setup completes in under 60 seconds.
Does Lovalingo need any Windsurf-specific configuration?
No. Lovalingo runs in standard React or Next.js. Windsurf is only the IDE that helps you apply the install. The runtime is identical to a manually written app.