Démarrage rapide : projet et clés
Chaque playground de ce site s'appuie sur un projet de démonstration partagé, vous pouvez donc explorer sans compte. Pour traduire votre propre application, il vous faut trois éléments du tableau de bord Langsys : un projet, une clé d'écriture et une clé en lecture seule. Deux minutes, une seule fois.
La configuration
- Connectez-vous sur app.langsys.dev — créez un compte si vous n'en avez pas.
- Créez un projet. Choisissez la locale de base (la langue dans laquelle vos phrases sources sont rédigées) et les locales cibles pour lesquelles vous souhaitez des traductions. Copiez l'identifiant du projet.
- Générez deux clés d'API pour le projet : une clé d'écriture et une clé en lecture seule. Cette séparation constitue tout le modèle de sécurité — Clés et environnements explique pourquoi.
- Ajoutez-les à votre env et installez le SDK correspondant à votre stack. Développez avec la clé d’écriture pour que les nouvelles phrases soient enregistrées et traduites automatiquement au fil de votre travail ; livrez avec la clé en lecture seule.
# .env.local — development (Vite-style names; adjust the prefix to your bundler)
VITE_LANGSYS_PROJECT_ID=your-project-id
VITE_LANGSYS_API_KEY=write-key # discovers + registers new phrases
# production
VITE_LANGSYS_PROJECT_ID=your-project-id
VITE_LANGSYS_API_KEY=read-only-key # only fetches — safe to ship in the browser# .env (Laravel, or your PHP app's environment)
LANGSYS_PROJECT_ID=your-project-id
LANGSYS_API_KEY=write-key # server-side, so the write key can stay —
# switch to read-only anywhere that must not
# register phrases (e.g. a public sandbox)Quelle clé utiliser et où ? Le navigateur ne reçoit que la clé en lecture seule : elle permet de récupérer les traductions, et rien d'autre, donc elle peut figurer sans risque dans un bundle public. La clé d'écriture enregistre de nouvelles phrases ; elle est réservée au développement et aux serveurs.
Choisissez ensuite votre SDK
Chaque page du SDK commence à Installation et suppose exactement cette configuration : l’identifiant du projet et la clé dans votre environnement :
Frontend
TypeScript, React, Vue et Svelte, chacun avec un playground interactif.
Backend
PHP et Laravel : la page arrive déjà localisée.
Méta-frameworks
Next.js, Nuxt et SvelteKit — initialisez les données côté serveur, hydratez côté client.
Les notions sous-jacentes vous sont nouvelles ? Commencez par Concepts — la phrase comme clé, la découverte des jetons et le stockage des locales — puis revenez ici.