Introducing my new AI side project: It's an open-source Notion-style WYSYWIG editor with AI-powered autocompletions ✨ Built with Tiptap + OpenAI + @Vercel AI SDK ▲

Context: I've always been a huge fan of @NotionHQ. Since Vercel launched the AI SDK yesterday, I decided to take this opportunity to recreate Notion's block editor from scratch. Bonus: Incorporate some of Notion's latest AI features with `npm i ai`

Here's how it works: 1. Tiptap Editor setup w/ slash command extension 2. `useCompletion` hook at the parent editor + the slash command menu – using `id` to share states 3. `/api/generate` route to stream responses from @OpenAI Code is fully open-source:

Bonus: Using the `onResponse` callback option to handle rate limits. In the `/api/generate` route, I'm also using @Upstash's amazing ratelimit library + @Vercel KV to rate limit based on IP address. Link to the code:

The best part of the @Vercel AI SDK is how much simpler & declarative your code becomes. With one `npm i ai` command, you get: ◆ Code cleanliness & efficiency ◆ Back-pressure & cancellation handling ◆ Zero fragmented streams Here's the before and after:

Novel also handles image uploads via drag & drop / copy & paste. Images are stored as base64 strings in localStorage currently, but I'm planning to implement uploads to @Vercel Blob in the future. More on Vercel Blob →

Novel is fully App Router compatible and I'm planning to include it in the Platforms Starter Kit once it's fully migrated to the App Router as well! Here's the PR if you wanna follow along:

Some extra shoutouts: ◆ @jaredpalmer + @shuding_ + @max_leiter for the Vercel AI SDK: ◆ @tailwindcss which made styling a breeze ◆ @calcom's Cal Sans for the heading fonts 😍

Aaaand we're live on Product Hunt! 😸

Also added this to the @Vercel templates marketplace! You can now BYOK¹ and deploy your own version of Novel with 1-click 🤩 ¹ Bring-Your-Own-(OpenAI API)-key

@tiptap_editor @OpenAI @vercel this is awesome! I still can't believe you guys landed that `ai` package. also, my first time hearing about Tiptap, it looks great!

@tiptap_editor @OpenAI @vercel @tiptap_editor is fantastic for building WYSYWIG text editors on the web! 😁