May 22, 2025
DevLog: AI-Powered Inline Rephrase with OpenAI in Nuxt 3, TipTap 3 & Tailwind 2
Add an AI-powered inline “Rephrase” button to your Vue 3 + TipTap 3 editor using OpenAI’s Chat API: streamline content refinement, boost UX, and empower users to rewrite text without leaving the editor.
Empower your users to refine any text selection or full‐document content without leaving the editor. We’ll add an inline “Rephrase” button backed by OpenAI’s chat endpoint.
Prerequisites
Vue 3 project
TipTap 3 installed (
@tiptap/vue-3
+@tiptap/starter-kit
+@tiptap/extension-bubble-menu
)Composition API (
<script setup>
)An environment variable
OPENAI_API_KEY
set to your OpenAI secret keyNuxt 3 (Nitro) or any Node server to proxy the OpenAI call
1. Editor Initialization
2. BubbleMenu Markup
3. State & Methods
4. Front-End Helper: rephraseText()
5. Server Handler: OpenAI Chat
6. Styling & UX Tips
Disable buttons while
loading
is trueShow a spinner or “Loading…” text
Surface errors with a toast or inline banner
Add proper aria-labels and focus outlines
Tweak Tailwind classes for your brand’s look
With this setup, users can select text, add custom AI instructions, and get instant rephrases: powered by OpenAI’s chat endpoint and right inside your Vue 3 + TipTap 3 editor.