Overview

This is an unofficial SvelteKit port of the vercel-labs/ai-chatbot. It is a chatbot template that utilizes various AI chat models and can be deployed easily on Vercel. The template comes with features such as streaming chat UI, support for different AI models, styling with Tailwind CSS, and more.

Features

• SvelteKit: Built using SvelteKit framework.
• Vercel AI SDK for streaming chat UI: Utilizes the Vercel AI SDK to enable streaming chat UI.
• Support for OpenAI, Anthropic, HuggingFace, or custom AI chat models: Can work with different AI chat models or even custom models.
• LangChain Edge runtime-ready: Ready for LangChain edge runtime.
• shadcn/ui and shadcn-svelte: Uses shadcn/ui and shadcn-svelte libraries for UI components.
• Styling with Tailwind CSS: Style the chatbot UI using Tailwind CSS.
• Radix Svelte and Svelte Headless UI for headless component primitives: Utilizes Radix Svelte and Svelte Headless UI for creating headless component primitives.
• Icons from Phosphor Icons: Includes icons from Phosphor Icons library.
• Chat History, rate limiting, and session storage with Vercel KV: Supports chat history, rate limiting, and session storage using Vercel KV (under construction).
• Auth.js for authentication: Provides authentication using Auth.js.
• Model Providers: Ships with OpenAI gpt-3.5-turbo as the default model provider, but allows switching to Anthropic, HuggingFace, or using LangChain with a few lines of code.

Installation

To install the Next.js AI Chatbot, follow these steps:

1. Deploy your own version of the Next.js AI Chatbot to Vercel with one click using the “Deploy with Vercel” button.
2. Create and configure a KV database instance on Vercel by following the steps outlined in the quick start guide provided by Vercel. This will enable your application to interact with the database.
3. Update the environment variables (KV_URL, KV_REST_API_URL, KV_REST_API_TOKEN, KV_REST_API_READ_ONLY_TOKEN) in the .env file with the appropriate credentials generated during the KV database setup.
4. Run the Next.js AI Chatbot locally using the environment variables defined in the .env.example file. You can use Vercel Environment Variables for this or simply create a .env file. Note: Do not commit your .env file to avoid exposing secrets for accessing the OpenAI and authentication provider accounts.
5. Install the Vercel CLI globally by running npm i -g vercel.
6. Link the local instance of the chatbot with your Vercel and GitHub accounts by running vercel link. This will create a .vercel directory.
7. Download your environment variables by running vercel env pull.
8. The chatbot template should now be running on localhost:5173.

Summary

The SvelteKit port of the vercel-labs/ai-chatbot is a versatile chatbot template that allows the integration of various AI chat models. It provides support for popular AI models such as OpenAI gpt-3.5-turbo, Anthropic, and HuggingFace, and is ready for LangChain edge runtime. The template offers features like streaming chat UI, styling with Tailwind CSS, chat history and session storage with Vercel KV (under construction), and authentication using Auth.js. With its easy deployment process on Vercel, this template is a convenient solution for building AI-powered chatbot applications.