Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sucepass/nextjs-chat-ai

Experiments in multi-platform model serving
https://github.com/sucepass/nextjs-chat-ai

Last synced: about 21 hours ago
JSON representation

Experiments in multi-platform model serving

Awesome Lists containing this project

README 

        


  






  Fully-featured & beautiful web interface for Ollama LLMs




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](https://ollama.com/download) and have it running. Or run it in a Docker container. Check the [docs](https://github.com/ollama/ollama) for instructions.

2. Node.js (18+) and npm is required. [Download](https://nodejs.org/en/download)



# Deploy to Vercel in one click ✨



[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Faddyosmani%2Fnextjs-chat-ai&env=OLLAMA_URL,GEMINI_API_KEY)



You'll need to set your [OLLAMA_ORIGINS](https://github.com/ollama/ollama/blob/main/docs/faq.md) environment variable on your machine that is running Ollama:



```

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

```



# Installation to run locally 📖



To install and run a local environment of the web interface, follow the instructions below.



**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:**



```

OLLAMA_URL="http://localhost:11434"

```



**5. Install dependencies:**



```

npm install

```



**6. Start the development server:**



```

npm run dev

```



**5. Go to [localhost:3000](http://localhost:3000) and start chatting with your favourite model!**



# Upcoming features



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

- ⬜️ Ability to send an image in the prompt to utilize vision language models.

- ⬜️ Ability to regenerate responses

- ⬜️ Import and export chats

- ⬜️ Voice input support

- ✅ Code syntax highlighting



# Tech stack



[NextJS](https://nextjs.org/) - React Framework for the Web



[TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework



[shadcn-ui](https://ui.shadcn.com/) - UI component built using Radix UI and Tailwind CSS



[shadcn-chat](https://github.com/jakobhoeg/shadcn-chat) - Chat components for NextJS/React projects



[Framer Motion](https://www.framer.com/motion/) - Motion/animation library for React



[Lucide Icons](https://lucide.dev/) - Icon library