A modern, responsive chatbot application built with SvelteKit, showcasing how to create an AI-powered chat interface using the Vercel AI SDK. This project demonstrates best practices for building conversational AI applications with a beautiful, professional UI powered by daisyUI and Tailwind CSS.
- 🤖 AI-Powered Chat: Interactive conversations with OpenAI's language models
- 💬 Modern UI: Beautiful chat interface with daisyUI components
- 📱 Responsive Design: Works seamlessly on desktop and mobile devices
- ⚡ Real-time Streaming: Live message streaming for natural conversations
- 🎨 Professional Styling: Clean, modern design with Tailwind CSS
- 🔧 Tool Integration: Support for AI tool invocations and function calls
- Framework: SvelteKit
- AI SDK: Vercel AI SDK
- Styling: Tailwind CSS + daisyUI
- Language Model: Any model supported by Vercel AI SDK (e.g., OpenAI GPT-3.5, GPT-4)
- Type Safety: TypeScript
Everything you need to build a Svelte project, powered by sv
.
- Node.js 18+ installed on your machine
- pnpm package manager (install with
npm install -g pnpm
) - An OpenAI API key (get one from OpenAI Platform)
- Clone or create the project:
# clone the project
git clone https://github.com/finntegrate/sveltekit-ai-chat
- Install dependencies:
pnpm install
- Set up environment variables:
Copy the example environment file and add your OpenAI API key:
cp .env.example .env.local
Then edit .env.local
and replace your_openai_api_key_here
with your actual OpenAI API key:
OPENAI_API_KEY=sk-your-actual-openai-api-key-here
.env.local
file to version control. It contains sensitive API keys.
This project is configured to use consistent line endings (LF) across all platforms to prevent issues with Windows machines changing line endings and creating large diffs.
.gitattributes
: Enforces LF line endings for all text files.editorconfig
: Ensures consistent editor behavior across IDEs.prettierrc
: Configured withendOfLine: "lf"
- DevContainer: Automatically configures Git settings when using the devcontainer
If you prefer to configure manually:
git config core.autocrlf false
git config core.eol lf
git add --renormalize .
Once you've completed the installation steps above, start the development server:
pnpm dev
# or start the server and open the app in a new browser tab
pnpm dev --open
The application will be available at http://localhost:5173
(or the next available port).
src/
├── routes/
│ ├── +layout.svelte # Main layout with global styles
│ ├── +page.svelte # Chat interface component
│ └── api/chat/+server.ts # API endpoint for chat functionality
├── app.css # Global Tailwind CSS styles
└── app.html # HTML template
To create a production version of your app:
pnpm build
You can preview the production build with pnpm preview
.
To deploy your app, you may need to install an adapter for your target environment.
- The project uses daisyUI themes. You can change the theme by modifying the
data-theme
attribute inapp.html
- Custom styles can be added to
src/app.css
- Component-specific styles use Tailwind CSS classes
- Model settings can be adjusted in
src/routes/api/chat/+server.ts
- Support for different OpenAI models (GPT-3.5, GPT-4, etc.)
- Streaming and tool integration capabilities
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
This project is open source and available under the Apache 2.0 License.