Skip to content

Commit bf4cc4f

Browse files
cwandevcwandev
committed
chore: update README.md
1 parent 6dccc55 commit bf4cc4f

File tree

3 files changed

+120
-47
lines changed

3 files changed

+120
-47
lines changed

‎README.md‎

Lines changed: 64 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
1-
# AI Elements Vue
2-
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 the project has the author’s encouragement and support.** <br> This is a project born out of the need for a similar project for the Vue ecosystem.
1+
<div align="center">
2+
<img src="./media/cover.png" >
3+
</div>
4+
5+
<br />
6+
7+
<div align="center">
8+
<a href="https://www.npmjs.com/package/ai-elements-vue" target="\_parent">
9+
<img alt="" src="https://img.shields.io/npm/dm/ai-elements-vue.svg" />
10+
</a>
11+
<a href="#badge">
12+
<img src="https://img.shields.io/github/v/release/vuepont/ai-elements-vue" alt="Release"/>
13+
</a>
14+
<a href="https://github.com/vuepont/ai-elements-vue" target="\_parent">
15+
<img alt="" src="https://img.shields.io/github/stars/vuepont/ai-elements-vue.svg?style=social&label=Star" alt="GitHub stars" />
16+
</a>
17+
</div>
618

719
## Overview
820

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.
21+
[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.
1022

1123
## Installation
1224

@@ -53,6 +65,7 @@ npx ai-elements-vue@latest add <component-name>
5365
```
5466

5567
Examples:
68+
5669
```bash
5770
# Install the message component
5871
npx ai-elements-vue@latest add message
@@ -80,23 +93,43 @@ npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json
8093

8194
AI Elements Vue includes the following components:
8295

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 |
96+
| Component | Description |
97+
| ------------------ | ------------------------------------------------------- |
98+
| **Chatbot** | |
99+
| `chain-of-thought` | Display AI reasoning and thought processes |
100+
| `checkpoint` | Conversation checkpoint component |
101+
| `confirmation` | Tool execution approval workflows |
102+
| `context` | Display Context consumption |
103+
| `conversation` | Container for chat conversations |
104+
| `inline-citation` | Inline source citations |
105+
| `message` | Individual chat messages with avatars |
106+
| `model-selector` | AI model selection component |
107+
| `plan` | Plan and task planning display component |
108+
| `prompt-input` | Advanced input component with model selection |
109+
| `queue` | Message and todo queue with attachments |
110+
| `reasoning` | Display AI reasoning and thought processes |
111+
| `shimmer` | Text shimmer animation effect |
112+
| `sources` | Source attribution component |
113+
| `suggestion` | Quick action suggestions |
114+
| `task` | Task completion tracking |
115+
| `tool` | Tool usage visualization |
116+
| **Workflow** | |
117+
| `canvas` | ReactFlow canvas for workflow visualizations |
118+
| `connection` | Connection line component for workflow edges |
119+
| `controls` | Flow controls for canvas (zoom, fit view, etc.) |
120+
| `edge` | Edge component for connections between workflow nodes |
121+
| `node` | Node component for workflow graphs |
122+
| `panel` | Panel component for canvas overlays |
123+
| `toolbar` | Node toolbar for workflow elements |
124+
| **Vibe-Coding** | |
125+
| `artifact` | Display a code or document |
126+
| `web-preview` | Embedded web page previews |
127+
| **Documentation** | |
128+
| `open-in-chat` | Open in chat button for a message |
129+
| **Utilities** | |
130+
| `code-block` | Syntax-highlighted code display with copy functionality |
131+
| `image` | AI-generated image display component |
132+
| `loader` | Loading states for AI operations |
100133

101134
## How It Works
102135

@@ -130,6 +163,13 @@ If you'd like to contribute to AI Elements Vue, please follow these steps:
130163
3. Make your changes to the components in `packages/elements`.
131164
4. Open a PR to the `main` branch.
132165

166+
## 🙏 Acknowledgments
167+
168+
This project draws inspiration from several excellent projects:
169+
170+
- **[shadcn-vue](https://www.shadcn-svelte.com/)** - UI component foundation
171+
- **[Vercel AI Elements](https://vercel.com/changelog/introducing-ai-elements)** - AI component concepts
172+
133173
---
134174

135-
Made with ❤️ by [cwandev](https://github.com/cwandev)
175+
Made with ❤️ by [vuepont](https://github.com/vuepont)

‎media/cover.png‎

61.6 KB
Loading

‎packages/cli/README.md‎

Lines changed: 56 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -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-
51
## Overview
62

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 or Nuxt.js project.
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.
84

95
## Installation
106

@@ -51,6 +47,7 @@ npx ai-elements-vue@latest add <component-name>
5147
```
5248

5349
Examples:
50+
5451
```bash
5552
# Install the message component
5653
npx ai-elements-vue@latest add message
@@ -78,23 +75,43 @@ npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json
7875

7976
AI Elements Vue includes the following components:
8077

81-
| Component | Status | Description |
82-
|-----------|--------|-------------|
83-
| `message` | ✅ | Individual chat messages with avatars |
84-
| `conversation` | ✅ | Container for chat conversations |
85-
| `response` | ✅ | Formatted AI response display |
86-
| `prompt-input` | ✅ | Advanced input component with model selection |
87-
| `actions` | ✅ | Interactive action buttons for AI responses |
88-
| `branch` | ✅ | Branch visualization for conversation flows |
89-
| `code-block` | ✅ | Syntax-highlighted code display with copy functionality |
90-
| `image` | ✅ | AI-generated image display component |
91-
| `inline-citation` | ❌ | Inline source citations |
92-
| `loader` | ✅ | Loading states for AI operations |
93-
| `reasoning` | ❌ | Display AI reasoning and thought processes |
94-
| `source` | ❌ | Source attribution component |
95-
| `suggestion` | ✅ | Quick action suggestions |
96-
| `task` | ❌ | Task completion tracking |
97-
| `tool` | ❌ | Tool usage visualization |
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 |
98115

99116
## How It Works
100117

@@ -119,6 +136,22 @@ For the best experience, we recommend:
119136
2. **CSS Variables**: Use shadcn-vue's CSS Variables mode for theming
120137
3. **TypeScript**: Enable TypeScript for better development experience
121138

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+
122155
---
123156

124-
Made with ❤️ by [cwandev](https://github.com/cwandev)
157+
Made with ❤️ by [vuepont](https://github.com/vuepont)

0 commit comments

Comments
 (0)