This project is a exploration of providing LLMs a way to output visual responses.
Mermaid.js is a diagramming and charting language that can be outputted by LLMs. We can extract the outputted mermaid code to render.
Some specific uses for this would by for educational purposes such as providing visual representation of concepts. An example is shown on a Twitter demo.
This project was bootstrapped with Create React App. Additionally, added tailwindcss for styling.
To run an LLM you can either use Ollama or ChatGPT APIs
For Ollama, follow the setup steps from their repository. Ensure you have a server running which you can test by following this.
For ChatGPT, follow the instructions from their site. Make sure to create an API key to use.
Run cp .env.example .env then follow the comments for putting proper values in your .env file.
To start, run the following:
npm install
npm start
Feel free to contribute to this repository through PRs.
- Add structured outputs to generate valid mermaid.js code
- Add UI piece to switch to a specific diagram's message on click