Custom AI Editor

Technologies Used

• Next.js (13): The latest version of Next.js powers the frontend and backend of the app. It provides a seamless developer experience with API routes, server-side rendering, and dynamic routing.
• Prisma: Prisma is used as the ORM (Object-Relational Mapper) to handle database queries and connect the app with a PostgreSQL database. It makes working with databases in TypeScript straightforward, with schema definitions and type-safe queries.
• Tiptap: Tiptap is the core text editor used in this project. It provides a highly extensible WYSIWYG editor based on ProseMirror, which allows us to create and manipulate rich text content.

Why Tiptap is Awesome

Tiptap is a modern editor built on top of ProseMirror, offering flexibility and customization. What makes it stand out is the ability to easily integrate it with modern JavaScript frameworks (like React in my case) and extend its functionality with custom extensions.

Some key features that make Tiptap ideal:

• Modular and Extensible: Tiptap comes with several built-in extensions (like Bold, Italic, BulletList), and you can add or remove them depending on your needs.
• Highly Customizable: It allows developers to create their own extensions to handle specialized tasks, which is critical for projects that need unique functionality.
• ProseMirror under the hood: Since Tiptap is based on ProseMirror, you get all the power of this widely-used editor framework with a simplified and modern interface.

Custom AI-Powered Tiptap Extensions

For this project, I created custom extensions for Tiptap to integrate AI-powered commands using an autocompletion feature. Here’s how it works:

1. AI Autocomplete: Users can trigger AI-powered autocompletion by hitting "Tab". The editor analyzes the surrounding text and predicts the next few words or sentences using AI (via a backend API integrated with AI models).
2. AI Commands: I extended Tiptap to recognize certain commands (like /generate, /summarize), which trigger different AI actions, such as generating new content or summarizing a block of text.

Creating these custom extensions was made simple thanks to Tiptap's extension API, which allows you to define new keyboard shortcuts, menu items, and commands.

Notion-like Drag-and-Drop Interface

The editor also features a Notion-inspired drag-and-drop interface. Users can drag blocks (e.g., paragraphs, images, lists) and move them around, just like in Notion. This improves the user experience, making it easier to reorganize content without breaking focus.

Why we Chose Next.js and Prisma

• Next.js 13: With its powerful server-side rendering and API routes, Next.js was a natural fit for this project. It allows me to handle both the frontend and backend logic within a single codebase.
• Prisma: Prisma’s schema-based approach allows for clean and type-safe database queries. In this project, I’m using Prisma to store and retrieve page data (title, content, etc.) in a PostgreSQL database. Prisma also makes migrations simple, ensuring my database schema stays in sync with the application.

Final Thoughts

This project showcases how modern web development tools like Next.js, Prisma, and Tiptap can come together to create a powerful, flexible text editor with advanced features like drag-and-drop interfaces and AI-powered commands. The extensibility of Tiptap, in particular, played a huge role in enabling custom AI integration.