ai-elements-vue 0.14.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -23
- package/index.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
# AI Elements Vue
|
|
2
|
-
|
|
3
|
-
A command-line interface for installing [AI Elements Vue](https://ai-elements-vue.com) components - a component library built on top of [shadcn-vue](https://www.shadcn-vue.com/) to help you build AI-native applications faster.
|
|
4
|
-
|
|
5
1
|
## Overview
|
|
6
2
|
|
|
7
|
-
AI Elements Vue 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
|
|
3
|
+
[AI Elements Vue](https://ai-elements-vue.com) 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 and Nuxt.js project.
|
|
8
4
|
|
|
9
5
|
## Installation
|
|
10
6
|
|
|
@@ -51,6 +47,7 @@ npx ai-elements-vue@latest add <component-name>
|
|
|
51
47
|
```
|
|
52
48
|
|
|
53
49
|
Examples:
|
|
50
|
+
|
|
54
51
|
```bash
|
|
55
52
|
# Install the message component
|
|
56
53
|
npx ai-elements-vue@latest add message
|
|
@@ -78,23 +75,43 @@ npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json
|
|
|
78
75
|
|
|
79
76
|
AI Elements Vue includes the following components:
|
|
80
77
|
|
|
81
|
-
| Component
|
|
82
|
-
|
|
83
|
-
|
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
78
|
+
| Component | Description |
|
|
79
|
+
| ------------------ | ------------------------------------------------------- |
|
|
80
|
+
| **Chatbot** | |
|
|
81
|
+
| `chain-of-thought` | Display AI reasoning and thought processes |
|
|
82
|
+
| `checkpoint` | Conversation checkpoint component |
|
|
83
|
+
| `confirmation` | Tool execution approval workflows |
|
|
84
|
+
| `context` | Display Context consumption |
|
|
85
|
+
| `conversation` | Container for chat conversations |
|
|
86
|
+
| `inline-citation` | Inline source citations |
|
|
87
|
+
| `message` | Individual chat messages with avatars |
|
|
88
|
+
| `model-selector` | AI model selection component |
|
|
89
|
+
| `plan` | Plan and task planning display component |
|
|
90
|
+
| `prompt-input` | Advanced input component with model selection |
|
|
91
|
+
| `queue` | Message and todo queue with attachments |
|
|
92
|
+
| `reasoning` | Display AI reasoning and thought processes |
|
|
93
|
+
| `shimmer` | Text shimmer animation effect |
|
|
94
|
+
| `sources` | Source attribution component |
|
|
95
|
+
| `suggestion` | Quick action suggestions |
|
|
96
|
+
| `task` | Task completion tracking |
|
|
97
|
+
| `tool` | Tool usage visualization |
|
|
98
|
+
| **Workflow** | |
|
|
99
|
+
| `canvas` | ReactFlow canvas for workflow visualizations |
|
|
100
|
+
| `connection` | Connection line component for workflow edges |
|
|
101
|
+
| `controls` | Flow controls for canvas (zoom, fit view, etc.) |
|
|
102
|
+
| `edge` | Edge component for connections between workflow nodes |
|
|
103
|
+
| `node` | Node component for workflow graphs |
|
|
104
|
+
| `panel` | Panel component for canvas overlays |
|
|
105
|
+
| `toolbar` | Node toolbar for workflow elements |
|
|
106
|
+
| **Vibe-Coding** | |
|
|
107
|
+
| `artifact` | Display a code or document |
|
|
108
|
+
| `web-preview` | Embedded web page previews |
|
|
109
|
+
| **Documentation** | |
|
|
110
|
+
| `open-in-chat` | Open in chat button for a message |
|
|
111
|
+
| **Utilities** | |
|
|
112
|
+
| `code-block` | Syntax-highlighted code display with copy functionality |
|
|
113
|
+
| `image` | AI-generated image display component |
|
|
114
|
+
| `loader` | Loading states for AI operations |
|
|
98
115
|
|
|
99
116
|
## How It Works
|
|
100
117
|
|
|
@@ -119,6 +136,22 @@ For the best experience, we recommend:
|
|
|
119
136
|
2. **CSS Variables**: Use shadcn-vue's CSS Variables mode for theming
|
|
120
137
|
3. **TypeScript**: Enable TypeScript for better development experience
|
|
121
138
|
|
|
139
|
+
## Contributing
|
|
140
|
+
|
|
141
|
+
If you'd like to contribute to AI Elements Vue, please follow these steps:
|
|
142
|
+
|
|
143
|
+
1. Fork the repository
|
|
144
|
+
2. Create a new branch
|
|
145
|
+
3. Make your changes to the components in `packages/elements`.
|
|
146
|
+
4. Open a PR to the `main` branch.
|
|
147
|
+
|
|
148
|
+
## 🙏 Acknowledgments
|
|
149
|
+
|
|
150
|
+
This project draws inspiration from several excellent projects:
|
|
151
|
+
|
|
152
|
+
- **[shadcn-vue](https://www.shadcn-svelte.com/)** - UI component foundation
|
|
153
|
+
- **[Vercel AI Elements](https://vercel.com/changelog/introducing-ai-elements)** - AI component concepts
|
|
154
|
+
|
|
122
155
|
---
|
|
123
156
|
|
|
124
|
-
Made with ❤️ by [
|
|
157
|
+
Made with ❤️ by [vuepont](https://github.com/vuepont)
|
package/index.js
CHANGED
|
@@ -29,7 +29,7 @@ if (args.length >= 2 && args[0] === 'add') {
|
|
|
29
29
|
const component = args[1]
|
|
30
30
|
const targetUrl = new URL(`/${component}.json`, 'https://registry.ai-elements-vue.com').toString()
|
|
31
31
|
|
|
32
|
-
const fullCommand = `${commandPrefix} shadcn-vue@
|
|
32
|
+
const fullCommand = `${commandPrefix} shadcn-vue@latest add ${targetUrl}`
|
|
33
33
|
const result = spawnSync(fullCommand, {
|
|
34
34
|
stdio: 'inherit',
|
|
35
35
|
shell: true,
|
|
@@ -56,7 +56,7 @@ else {
|
|
|
56
56
|
new URL(`/${item.name}.json`, 'https://registry.ai-elements-vue.com').toString(),
|
|
57
57
|
)
|
|
58
58
|
|
|
59
|
-
const fullCommand = `${commandPrefix} shadcn-vue@
|
|
59
|
+
const fullCommand = `${commandPrefix} shadcn-vue@latest add ${componentUrls.join(' ')}`
|
|
60
60
|
const result = spawnSync(fullCommand, {
|
|
61
61
|
stdio: 'inherit',
|
|
62
62
|
shell: true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ai-elements-vue",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "AI Elements Vue is a component library and custom registry built on top of shadcn-vue to help you build AI-native applications faster.",
|
|
6
6
|
"license": "MIT",
|