DevLog: AI-Powered Inline Rephrase with OpenAI in Nuxt 3, TipTap 3 & Tailwind 2

// inside your component
import { useEditor, BubbleMenu, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const editor = useEditor({
  extensions: [
    StarterKit,
    BubbleMenu,
  ],
  content: '<p>Select text and click “Rephrase”!</p>',
})

<script setup lang="ts">
import { ref } from 'vue'
import { useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import BubbleMenu from '@tiptap/extension-bubble-menu'
import { rephraseText } from '~/utils/ai'

const editor = useEditor({
  extensions: [ StarterKit, BubbleMenu ],
  content: '<p>Select text and click “Rephrase”!</p>',
})

const loading = ref(false)
const isEditing = ref(false)
const instructions = ref('')
const originalText = ref('')
const aiResult = ref('')
const selectionRange = ref<{ from: number | null, to: number | null }>({
  from: null,
  to: null,
})

function startRephrase() {
  const { state } = editor.value!
  const { from, to, empty } = state.selection

  if (empty) {
    originalText.value = state.doc.textContent
    selectionRange.value = { from: null, to: null }
  } else {
    originalText.value = state.doc.textBetween(from, to, '\n\n')
    selectionRange.value = { from, to }
  }

  isEditing.value = true
  instructions.value = ''
}

function cancelRephrase() {
  isEditing.value = false
  instructions.value = ''
}

async function runRephrase() {
  if (loading.value) return

  loading.value = true
  try {
    aiResult.value = await rephraseText(originalText.value, instructions.value)
    applyRephrase()
  } catch (err) {
    console.error('Rephrase failed:', err)
  } finally {
    loading.value = false
    isEditing.value = false
  }
}

function applyRephrase() {
  const ed = editor.value!
  if (selectionRange.value.from != null) {
    ed.chain()
      .focus()
      .insertContentAt(
        { from: selectionRange.value.from, to: selectionRange.value.to! },
        aiResult.value,
      )
      .run()
  } else {
    ed.chain().focus().setContent(aiResult.value).run()
  }
}
</script>

// src/utils/ai.ts

/**
 * Call our server endpoint to hit OpenAI’s chat API.
 */
export async function rephraseText(
  text: string,
  instructions: string = ''
): Promise<string> {
  const res = await fetch('/api/rephrase', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text, instructions }),
  })

  if (!res.ok) {
    throw new Error(`API error ${res.status}: ${res.statusText}`)
  }

  const { rephrased } = (await res.json()) as { rephrased: string }
  return rephrased
}

// server/api/rephrase.post.ts
import { readBody } from 'h3'
import OpenAI from 'openai'

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })

export default defineEventHandler(async (event) => {
  const { text, instructions } = await readBody<{
    text: string
    instructions: string
  }>(event)

  const messages = [
    {
      role: 'system',
      content:
        'You are a helpful assistant that rephrases text without adding code fences or extra markdown.',
    },
    {
      role: 'user',
      content: [
        `Please rephrase the following text:`,
        `"${text}"`,
        `Additional instructions: ${instructions || '(none)'}`,
      ].join('\n\n'),
    },
  ]

  const resp = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages,
    temperature: 0.7,
  })

  const rephrased =
    resp.choices?.[0]?.message?.content?.trim() ?? text

  return { rephrased }
})