2024-10-20 16:01:00
github.com
This is a simple Next.js project that implements a mind map visualization tool using React Flow.
Watch a demo of it in action here.
The UI is built using shadcn and some components from Magic UI.
It allows users to view and interact with mind maps, and download the mind map data as a markdown file.
The mind map data is generated using either local models from Ollama or external models like OpenAI and leveraging AI SDK.
- Interactive mind map visualization
- Node details view in a side sheet
- Markdown export functionality
- Save mind map data to a local JSON file
- Switch between local and external models
Install all dependencies:
Copy the .env.template
file to .env.local
and specify which model (local or external) you want to use by setting the NEXT_PUBLIC_USE_LOCAL_MODELS
environment variable to true
or false
.
When running an OpenAI model, you must specify your OpenAI API key in the .env.local
file.
Inside the route.ts
file, you must specify the model you are running using Ollama, by default it will use the llama3.1
model for local models and for external models it will use the gpt-3.5-turbo
model.
Bear in mind that external models tend to be much faster serving than local models.
If you want to learn how to run a model locally, check out the Ollama documentation.
Now you’re ready to run the development server:
Open http://localhost:3000 with your browser and then start creating your own learning mind maps.
The prompts used to generate the mind map data is defined in the defaultLocalPrompt
and defaultExternalPrompt
variables in the prompts.ts
file.
This project is licensed under the MIT License.
Support Techcratic
If you find value in Techcratic’s insights and articles, consider supporting us with Bitcoin. Your support helps me, as a solo operator, continue delivering high-quality content while managing all the technical aspects, from server maintenance to blog writing, future updates, and improvements. Support Innovation! Thank you.
Bitcoin Address:
bc1qlszw7elx2qahjwvaryh0tkgg8y68enw30gpvge
Please verify this address before sending funds.
Bitcoin QR Code
Simply scan the QR code below to support Techcratic.
Please read the Privacy and Security Disclaimer on how Techcratic handles your support.
Disclaimer: As an Amazon Associate, Techcratic may earn from qualifying purchases.