# How to Vibe Code Your Own Tolgee (and Stop Paying for It) > Open-source developer-first localization and internationalization platform - Site: https://tolgee.io - Category: Developer Tools - Verdict: **Serious undertaking** (38/100 vibecodeable) - Estimated effort: 4-6 weeks of part-time work ## Verdict Build a simplified self-hosted localization hub with AI translation, but keep paying if you need production-grade in-context DOM wrappers and browser extensions. Vicoding a personal clone of Tolgee is a serious undertaking due to the sheer architectural spread. While setting up a Next.js dashboard with a PostgreSQL database and an LLM translation endpoint takes a weekend, building the actual in-context runtime SDK that intercepts DOM clicks inside client applications without breaking React/Vue hydration is intensely painful. Furthermore, crafting a CLI tool and multi-format AST parser (ICU, JSON, .po) that syncs cleanly introduces heavy state and edge cases. You can successfully vibe-code the core translation memory dashboard and AI prompt generation loop, but expect significant debugging friction around client-side SDK wrapping. ### What you can't replicate - Production-tested multi-framework runtime SDKs for React, Angular, Vue, and Svelte - Official browser extensions and Figma plugins for seamless enterprise workflows - ISO 27001 compliance and established enterprise customer trust ## What it does Tolgee solves copy and translation management across web and mobile apps with in-context editing, context-aware AI translation, a CLI, browser extensions, and MCP server support for AI coding assistants. ### Core features - Central management dashboard for localization projects and translation keys - In-context DOM interception SDK for clicking UI elements to edit strings live - Context-aware AI translation pipeline utilizing component hierarchy and screenshots - Multi-format AST parsing and CLI tool for pulling/pushing/syncing keys - Translation memory, glossaries, and custom state workflows - MCP server support for AI coding tools like Claude Code and Cursor ## The business ### Pricing - Free: €0/mo — For getting started with basic localization essentials. - Team: €49/mo — For growing teams needing higher limits. - Business: €179/mo — For mid-size teams with AI translation and workflows. - Advanced: €499/mo — For scaling engineering organizations. - Enterprise: Custom — Tailored enterprise deployment and support. ### Funding ~$796K raised. - Grant / Public Funding (July 2023) - Seed Round (August 2024 / February 2026) Investors: Reflex Capital, Flying Founders, JIC, Technologické inkubace Founded 2021. Team size: 8-10. ## The hard parts - Building a reliable runtime SDK that wraps DOM nodes without breaking framework reactivity (React, Vue, etc.) or corrupting application rendering - Accurately extracting surrounding AST context, key metadata, and screenshots to construct precise LLM translation prompts - Writing a robust AST parser/diffing engine across heterogeneous formats (JSON, ICU message format, YAML, Android XML, .po) - Managing concurrent text revisions, translation history, and branch merging without destroying translator custom edits ## How to vibe code Tolgee ### Prerequisites - Node.js (free): Required for running the Next.js full-stack framework and CLI tooling. - GitHub (free): Source control and CI/CD deployments. - OpenAI API Key (pay-as-you-go): Powers context-aware AI translation and playground features. ### Recommended AI tools - Claude Code: Best-in-class multi-file agentic coding tool for scaffolding full-stack features and parsers from the terminal. - Cursor: Ideal for iterative UI component design and reviewing code diffs across the dashboard. ### Stack - Frontend: Next.js - Backend: Next.js Server Actions / API Routes - Database: Neon - Auth: better-auth - Payments: None (Personal clone) - Other: Vercel AI SDK, Resend ### Hosting - Vercel (Hosting the Next.js dashboard and serverless API endpoints): $0/mo (Hobby Tier) - Neon (Serverless PostgreSQL database for storing projects, keys, and translations): $0/mo (Free Tier) ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS and configure the PostgreSQL schema using Drizzle ORM or Prisma for users, projects, keys, translations, and translation memories. ``` Scrape or initialize a Next.js 16 project with TypeScript and Tailwind CSS v4. Set up database connectivity to Neon using Prisma or Drizzle. Define the complete database schema with tables for users, projects, languages, translation_keys (project_id, name, namespace), translations (key_id, language_id, text, state), and translation_memory. Ensure proper foreign key constraints, indexes on key names and project IDs, and set up a basic layout shell with a sidebar navigation dashboard. ``` 2. **Authentication & Project Management Dashboard** — Implement authentication using better-auth and build the core CRUD dashboard for creating projects, managing languages, and listing translation keys. ``` Implement authentication using better-auth supporting email/password and GitHub login. Create dashboard pages for managing localization projects, adding target languages (e.g., Spanish, French, German), and viewing a data table of translation keys. Build API endpoints for creating projects, adding keys, and updating translations manually with inline editing support. ``` 3. **Context-Aware AI Translation Integration** — Integrate the Vercel AI SDK and OpenAI API to generate translations based on key names, descriptions, and surrounding project context. ``` Integrate the Vercel AI SDK with OpenAI API to build an auto-translation feature. Create a backend server action that accepts a translation key name, source text, target language, and project context notes. Construct a detailed prompt instructing the LLM to return culturally accurate translations matching software UI constraints. Build a UI button on the translation table that triggers this AI translation and populates the field. ``` 4. **Import/Export and CLI File Syncing** — Build file import and export endpoints supporting standard JSON and ICU message format files, alongside CLI-friendly REST endpoints. ``` Build import and export mechanisms for localization files. Implement API routes that accept JSON and ICU message format uploads, parse the keys and values, and upsert them into the database. Conversely, create an export endpoint that packages project translations into structured JSON files per language. Add basic API token generation so external scripts can authenticate requests. ``` 5. **Client-Side SDK & In-Context Wrapper Prototype** — Develop a lightweight JavaScript runtime SDK prototype that wraps text elements in target apps to enable inspection and direct editing triggers. ``` Develop a lightweight vanilla JavaScript client SDK package that can be imported into client applications. The SDK should fetch translations from your backend API, render strings, and wrap interactive text elements with data attributes containing key IDs. When alt-clicked or hovered in development mode, it should open a floating overlay modal connected to your dashboard API allowing immediate string updates. ``` 6. **Dashboard Polish, Activity Logs & Verification** — Add activity logs to track translation updates, polish the user interface with loading states, and run end-to-end integration verifications. ``` Add an activity log system that records every translation change, key creation, and AI generation event with timestamps and user details. Polish the dashboard UI using Lucide icons and clean tables. Verify all API routes, database transactions, and AI translation flows with rigorous error handling and loading indicators. ``` ### Cost vs paying **Starting costs (one-time):** - Custom Domain (optional): $12/year - OpenAI API Credits: $10 one-time - Total: ~$22 one-time **Ongoing costs (monthly):** - OpenAI API usage for AI translation: ~$3-5/mo - Vercel & Neon Hosting: $0/mo - Total: ~$4/mo - Paying for the SaaS instead: €49/mo (Team plan) - Build time: 35-50 hours - AI tool credits: ~$20/mo (Claude Pro / Cursor) - Break-even: 1 month ## Sources - [Tolgee Official Website](https://tolgee.io) - [Tolgee Pricing Documentation](https://tolgee.io/pricing) - [Tolgee Self-Hosting Guide](https://tolgee.io/self-hosting)