Build a Notion-Style AI Markdown Editor with Next.js, Claude, & Vercel AI SDK

Overview
We elevate our user experience by bringing the AI power user prompt system directly into the editor. This module covers advanced keyboard listeners, tracking selection points inside text areas, and utilizing the complete function from useCompletion to send existing text as context to our LLM.
Key Takeaways

Event Interception: Capturing the specific /ai keydown trigger inside the textarea using native React refs and regex parsing.
Context Ingestion: Extracting the existing text within the editor, bundling it with system instructions, and passing it smoothly via the SDK's complete helper.
Dynamic Content Appending: Modifying state arrays to cleanly append incoming streamed text chunks back into the main markdown file.

🤖 Pre-Baked System System Prompts

Command	Prompt Instruction Passed to Claude
Fix Grammar	"Fix the grammar and spelling of the following markdown. Return only the corrected markdown, nothing else."
Summarize	"Summarize the following markdown content into a concise version. Return only the summary in markdown format."
Continue Writing	"Continue writing from where the following markdown left off. Match the tone and style. Return only the new content in a markdown format."
Improve Writing	"Improve the clarity and flow of the following markdown. Make it more professional and readable. Return only the improved markdown."

🔗 Lesson Resources

Module 3 Code Branch: Repo