AI Elements Vue，幫助你更快的建立 AI 應用程式

AI Elements Vue，幫助你更快的構建 AI 應用程式

大家好，我是 vue3-vant-mobile 的作者，也是多個 Vue 社區專案的長期貢獻者。

最近兩個月我主要在折騰一個新專案：AI Elements Vue，一個面向 AI Chatbot 場景的 Vue 元件庫。

這個專案曾上過阮一峰老師的科技週刊，算是被認真看過的一次。

很多前端都有做元件庫的想法，我也是一樣，只是這次做的方向稍微有點不一樣。

它基於 shadcn-vue 和 tailwindcss，同時配了一套自己的註冊表服務，所有元件從我們自己的註冊表中獲取。

最早在 shadcn-vue 支持自定義註冊表時，我就在琢磨做一套 Chat 元件庫了，再加上我一直在寫各種 chat 相關元件。直到我在 Vercel 看到了 ai-elements 專案，乾脆不再猶豫——於是就有了完全對標的 AI Elements Vue。

簡單講，AI Elements Vue 是一組圍繞聊天場景做擴展的元件集合，但還是沿用 shadcn 的那套設計和工具鏈。

這意味著你能享受到 shadcn 的全部優點：

高可自訂：樣式和互動都能深度改造
按需引入：按需引入，用多少拿多少
完全透明：所有元件都可以修改，而不是黑盒封裝

和社區裡已有的 ant-design-vue-x、element-plus-x 等 AI 元件庫相比，我們是從 shadcn 體系出發，在同一套設計系統和工具鏈上擴展 AI 場景元件。

除了常規的聊天視窗，我們也做了很多你在 ChatGPT、Cursor 裡常見的那種互動形態，對應的元件基本都能找到。這也是叫「AI 元素」的原因——更像是一盒可以隨手拼搭的積木。

另外，我們還提供了 MCP 服務，你在專案裡接不同家的模型和服務時，會省不少時間。

下面是目前已經有的元件列表，後面也會根據大家的反饋慢慢往上加。

元件	描述
Chatbot
`actions`	AI 回覆的互動操作按鈕
`branch`	會話流程的分支可視化
`chain-of-thought`	展示 AI 的推理鏈路和思考過程
`code-block`	帶語法高亮與複製功能的程式碼顯示
`context`	展示上下文消耗情況
`conversation`	聊天會話的容器元件
`image`	AI 生成圖片的展示元件
`inline-citation`	行內來源引用
`loader`	AI 操作的載入狀態
`message`	帶頭像的單條聊天消息
`open-in-chat`	將消息在聊天中打開的按鈕
`plan`	計畫與任務規劃展示元件
`prompt-input`	帶模型選擇的高級輸入元件
`queue`	支援附件的消息與待辦隊列
`reasoning`	展示 AI 推理和思考過程
`response`	格式化的 AI 回覆展示
`shimmer`	文字閃爍炫光效果
`sources`	來源引用展示
`suggestion`	快捷操作建議
`task`	任務完成進度追蹤
`tool`	工具使用可視化
`confirmation`	工具執行前的確認流程
Vibe-Coding
`artifact`	展示程式碼或文檔的容器
`web-preview`	內嵌網頁預覽
Workflow
`canvas`	用於工作流程可視化的 VueFlow 畫布
`connection`	工作流程連線元件
`controls`	畫布控制（縮放、適配視圖等）
`edge`	連接工作流程節點的邊元件
`node`	工作流程圖的節點元件
`panel`	畫布覆蓋層面板元件
`toolbar`	工作流程節點的工具列

下面說說使用，有一些必要的前提條件。

你需要先安裝 Node.js 18 或以上版本。
AI Elements Vue 基於 shadcn-vue，所以你需要先安裝 shadcn-vue，以及設定好 tailwindcss。
最後安裝 AI SDK，因為元件會用到 AI SDK。

我們有自己的註冊表和 cli，你可以直接使用我們的 cli 安裝元件，也可以使用 shadcn-vue 的 cli 安裝元件。

比如使用我們的 cli 安裝 message 元件:

npx ai-elements-vue@latest add message

或者使用 shadcn-vue 的 cli 安裝 message 元件:

npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json

你也可以一次性安裝所有元件：

npx ai-elements-vue@latest

是不是比較方便。生成的元件會和 shadcn-vue 的元件一樣，被放在了 components/ui 目錄下。

目前 AI Elements Vue 的元件會放置在 components/ai-elements 目錄下，未來會移動到 components/ui 目錄下。

然後你可以結合其他 AI 元件庫直接在元件中使用，比如：

<template>
  <div class="h-[498px] rounded-xl border">
    <Conversation class="relative h-full">
      <ConversationContent class="space-y-2">
        <Message v-for="(m, idx) in visibleMessages" :key="m.key" :from="idx % 2 === 0 ? 'user' : 'assistant'">
          <MessageContent>{{ m.value }}</MessageContent>
          <MessageAvatar :src="m.avatar" :name="m.name" />
        </Message>
      </ConversationContent>
      <ConversationScrollButton />
    </Conversation>
  </div>
</template>

下週，我們將發佈 v1 版本，主要是更新文件和增加範例，並修復一些已知問題。

最後，歡迎大家來試用 AI Elements Vue，並提出建議和反饋。如果大家喜歡，請給個 star 支持一下，謝謝。