Installation

Prerequisites

Before installing Svelte AI Elements, ensure you have the following:

• Node.js version 18 or later
• SvelteKit project set up
• shadcn-svelte configured in your project

Install SvelteKit

If you don't have a SvelteKit project yet, create one using the following command:

Make sure to select Tailwind CSS when prompted during the setup process.

Navigate to your project directory:

Install shadcn-svelte

First, you'll need to install and configure shadcn-svelte in your project. Run the init command to set up your project:

Follow the prompts to configure components.json:

Which base color would you like to use? › Slate
Where is your global CSS file? (this file will be overwritten) › src/app.css
Configure the import alias for lib: › $lib
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils
Configure the import alias for hooks: › $lib/hooks
Configure the import alias for ui: › $lib/components/ui

Using the shadcn CLI

Once shadcn-svelte is set up, you can install components using the shadcn CLI. Use the following command pattern to add any component:

Available components include:

• message - Chat message component with role-based styling
• prompt-input - Advanced prompt input with suggestions
• conversation - Complete conversation container
• code - Syntax-highlighted code blocks
• reasoning - AI reasoning display component
• loader - Loading states for AI responses
• response - AI stream response display component
• And many more...

For example, to install the message component:

Usage

After installation, import and start using the components in your project:

That's it! You're now ready to build amazing AI-powered interfaces with Svelte AI Elements. Check out the individual component documentation for detailed usage examples and API references.