Lovalingo + Claude Code
Add i18n to any React app with Claude Code and Lovalingo
What is Claude Code?
Claude Code is Anthropic's terminal-based AI coding agent. It can autonomously navigate codebases, run commands, edit files, and implement features end-to-end. It's popular for refactoring, feature development, and infrastructure tasks in React and Next.js projects.
Why Lovalingo for Claude Code?
Claude Code can install Lovalingo, wrap your app layout with LovalingoProvider, configure locale routing, and add a LanguageSwitcher component — all in one prompt. Since Lovalingo requires minimal configuration, it's an ideal Claude Code task: high impact, low complexity.
- Full autonomous setup via Claude Code
- Next.js App Router + middleware support
- Locale routing + LanguageSwitcher component
- Works with existing codebases
- Production-ready in one session
Install Prompt
Copy and paste this prompt into Claude Code to add Lovalingo automatically:
Install Lovalingo and add multilingual support to this React/Next.js app.
Steps:
1. Run: npm install @lovalingo/lovalingo
2. In the root layout (app/layout.tsx or src/App.tsx), import and wrap with LovalingoProvider:
import { LovalingoProvider } from '@lovalingo/lovalingo';
// For Next.js App Router:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<LovalingoProvider
publicAnonKey={process.env.NEXT_PUBLIC_LOVALINGO_KEY!}
defaultLocale="en"
locales={["fr", "de", "es", "it", "pt", "zh"]}
routing="path"
>
{children}
</LovalingoProvider>
</body>
</html>
);
}
3. Add a LanguageSwitcher in the Header component.
4. Update middleware.ts to handle locale prefixes if using Next.js.
5. Add NEXT_PUBLIC_LOVALINGO_KEY to .env.local.How to set up Lovalingo with Claude Code
- 1
Open Claude Code in your project
Run `claude` in your React or Next.js project directory.
- 2
Paste the install prompt
Give Claude Code the install prompt above. It will handle the full implementation.
- 3
Add your API key
Create a free Lovalingo account, get your public anon key, and add it to your .env.local file.
- 4
Verify the implementation
Run your dev server and test the language switcher. Claude Code can fix any issues.
Ready to translate your Claude Code app?
Get started free. No credit card required. Your app in 10+ languages in minutes.
FAQ
Can Claude Code install Lovalingo automatically?
Yes. Claude Code can read your codebase, install the Lovalingo package, configure the provider, set up locale routing, and add a language switcher — all in a single prompt. It's one of the fastest ways to add multilingual support to a React app.
Does Lovalingo work with Next.js middleware set up by Claude Code?
Yes. Lovalingo's path-based routing uses a middleware.ts file to handle locale prefixes. Claude Code can generate or update this file as part of the Lovalingo setup.