41 lines
2.3 KiB
Markdown
41 lines
2.3 KiB
Markdown
# Introduction
|
|
|
|
What is AI Elements and why you should use it.
|
|
|
|
[AI Elements](https://www.npmjs.com/package/ai-elements) is a component library and custom registry built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more.
|
|
|
|
Installing AI Elements is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow.
|
|
|
|
**Using AI Elements CLI:**
|
|
|
|
```bash
|
|
npx ai-elements@latest
|
|
```
|
|
|
|
**Using shadcn CLI:**
|
|
|
|
```bash
|
|
npx shadcn@latest add @ai-elements/all
|
|
```
|
|
|
|
## Quick Start
|
|
|
|
Here are some basic examples of what you can achieve using components from AI Elements.
|
|
|
|
## Prerequisites
|
|
|
|
Before installing AI Elements, make sure your environment meets the following requirements:
|
|
|
|
- [Node.js](https://nodejs.org/en/download/), version 18 or later
|
|
- A [Next.js](https://nextjs.org/) project with the [AI SDK](https://ai-sdk.dev/) installed.
|
|
- [shadcn/ui](https://ui.shadcn.com/) installed in your project. If you don't have it installed, running any install command will automatically install it for you.
|
|
- We also highly recommend using the [AI Gateway](https://vercel.com/docs/ai-gateway) and adding `AI_GATEWAY_API_KEY` to your `env.local` so you don't have to use an API key from every provider. AI Gateway also gives $5 in usage per month so you can experiment with models. You can obtain an API key [here](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys&title=Get%20your%20AI%20Gateway%20key).
|
|
|
|
## Installing Components
|
|
|
|
You can install AI Elements components using either the AI Elements CLI or the shadcn/ui CLI. Both achieve the same result: adding the selected component's code and any needed dependencies to your project.
|
|
|
|
The CLI will download the component's code and integrate it into your project's directory (usually under your components folder). By default, AI Elements components are added to the `@/components/ai-elements/` directory (or whatever folder you've configured in your shadcn components settings).
|
|
|
|
After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.
|