Skip to content

Commit 5287958

Browse files
cwandevcwandev
committed
feat(www): build documentation site
1 parent d5c57df commit 5287958

File tree

23 files changed

+3097
-2820
lines changed

23 files changed

+3097
-2820
lines changed

‎README.md‎

Lines changed: 133 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,135 @@
11
# AI Elements Vue
22

3-
[AI Elements Vue](https://ai-elements-vue.com) is a component library built on top of [shadcn-vue](https://www.shadcn-vue.com/) to help you build AI-native applications faster.
3+
[AI Elements Vue](https://ai-elements-vue.com) is an unofficial community-led [Vue](https://vuejs.org) port of [AI Elements](https://github.com/vercel/ai-elements).
4+
5+
> **Note** <br> **We are not affiliated with AI Elements, but we have received support for this project** <br> This is a project born out of the need for a similar project for the Vue ecosystem.
6+
7+
## Overview
8+
9+
[AI Elements Vue](https://ai-elements-vue.com) is a component library built on top of [shadcn-vue](https://www.shadcn-vue.com/) to help you build AI-native applications faster. It provides pre-built, customizable Vue components specifically designed for AI applications, including conversations, messages, code blocks, reasoning displays, and more. The CLI makes it easy to add these components to your Vue.js or Nuxt.js project.
10+
11+
## Installation
12+
13+
You can use the AI Elements Vue CLI directly with npx, or install it globally:
14+
15+
```bash
16+
# Use directly (recommended)
17+
npx ai-elements-vue@latest
18+
19+
# Or using shadcn-vue cli
20+
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json
21+
```
22+
23+
## Prerequisites
24+
25+
Before using AI Elements Vue, ensure your project meets these requirements:
26+
27+
- **Node.js** 18 or later
28+
- **Vue.js, Nuxt.js** project with [AI SDK](https://ai-sdk.dev/) installed
29+
- **shadcn-vue** initialized in your project (`npx shadcn-vue@latest init`)
30+
- **Tailwind CSS** configured (AI Elements Vue supports CSS Variables mode only)
31+
32+
## Usage
33+
34+
### Install All Components
35+
36+
Install all available AI Elements Vue components at once:
37+
38+
```bash
39+
npx ai-elements-vue@latest
40+
```
41+
42+
This command will:
43+
- Set up shadcn-vue if not already configured
44+
- Install all AI Elements Vue components to your configured components directory
45+
- Add necessary dependencies to your project
46+
47+
### Install Specific Components
48+
49+
Install individual components using the `add` command:
50+
51+
```bash
52+
npx ai-elements-vue@latest add <component-name>
53+
```
54+
55+
Examples:
56+
```bash
57+
# Install the message component
58+
npx ai-elements-vue@latest add message
59+
60+
# Install the conversation component
61+
npx ai-elements-vue@latest add conversation
62+
63+
# Install the code-block component
64+
npx ai-elements-vue@latest add code-block
65+
```
66+
67+
### Alternative: Use with shadcn-vue CLI
68+
69+
You can also install components using the standard shadcn-vue CLI:
70+
71+
```bash
72+
# Install all components
73+
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json
74+
75+
# Install a specific component
76+
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json
77+
```
78+
79+
## Available Components
80+
81+
AI Elements Vue includes the following components:
82+
83+
| Component | Status | Description |
84+
|-----------|--------|-------------|
85+
| `message` | ✅ 已完成 | Individual chat messages with avatars |
86+
| `conversation` | ✅ 已完成 | Container for chat conversations |
87+
| `response` | ✅ 已完成 | Formatted AI response display |
88+
| `prompt-input` | ✅ 已完成 | Advanced input component with model selection |
89+
| `actions` | ❌ 未完成 | Interactive action buttons for AI responses |
90+
| `branch` | ❌ 未完成 | Branch visualization for conversation flows |
91+
| `code-block` | ❌ 未完成 | Syntax-highlighted code display with copy functionality |
92+
| `image` | ❌ 未完成 | AI-generated image display component |
93+
| `inline-citation` | ❌ 未完成 | Inline source citations |
94+
| `loader` | ❌ 未完成 | Loading states for AI operations |
95+
| `reasoning` | ❌ 未完成 | Display AI reasoning and thought processes |
96+
| `source` | ❌ 未完成 | Source attribution component |
97+
| `suggestion` | ❌ 未完成 | Quick action suggestions |
98+
| `task` | ❌ 未完成 | Task completion tracking |
99+
| `tool` | ❌ 未完成 | Tool usage visualization |
100+
101+
## How It Works
102+
103+
The AI Elements CLI:
104+
105+
1. **Detects your package manager** (npm, pnpm, yarn, or bun) automatically
106+
2. **Fetches component registry** from `https://registry.ai-elements-vue.com/all.json`
107+
3. **Installs components** using the shadcn-vue CLI under the hood
108+
4. **Adds dependencies** and integrates with your existing shadcn-vue setup
109+
110+
Components are installed to your configured shadcn-vue components directory (typically `@/components/ai-elements/`) and become part of your codebase, allowing for full customization.
111+
112+
## Configuration
113+
114+
AI Elements Vue uses your existing shadcn-vue configuration. Components will be installed to the directory specified in your `components.json` file.
115+
116+
## Recommended Setup
117+
118+
For the best experience, we recommend:
119+
120+
1. **AI Gateway**: Set up [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) and add `AI_GATEWAY_API_KEY` to your `.env.local`
121+
2. **CSS Variables**: Use shadcn-vue's CSS Variables mode for theming
122+
3. **TypeScript**: Enable TypeScript for better development experience
123+
124+
## Contributing
125+
126+
If you'd like to contribute to AI Elements Vue, please follow these steps:
127+
128+
1. Fork the repository
129+
2. Create a new branch
130+
3. Make your changes to the components in `packages/elements`.
131+
4. Open a PR to the `main` branch.
132+
133+
---
134+
135+
Made with ❤️ by [cwandev](https://github.com/cwandev)

‎apps/www/README.md‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,34 @@
1-
# shadcn-docs-nuxt Minimal Starter
1+
# Docs
22

3-
Starter template for [shadcn-docs-nuxt](https://github.com/ZTL-UwU/shadcn-docs-nuxt).
3+
This is the documentation for [AI Elements Vue](https://github.com/cwandev/ai-elements-vue).
44

55
## Setup
66

77
Make sure to install the dependencies:
88

99
```bash
10-
# yarn
11-
yarn install
12-
13-
# npm
14-
npm install
15-
1610
# pnpm
1711
pnpm install
18-
19-
# bun
20-
bun install
2112
```
2213

2314
## Development Server
2415

25-
Start the development server on http://localhost:3000
16+
Start the development server on http://localhost:3002
2617

2718
```bash
28-
npm run dev
19+
pnpm dev
2920
```
3021

3122
## Production
3223

33-
[![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?repo=ZTL-UwU/shadcn-docs-nuxt-starter)
34-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FZTL-UwU%2Fshadcn-docs-nuxt-starter)
35-
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https%3A%2F%2Fgithub.com%2FZTL-UwU%2Fshadcn-docs-nuxt-starter)
36-
3724
Build the application for production:
3825

3926
```bash
40-
npm run build
27+
pnpm build
4128
```
4229

4330
Locally preview production build:
4431

4532
```bash
46-
npm run preview
33+
pnpm preview
4734
```
48-
49-
Checkout the [deployment documentation](https://shadcn-docs-nuxt.vercel.app/getting-started/deployment) for more information.

‎apps/www/app.config.ts‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
export default defineAppConfig({
22
shadcnDocs: {
33
site: {
4-
name: 'shadcn-docs-nuxt',
5-
description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
4+
name: 'AI Elements Vue',
5+
description: 'AI Elements Vue is a component library built on top of shadcn-vue to help you build AI-native applications faster.',
66
},
77
theme: {
88
customizable: true,
99
color: 'zinc',
1010
radius: 0.5,
1111
},
1212
header: {
13-
title: 'shadcn-docs-starter',
13+
title: 'AI Elements Vue',
1414
showTitle: true,
1515
darkModeToggle: true,
1616
languageSwitcher: {
@@ -22,26 +22,70 @@ export default defineAppConfig({
2222
light: '/logo.svg',
2323
dark: '/logo-dark.svg',
2424
},
25-
nav: [],
25+
nav: [{
26+
title: 'Docs',
27+
links: [{
28+
title: 'Getting Started',
29+
to: '/overview/introduction',
30+
description: 'Introduction to AI Elements Vue',
31+
target: '_self',
32+
}, {
33+
title: 'Setup',
34+
to: '/overview/setup',
35+
description: 'Follow the step-by-step guide to install AI Elements Vue in your project',
36+
target: '_self',
37+
}, {
38+
title: 'Usage',
39+
to: '/overview/usage',
40+
description: 'Learn how to use AI Elements Vue in your project',
41+
target: '_self',
42+
}, {
43+
title: 'Components',
44+
to: '/components',
45+
description: 'Explore all available components and their usage',
46+
target: '_self',
47+
}],
48+
}, {
49+
title: 'Credits',
50+
links: [{
51+
title: 'AI Elements',
52+
to: 'https://ai-sdk.dev/elements/overview',
53+
description: 'AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster',
54+
target: '_blank',
55+
}, {
56+
title: 'Shadcn Vue',
57+
to: 'https://shadcn-vue.com',
58+
description: 'Re-usable components built with Reka UI, and Tailwind CSS',
59+
target: '_blank',
60+
}],
61+
}, {
62+
title: 'Community',
63+
links: [{
64+
title: 'GitHub',
65+
to: 'https://github.com/cwandev/ai-elements-vue',
66+
description: 'Source code for AI Elements Vue',
67+
target: '_blank',
68+
}],
69+
}],
2670
links: [{
2771
icon: 'lucide:github',
28-
to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
72+
to: 'https://github.com/cwandev/ai-elements-vue',
2973
target: '_blank',
3074
}],
3175
},
3276
aside: {
33-
useLevel: true,
77+
useLevel: false,
3478
collapse: false,
3579
},
3680
main: {
3781
breadCrumb: true,
3882
showTitle: true,
3983
},
4084
footer: {
41-
credits: 'Copyright © 2024',
85+
credits: 'Copyright © 2025',
4286
links: [{
4387
icon: 'lucide:github',
44-
to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
88+
to: 'https://github.com/cwandev/ai-elements-vue',
4589
target: '_blank',
4690
}],
4791
},
@@ -50,12 +94,12 @@ export default defineAppConfig({
5094
links: [{
5195
title: 'Star on GitHub',
5296
icon: 'lucide:star',
53-
to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
97+
to: 'https://github.com/cwandev/ai-elements-vue',
5498
target: '_blank',
5599
}, {
56100
title: 'Create Issues',
57101
icon: 'lucide:circle-dot',
58-
to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/issues',
102+
to: 'https://github.com/cwandev/ai-elements-vue/issues',
59103
target: '_blank',
60104
}],
61105
},

0 commit comments

Comments
 (0)