Unleashing the Power of AI: Write your own AI Extension
summary
Shows a working TipTap AI extension that runs through a front end talking to a backend proxy calling GPT-3.5 Turbo, implements a custom node with a set AI chat completion command and a slash-command suggestions menu, and uses React node view renderer instead of string HTML. Demo caches responses for speed, translates and rewrites text but initially strips formatting (bold lost) until prompts are adjusted, and warns about token limits (4k / 8k include prompt plus reply).
AI-written summary · about
chapters (13)
- 0:00AI extensions for TipTap
- 1:12Server-side AI integration
- 3:20Demo: TipTap AI extension
- 7:16AI in rich text editors
- 8:20AI extension setup walkthrough
- 11:55Custom commands and suggestions
- 14:47TipTap TypeScript module
- 16:34AI extension node and commands
- 17:57React NodeView for UI
- 18:20Client fetch to backend API
- 19:03OpenAI API integration
- 20:07Token limits in AI responses
- 21:53Prompt engineering best practices
related talks
44mUnleashing the Power of AI: Integrating Tiptap, OpenAI, and Vue.js
26mUnleashing the power of AI: Integrating Tiptap OpenAI and Vue.js
37mBuilding AI-powered user interfaces
32mConversations Without Prompts: AI in the Web
39mBuilding Your Own Bot with GPT: Harnessing the Power of AI...
47mAI-Powered Software Development From the Trenches
45mWeb Development in the Age of AI
47mThe Art of Prompt Engineering: Best Practices for Effective AI Interactions