本文來(lái)分享開(kāi)發(fā) AI 應(yīng)用必備的 js 工具庫(kù)，幫助你更好地迎接 AI 時(shí)代的前端開(kāi)發(fā)浪潮。

UI 組件庫(kù)

Ant Design X

Ant Design X 是遵循 Ant Design 設(shè)計(jì)體系的一個(gè) React UI 庫(kù)，用于構(gòu)建由 AI 驅(qū)動(dòng)的界面，一鍵接入智能對(duì)話組件與 API 服務(wù)。目前，提供了 13 個(gè)用于 AI 應(yīng)用開(kāi)發(fā)的組件，可以滿足很多 AI 場(chǎng)景。

Github：https://github.com/ant-design/x

LangUI

LangUI 以 Tailwind CSS 為基礎(chǔ)，提供了超過(guò) 60 個(gè)針對(duì) AI 和 GPT 項(xiàng)目的免費(fèi)組件。它不需要安裝，只需要在組件文檔中復(fù)制需要的組件的代碼，并粘貼到項(xiàng)目中即可。

Github：https://github.com/LangbaseInc/langui

SDK

AI SDK

AI SDK 是一個(gè)由 Vercel 推出的 TypeScript 工具包，旨在幫助開(kāi)發(fā)人員使用 React、Next.js、Vue、Svelte、Node.js 等技術(shù)構(gòu)建 AI 驅(qū)動(dòng)的應(yīng)用。SDK 內(nèi)置了很多 AI 模型的適配器。目前，AI SDK 的周下載量達(dá)到了 56w+。

Github：https://github.com/vercel/ai

One API

通過(guò)標(biāo)準(zhǔn)的 OpenAI API 格式訪問(wèn)所有的大模型，支持 Azure、Anthropic Claude、Google PaLM 2 & Gemini、智譜 ChatGLM、百度文心一言、訊飛星火認(rèn)知、阿里通義千問(wèn)、360 智腦以及騰訊混元，可用于二次分發(fā)管理 key，僅單可執(zhí)行文件，已打包好 Docker 鏡像，一鍵部署，開(kāi)箱即用。

Github：https://github.com/songquanpeng/one-api

OpenAI SDK

為 TypeScript 或 JavaScript 提供了方便訪問(wèn) OpenAI REST API 的途徑。目前，OpenAI SDK的周下載量達(dá)到了 250w+。

import OpenAI from 'openai';

const client = new OpenAI({
  apiKey: process.env['OPENAI_API_KEY'],
});

async function main() {
  const chatCompletion = await client.chat.completions.create({
    messages: [{ role: 'user', content: 'Say this is a test' }],
    model: 'gpt-4o',
  });
}

main();

Github：https://github.com/openai/openai-node

Google AI SDK

Google AI JavaScript SDK 是 JavaScript 開(kāi)發(fā)人員使用 Gemini API 進(jìn)行開(kāi)發(fā)的最便捷方式。Gemini API 允許訪問(wèn)由 Google DeepMind 創(chuàng)建的 Gemini 模型。

const { GoogleGenerativeAI } = require("@google/generative-ai");

const genAI = new GoogleGenerativeAI(process.env.API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

const prompt = "Does this look store-bought or homemade?";
const image = {
  inlineData: {
    data: Buffer.from(fs.readFileSync("cookie.png")).toString("base64"),
    mimeType: "image/png",
  },
};

const result = await model.generateContent([prompt, image]);
console.log(result.response.text());

Github：https://github.com/google-gemini/generative-ai-js

AI 框架

Mastra

Mastra 是一個(gè)專注于構(gòu)建 AI 應(yīng)用的 TypeScript 框架，旨在幫助開(kāi)發(fā)者快速構(gòu)建 AI 應(yīng)用和功能。它提供了一系列基礎(chǔ)組件，包括工作流、代理、檢索增強(qiáng)型生成（RAG）、集成、同步和評(píng)估（evals）。這些組件使得開(kāi)發(fā)者能夠輕松地集成和管理 AI 模型，同時(shí)構(gòu)建復(fù)雜的工作流和代理系統(tǒng)。

Github：https://github.com/mastra-ai/mastra。