AI Skills
ai-elements

ai-elements

熱門

使用 ai-elements 元件（對話、訊息、工具顯示、提示輸入等）建置 AI 聊天介面。當使用者想要建立聊天機器人、AI 助手 UI 或任何 AI 驅動的聊天介面時使用。

2172星標
246分支
更新於 2026/3/12
獲取技能源代碼

相關技能

prompt-optimizer23萬design-system11萬web-artifacts-builder15萬
SKILL.md
readonlyread-only
name
ai-elements
description

使用 ai-elements 元件（對話、訊息、工具顯示、提示輸入等）建置 AI 聊天介面。當使用者想要建立聊天機器人、AI 助手 UI 或任何 AI 驅動的聊天介面時使用。

AI Elements

AI Elements 是一個基於 shadcn/ui 的元件庫與自訂註冊表，幫助你更快地建置 AI 原生應用程式。它提供預先建置的元件，例如對話、訊息等。

安裝 AI Elements 很簡單，有幾種方式。你可以使用專用的 CLI 指令以獲得最快的設定，或者如果你已經採用 shadcn 的工作流程，也可以透過標準的 shadcn/ui CLI 整合。

重要： 所有 CLI 指令都應使用專案的套件執行器執行：npx ai-elements@latest、pnpm dlx ai-elements@latest 或 bunx --bun ai-elements@latest — 根據專案的 packageManager 選擇。以下範例使用 npx ai-elements@latest，但請替換為專案適用的執行器。

前置需求

在安裝 AI Elements 之前，請確保你的環境符合以下要求：

  • Node.js 18 或更新版本
  • 已安裝 AI SDK 的 Next.js 專案
  • 專案中已安裝 shadcn/ui。如果尚未安裝，執行任何安裝指令都會自動為你安裝。
  • 我們也強烈建議使用 AI Gateway，並將 AI_GATEWAY_API_KEY 加入 env.local，這樣你就不需要使用每個提供者的 API 金鑰。AI Gateway 每月還提供 $5 的使用額度，讓你可以實驗各種模型。你可以在此處取得 API 金鑰。

安裝元件

你可以使用 AI Elements CLI 或 shadcn/ui CLI 來安裝 AI Elements 元件。兩者都能達到相同結果：將所選元件的程式碼及任何需要的相依性加入你的專案。

CLI 會下載元件的程式碼，並將其整合到你的專案目錄中（通常在你的 components 資料夾下）。預設情況下，AI Elements 元件會加入 @/components/ai-elements/ 目錄（或你在 shadcn 元件設定中設定的任何資料夾）。

執行指令後，你應該會在終端機看到檔案已加入的確認訊息。接著你就可以在程式碼中使用該元件。

使用方式

安裝 AI Elements 元件後，你可以像使用其他 React 元件一樣匯入並在應用程式中使用。這些元件是作為你程式碼庫的一部分加入的（而非隱藏在函式庫中），因此使用起來非常自然。

範例

安裝 AI Elements 元件後，你可以在應用程式中像使用其他 React 元件一樣使用它們。例如：

"use client";

import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import { useChat } from "@ai-sdk/react";

const Example = () => {
  const { messages } = useChat();

  return (
    <>
      {messages.map(({ role, parts }, index) => (
        <Message from={role} key={index}>
          <MessageContent>
            {parts.map((part, i) => {
              switch (part.type) {
                case "text":
                  return (
                    <MessageResponse key={`${role}-${i}`}>
                      {part.text}
                    </MessageResponse>
                  );
              }
            })}
          </MessageContent>
        </Message>
      ))}
    </>
  );
};

export default Example;

在上面的範例中，我們從 AI Elements 目錄匯入 Message 元件，並將其包含在 JSX 中。然後，我們使用 MessageContent 和 MessageResponse 子元件來組合元件。你可以像自己編寫的元件一樣對其進行樣式設定或配置——由於程式碼位於你的專案中，你甚至可以開啟元件檔案來查看其運作方式或進行自訂修改。

擴充性

所有 AI Elements 元件都盡可能接受原始屬性。例如，Message 元件擴充了 HTMLAttributes<HTMLDivElement>，因此你可以傳遞任何 div 支援的 props。這使得擴充元件以加入自己的樣式或功能變得容易。

自訂化

安裝後，無需額外設定。元件的樣式（Tailwind CSS 類別）和腳本已整合完畢。你可以立即在應用程式中開始與元件互動。

例如，如果你想移除 Message 的圓角，可以前往 components/ai-elements/message.tsx 並移除 rounded-lg，如下所示：

export const MessageContent = ({
  children,
  className,
  ...props
}: MessageContentProps) => (
  <div
    className={cn(
      "flex flex-col gap-2 text-sm text-foreground",
      "group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:px-4 group-[.is-user]:py-3",
      className
    )}
    {...props}
  >
    <div className="is-user:dark">{children}</div>
  </div>
);

疑難排解

為什麼我的元件沒有樣式？

請確保你的專案已正確設定 shadcn/ui 與 Tailwind 4——這表示要有一個匯入 Tailwind 並包含 shadcn/ui 基礎樣式的 globals.css 檔案。

我執行了 AI Elements CLI，但專案中沒有加入任何東西

請再次確認：

  • 你目前的工作目錄是專案的根目錄（package.json 所在位置）。
  • 你的 components.json 檔案（如果使用 shadcn 風格的設定）已正確設定。
  • 你使用的是最新版本的 AI Elements CLI：
npx ai-elements@latest

如果仍然無效，請隨時在 GitHub 上開啟 issue。

主題切換無效——我的應用程式停留在淺色模式

請確保你的應用程式使用與 shadcn/ui 和 AI Elements 預期相同的 data-theme 系統。預設實作會在 <html> 元素上切換 data-theme 屬性。請確保你的 tailwind.config.js 相應地使用 class 或 data- 選擇器。

元件匯入失敗，顯示「找不到模組」

檢查檔案是否存在。如果存在，請確保你的 tsconfig.json 中有正確的 @/ 路徑別名，例如：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

我的 AI 程式碼助手無法存取 AI Elements 元件

  1. 確認你的設定檔語法是有效的 JSON。
  2. 檢查檔案路徑是否正確對應你的 AI 工具。
  3. 在進行變更後重新啟動你的程式碼助手。
  4. 確保你有穩定的網路連線。

仍然卡住？

如果以上解答都沒有幫助，請在 GitHub 上開啟 issue，會有人樂意協助你。

可用元件

請參閱 references/ 資料夾以取得每個元件的詳細文件。