阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 06月26日

從 Scratch 開始建立聊天機器人並對 UI 進行 Vibe 編碼💃

大家好，

希望你還記得我。（是嗎？請在評論區告訴我。）

在這篇部落格中，我將討論 Radhika：自適應推理與智慧助理。它提供六種不同模式的專業協助：一般模式、生產力模式、健康模式、學習模式、創意模式和 BFF 模式。

{% 嵌入 https://radhika-sharma.vercel.app/ %}

（嘗試一下，提供回饋和建議，請求更改）

🛠️ 技術棧

前端

框架：帶有 App Router 和 React 18 的 Next.js 14
樣式：帶有自訂設計系統的 Tailwind CSS
元件：shadcn/ui元件庫
圖示：Lucide React 圖示庫
3D 圖形：Three.js 用於粒子視覺化
動畫：CSS 過渡和關鍵影格動畫

人工智慧與後端

AI 整合：Vercel AI SDK 用於統一 LLM 存取
提供者：Groq、Google Gemini、OpenAI、Claude
語音：WebKit 語音辨識與合成 API
儲存：用於聊天持久化和設定的瀏覽器本地存儲
API ：用於安全 LLM 通訊的 Next.js API 路由

發展

語言：TypeScript，用於型別安全
建置：經過最佳化的 Next.js 建置系統
部署：Vercel 就緒，支援環境變數
效能：優化捆綁拆分和延遲加載

🚀 實作主要邏輯

本節詳細介紹了app/api/chat/route.ts端點如何處理請求、選擇模型、應用系統提示以及使用不同的 AI 提供者串流回應。

1. 解析請求

請求處理程序首先解析傳入的 POST 請求的 JSON 主體：

const body = await req.json();
const { messages, mode = "general", provider = "groq", apiKey } = body;

messages ：客戶端發送的對話歷史記錄。
mode ：決定使用哪種系統提示（例如， bff 、 learning等）。
provider ：指定要使用的 AI 後端（ groq 、 openai 、 claude 、 gemini ）。
apiKey ：如果需要使用者金鑰，則對於 OpenAI 和 Claude 是必要的。

程式碼還驗證messages陣列是否存在且非空。

2. 指派系統提示

根據所選模式，選擇系統提示來指導助手的個性和目的：

const systemPrompt = SYSTEM_PROMPTS[mode] || SYSTEM_PROMPTS.general;

模式範例包括：

productivity
bff
creative
wellness

3. 路由到正確的供應商

provider欄位決定使用哪個 AI 模型後端：

Gemini （ google ）：使用 Google 的 Gemini 2.0 模型。
OpenAI ：使用 GPT 模型（如gpt-4o 、 gpt-3.5-turbo ）。
Claude ：使用人擇模型（如claude-3-sonnet ）。
Groq ：預設為llama-3和qwen等模型。

每個提供者都有自訂邏輯來實例化模型、處理錯誤並使用以下方式串流回應：

await streamText({...})

4. 模型選擇（僅限 Groq）

如果提供者是groq ，則模型選擇是動態的。它會分析最後一條訊息以確定任務類型：

if (lastMessage.includes("analyze") || lastMessage.includes("plan")) {
  modelType = "reasoning";
} else if (lastMessage.includes("creative") || lastMessage.includes("design")) {
  modelType = "creative";
} else {
  modelType = "fast";
}

RADHIKA 根據您的查詢複雜度自動選擇最佳模型：

// Determine which model to use based on conversation context
let modelType = "fast"; // llama-3.1-8b-instant for quick responses

// Use reasoning model for complex analytical tasks
if (query.includes("analyze", "compare", "plan", "strategy", "decision", "problem")) {
  modelType = "reasoning"; // llama-3.3-70b-versatile
}

// Use creative model for artistic and innovative tasks
if (query.includes("creative", "brainstorm", "idea", "write", "design", "story")) {
  modelType = "creative"; // qwen/qwen3-32b
}

模型配置

在API路由中自訂模型選擇：

const MODELS = {
  groq: {
    fast: "llama-3.1-8b-instant",
    reasoning: "llama-3.3-70b-versatile", 
    creative: "qwen/qwen3-32b"
  },
  gemini: { default: "gemini-2.0-flash" },
  openai: { default: "gpt-4o" },
  claude: { default: "claude-3-5-sonnet-20241022" }
}

然後選擇適當的模型（ reasoning 、 creative或fast ）並用於回應。