🪄🖊️ Magic, a collection of interactive LLM demos.

Check out Magic!

notion image

Many companies, such as Copilot with Code Brushes, Notion with Notion AI, and Intercom with AI Composer, have released AI writing tools. As a beginner in JavaScript and an experienced Python developer, I was able to easily recreate some of these results with the help of OpenAI and Vercel's streaming functionality, which is 100x easier to use than Python.

I created a simple app that rewrites selected text by applying a "filter" or "brush". The tutorial I followed was created by Hassan El Mghari and my code is available on Github. I also extended it to create compelling SQL and HTML prompts. With 6 hours of Google research, 10 hours of JavaScript experience, and 10 years of Python development experience, this was achievable.


  • Typescript with React, next.js, framer.js, tailwindcss
    • Easy type-safe code with Typescript and VSCode language server.
    • Server/client rendering in Next.js makes web apps fast.
    • Simple animations with framer-motion.
    • No need to open css files with tailwindcss.
  • Vercel
    • Incredible developer experience with serverless functions and Vercel Edge.
    • Data streaming support in Nextjs makes the app snappy.
    • Preview deployment with each PR, prod deployment with merge to master. No setup needed.