sveltekit-ai-chatbot

Introducing the SvelteKit AI Chatbot Project

The SvelteKit AI Chatbot is an open-source project that provides a template for building AI chatbots. It's developed with modern technologies like SvelteKit, the Vercel AI SDK, OpenAI, and Vercel KV, aiming to simplify the creation process of intelligent chat applications.

Purpose of the Project

This project is an unofficial SvelteKit adaptation of the Vercel Labs AI Chatbot. It serves as a base framework for developers looking to create or customize their own AI chatbots using cutting-edge tools and technologies.

Key Features

• SvelteKit Framework: Utilizes SvelteKit, a modern framework for building fast and dynamic web apps.
• Vercel AI SDK: Incorporates Vercel's SDK to enable a seamless streaming chat UI experience.
• Flexible Model Support: Comes ready with OpenAI's GPT-3.5-turbo by default but can be easily switched to other models like Anthropic, HuggingFace, or custom AI models using LangChain.
• Edge-Ready: Designed to run efficiently on edge networks.
• UI and Styling: Features tools such as Shadcn/UI, Shadcn-Svelte, and Tailwind CSS for stylish and adaptable user interfaces. Includes Radix Svelte and Svelte Headless UI for component handling, along with Phosphor Icons.
• Advanced Capabilities: Offers chat history, session storage, and rate limiting with Vercel KV, although this is currently a work in progress.
• User Authentication: Uses Auth.js for managing authentication and safe access.

Model Providers Flexibility

While it ships with OpenAI's GPT-3.5-turbo as the standard, the project allows seamless integration with other large language models (LLMs) like Anthropic and HuggingFace. This flexibility is facilitated by the Vercel AI SDK, allowing changes with minimal code alterations.

Deploy Your Own Chatbot

Deploying your version of the chatbot is streamlined with Vercel. Direct integration options are provided, allowing developers to deploy effortlessly:

Setting Up a KV Database

Follow Vercel's quick start guide to create a Vercel KV database. This step is crucial for integrating the storage features of the app. Update environment variables like KV_URL, KV_REST_API_URL, etc., in your .env file using the credentials received during setup.

Running Locally

To run the SvelteKit AI Chatbot on your local machine, follow these steps:

1. Prepare Environment Variables: Edit the .env.example file to include your environment configurations. This file should not be committed to source control to protect sensitive information.
2. Install Vercel CLI: npm i -g vercel
3. Link Vercel: Connect your local instance with your Vercel and GitHub accounts by running vercel link.
4. Retrieve Environment Variables: Use vercel env pull to download the necessary variables.

Then, you can install dependencies and start the server:

npm install
npm run dev
# Optionally open the app in a browser tab
npm run dev -- --open

Your application should be live at localhost:5173.

Authors

The core of this template is based on a version initially created for Next.js, with Jian Yuan Lee (Twitter) contributing significantly to the SvelteKit transformation.

This guide provides a comprehensive overview of the SvelteKit AI Chatbot project, offering modern tooling for developers aiming to build efficient, responsive, and customized AI chat applications.