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.
Everything you need to build a Svelte project, powered by sv
.
npm install -g pnpm
)# clone the project
git clone https://github.com/finntegrate/sveltekit-ai-chat
pnpm install
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
ā ļø Important: Never commit your .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 with endOfLine: "lf"
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.
data-theme
attribute in app.html
src/app.css
src/routes/api/chat/+server.ts
git checkout -b feature/amazing-feature
)git commit -m 'Add some amazing feature'
)git push origin feature/amazing-feature
)This project is open source and available under the Apache 2.0 License.