Your writers dictate, the editor writes

Step by step

1. 01

   Get the secret key

   sk_live_…

   Dashboard → Sites and integration → your site → secret key. Put it in a server environment variable (VOKYT_SECRET_KEY). It must never reach the browser.

   envCopy

   VOKYT_SECRET_KEY=sk_live_…

2. 02

   Install the extension

   @vokyt/tiptap

   The package will be published on npm; email bonjour@vokyt.cc for early access.

   shCopy

   pnpm add @vokyt/tiptap

3. 03

   Add the relay route

   relayDictation

   The browser sends audio to your server, which relays it to Vokyt with the secret key. Check here that the user is signed in.

   tsCopy

   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

   Add the extension to the editor

   Dictation.configure

   Ctrl/Cmd + Shift + D starts and stops dictation. Commands: startDictation(), stopDictation(), toggleDictation(), cancelDictation().

   tsCopy

   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
       }),
     ],
   });