nextjs-ollama-llm-ui

nextjs-ollama-llm-ui

Fully-featured, beautiful web interface for Ollama LLMs - built with NextJS. Deploy with a single click.

Stars: 698

Visit
 screenshot

This web interface provides a user-friendly and feature-rich platform for interacting with Ollama Large Language Models (LLMs). It offers a beautiful and intuitive UI inspired by ChatGPT, making it easy for users to get started with LLMs. The interface is fully local, storing chats in local storage for convenience, and fully responsive, allowing users to chat on their phones with the same ease as on a desktop. It features easy setup, code syntax highlighting, and the ability to easily copy codeblocks. Users can also download, pull, and delete models directly from the interface, and switch between models quickly. Chat history is saved and easily accessible, and users can choose between light and dark mode. To use the web interface, users must have Ollama downloaded and running, and Node.js (18+) and npm installed. Installation instructions are provided for running the interface locally. Upcoming features include the ability to send images in prompts, regenerate responses, import and export chats, and add voice input support.

README:

Fully-featured & beautiful web interface for Ollama LLMs

GitHub Repo stars

Get up and running with Large Language Models quickly, locally and even offline. This project aims to be the easiest way for you to get started with LLMs. No tedious and annoying setup required!

Features ✨

  • Beautiful & intuitive UI: Inspired by ChatGPT, to enhance similarity in the user experience.
  • Fully local: Stores chats in localstorage for convenience. No need to run a database.
  • Fully responsive: Use your phone to chat, with the same ease as on desktop.
  • Easy setup: No tedious and annoying setup required. Just clone the repo and you're good to go!
  • Code syntax highligting: Messages that include code, will be highlighted for easy access.
  • Copy codeblocks easily: Easily copy the highlighted code with one click.
  • Download/Pull & Delete models: Easily download and delete models directly from the interface.
  • Switch between models: Switch between models fast with a click.
  • Chat history: Chats are saved and easily accessed.
  • Light & Dark mode: Switch between light & dark mode.

Preview

https://github.com/jakobhoeg/nextjs-ollama-llm-ui/assets/114422072/08eaed4f-9deb-4e1b-b87a-ba17d81b9a02

Requisites ⚙️

To use the web interface, these requisites must be met:

  1. Download Ollama and have it running. Or run it in a Docker container. Check the docs for instructions.
  2. Node.js (18+) and npm is required. Download

Deploy your own to Vercel or Netlify in one click ✨

Deploy with Vercel Deploy to Netlify Button

You'll need to set your OLLAMA_ORIGINS environment variable on your machine that is running Ollama:

OLLAMA_ORIGINS="https://your-app.vercel.app/"

Installation 📖

Packaging status

Use a pre-build package from one of the supported package managers to run a local environment of the web interface. Alternatively you can install from source with the instructions below.

[!NOTE]
If your frontend runs on something other than http://localhost or http://127.0.0.1, you'll need to set the OLLAMA_ORIGINS to your frontend url.

This is also stated in the documentation:

Ollama allows cross-origin requests from 127.0.0.1 and 0.0.0.0 by default. Additional origins can be configured with OLLAMA_ORIGINS

Install from source

1. Clone the repository to a directory on your pc via command prompt:

git clone https://github.com/jakobhoeg/nextjs-ollama-llm-ui

2. Open the folder:

cd nextjs-ollama-llm-ui

3. Rename the .example.env to .env:

mv .example.env .env

4. If your instance of Ollama is NOT running on the default ip-address and port, change the variable in the .env file to fit your usecase:

NEXT_PUBLIC_OLLAMA_URL="http://localhost:11434"

5. Install dependencies:

npm install

6. Start the development server:

npm run dev

5. Go to localhost:3000 and start chatting with your favourite model!

Upcoming features

This is a to-do list consisting of upcoming features.

  • ✅ Voice input support
  • ✅ Code syntax highlighting
  • ⬜️ Ability to send an image in the prompt to utilize vision language models.
  • ⬜️ Ability to regenerate responses
  • ⬜️ Import and export chats

Tech stack

NextJS - React Framework for the Web

TailwindCSS - Utility-first CSS framework

shadcn-ui - UI component built using Radix UI and Tailwind CSS

shadcn-chat - Chat components for NextJS/React projects

Framer Motion - Motion/animation library for React

Lucide Icons - Icon library

Helpful links

Medium Article - How to launch your own ChatGPT clone for free on Google Colab. By Bartek Lewicz.

Lobehub mention - Five Excellent Free Ollama WebUI Client Recommendations

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for nextjs-ollama-llm-ui

Similar Open Source Tools

For similar tasks

For similar jobs