https://github.com/marcusschiesser/ai-chatbot

A full-featured, hackable Next.js AI chatbot built using my chat UI components
https://github.com/marcusschiesser/ai-chatbot

ai chatbot chatgpt gpt-4 nextjs shadcn-ui vision

Last synced: 8 days ago
JSON representation

A full-featured, hackable Next.js AI chatbot built using my chat UI components

• Host: GitHub
• URL: https://github.com/marcusschiesser/ai-chatbot
• Owner: marcusschiesser
• License: mit
• Created: 2023-11-28T04:17:14.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-19T02:04:12.000Z (10 months ago)
• Last Synced: 2024-12-03T13:38:38.778Z (about 1 month ago)
• Topics: ai, chatbot, chatgpt, gpt-4, nextjs, shadcn-ui, vision
• Language: TypeScript
• Homepage: https://ai-chatbot-xi-two.vercel.app
• Size: 3.22 MB
• Stars: 30
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


GPT4 Vision Chatbot




  An open-source AI chatbot app template for GPT4 Vision built with Next.js, the Vercel AI SDK, OpenAI, and marcusschiesser/ui.





  Features ·

  Model Providers ·

  Deploy Your Own ·

  Running locally ·








## Features

- [Next.js](https://nextjs.org) App Router

- React Server Components (RSCs), Suspense, and Server Actions

- [Vercel AI SDK](https://sdk.vercel.ai/docs) for streaming chat UI

- Support for OpenAI (default), Anthropic, Cohere, Hugging Face, or custom AI chat models and/or LangChain

- [marcusschiesser/ui](https://github.com/marcusschiesser/ui) for chat UI

  - based on [shadcn/ui](https://ui.shadcn.com)

  - Styling with [Tailwind CSS](https://tailwindcss.com)

  - [Radix UI](https://radix-ui.com) for headless component primitives

  - Icons from [Phosphor Icons](https://phosphoricons.com)

## Model Providers

This template ships with OpenAI `gpt-4-vision-preview` as the default. Once [Vercel AI SDK](https://sdk.vercel.ai/docs) supports other vision models, it's easy to update this template.

## Deploy Your Own

You can find a test deployment at [https://chat.marcusschiesser.de](https://chat.marcusschiesser.de). Note that the chat is not working as the OpenAI key has been disabled to save costs.

Using your own [OpenAI key](https://platform.openai.com/api-keys), you can deploy your own version of the Next.js AI Chatbot to Vercel with one click:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmarcusschiesser%2Fai-chatbot&env=OPENAI_API_KEY)

## Running locally

You will need to use the environment variables [defined in `.env.example`](.env.example) to run this AI Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary.

> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.

```bash

pnpm install

pnpm dev

```

Your app template should now be running on [localhost:3000](http://localhost:3000/).