ai-elements
建立 AI 聊天介面
使用預建、可組合的 UI 元素建立現代 AI 聊天介面元件,這些元素遵循 shadcn/ui 模式和 Vercel AI SDK 慣例。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「ai-elements」。 新增用於顯示 AI 回應的訊息元件
預期結果:
元件將建立在 components/ai-elements/message.tsx,包含 Message、MessageContent 和 MessageResponse 子元件。使用者訊息和助理訊息使用 'from' prop 進行不同的樣式設定。
正在使用「ai-elements」。 為我的聊天新增檔案附件支援
預期結果:
建立用於顯示檔案附件的元件,提供預覽縮圖。支援圖片、PDF 和一般檔案,並提供下載連結。與對話流程整合。
正在使用「ai-elements」。 新增具有語法高亮的程式碼區塊
預期結果:
建立具有語言偵測、行號和複製到剪貼簿功能的 CodeBlock 元件。支援多種程式語言。
安全審計
安全This is a legitimate Vercel AI Elements UI component library. Static scanner flagged many findings that are false positives: markdown documentation uses backticks for code examples (not Ruby execution), and example components contain base64-encoded images which trigger C2/encryption false positives. All network access is for CDN resources. No actual security risks identified.
風險因素
⚙️ 外部命令 (2409)
📁 檔案系統存取 (6)
🌐 網路存取 (57)
🔑 環境變數 (9)
⚡ 包含腳本 (1)
品質評分
你能建構什麼
建立 AI 聊天應用程式
使用預建元件快速搭建完整的 AI 聊天介面,包含訊息氣泡、附件和串流回應。
建立開發者工具
新增程式碼執行顯示、終端輸出和工具結果面板,以建立類似 IDE 的 AI 編碼助理。
新增語音和媒體支援
將語音輸入、音訊播放和多媒體訊息處理整合到對話式 AI 介面中。
試試這些提示
使用 ai-elements 在我的聊天介面中新增訊息元件。我需要使用者 和助理訊息樣式,支援文字內容。
使用 ai-elements 附件元件在聊天中新增檔案附件支援。支援圖片和文件,並提供預覽縮圖。
使用 ai-elements 在我的 AI 聊天中新增串流回應顯示。包含打字指示器和漸進式文字渲染。
使用 ai-elements 新增具有語法高亮的程式碼區塊元件。包含複製按鈕和語言標籤。
最佳實務
- 使用元件組合模式 - 分別匯入子元件如 MessageContent 以控制渲染粒度
- 透過 className prop 進行自訂,而不是修改原始檔案 - 這樣更容易更新到新版本
- 使用 AI SDK 的 useChat hook 進行訊息狀態管理 - 元件設計為可立即配合使用
避免
- 直接修改原始元件檔案 - 破壞升級路徑,使更新困難
- 在沒有 AI SDK 整合的情況下使用元件 - 設計為與 useChat hook 配合使用以獲得完整功能
- 忽略 shadcn/ui 相依性 - 元件需要 Tailwind CSS 和 shadcn/ui 設定