Vos rédacteurs dictent, l'éditeur écrit

Pas à pas

1. 01

   Récupérez la clé secrète

   sk_live_…

   Tableau de bord → Sites et intégration → votre site → clé secrète. Mettez-la dans une variable d'environnement du serveur (VOKYT_SECRET_KEY). Elle ne doit jamais arriver dans le navigateur.

   envCopier

   VOKYT_SECRET_KEY=sk_live_…

2. 02

   Installez l'extension

   @vokyt/tiptap

   Le paquet sera publié sur npm ; écrivez-nous à bonjour@vokyt.cc pour y accéder dès maintenant.

   shCopier

   pnpm add @vokyt/tiptap

3. 03

   Ajoutez la route de relais

   relayDictation

   Le navigateur envoie l'audio à votre serveur, qui le relaie à Vokyt avec la clé secrète. Vérifiez ici que l'utilisateur est connecté.

   tsCopier

   import { relayDictation } from "@vokyt/tiptap/server";
   
   export async function POST(req: Request) {
     // Vérifiez ici que l'utilisateur est connecté
     return relayDictation(req, { secretKey: process.env.VOKYT_SECRET_KEY! });
   }

4. 04

   Ajoutez l'extension à l'éditeur

   Dictation.configure

   Ctrl/Cmd + Maj + D lance et arrête la dictée. Commandes : startDictation(), stopDictation(), toggleDictation(), cancelDictation().

   tsCopier

   import { Dictation } from "@vokyt/tiptap";
   
   new Editor({
     extensions: [
       StarterKit,
       Dictation.configure({
         endpoint: "/api/vokyt/dictation",
         language: "fr",
         onStateChange: (state) => console.log(state), // idle | recording | transcribing
       }),
     ],
   });