Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time


Magic is a showcase of the AI tools I've been playing with. I've made the source code available on Github under jxnl/magic-text

I'm using this project as an opportunity to learn and grow as a machine learning engineer, by building in public. I'm diving into React/NextJS while tackling some low hanging fruit, and I have big plans for what's to come. My goal with Magic is to inspire others to explore the possibilities of the OpenAI API and to show that with a little creativity, the sky's the limit.

Magic Text

Simply highlight any text in the text area, and you'll be able to see the brush options in real time. No need to wait for any loading spinners, as Magic will immediately begin rewriting your selection to your specifications.

Magic Youtube

Input a youtube video url and get a summary in markdown format. If it does not have a transcript, it will use whisper but it may be less accurate than the transcript and will take longer to generate.

Magic SQL

Use the default schema or add your own and ask questions in plain english and let Magic SQL do its best to explain the answer. You can also Magic to add tables or columns and the schema will automatically update.

Magic Div

Magic Div is a simple tool to help you create HTML divs. You can use natrual language to describe the content and Magic will do its best to create the layout you're looking for using tailwindcss.

Magic Survey

Magic survey takes a json schema and defines conversational agent that helps users and complete survery and sets the data into a object in the browser.


This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.