2024 年是瘋狂的一年，圍繞著人工智慧和軟體開發發生了很多事情。我相信到 2025 年這只會變得更加有趣。

Javascript 仍然是全球開發者建立可投入生產的應用程式的首選，並且到 2025 年仍將如此。

因此，我收集了 25 個儲存庫，它們在 2024 年顯示出巨大潛力，並且肯定會在 2025 年蓬勃發展。

我將所有這些工具分為以下類別。

1. 人工智慧和LLMs工具

2. [框架與建構工具] (#frameworks-and-build-tools)

3. 即時和事件驅動系統

4. 開發者體驗與測試

5. 設計元件和 UI

人工智慧和LLMs工具

1. Composition 👑：AI代理的整合平台

人工智慧代理現在已成為主流，許多公司正在建立代理作為核心產品或用於內部自動化。然而，人工智慧模型無法存取外部應用程式。 Composio 填補了這一空白；它支援銷售、CRM、編碼、生產力等垂直領域的 250 多個應用程式。

只需幾行程式碼，您就可以將 AI 代理連接到多個 SaaS 應用程式，例如 GitHub、Jira、Salesforce、Gmail 等，而無需自行處理用戶身份驗證流程。

它對 Javascript/Typescript 和 Python 具有一流的支援。

開始使用它非常簡單。

npm install composio-core openai

連結您的 GitHub 帳戶

import { Composio } from "composio-core";

const client = new Composio({ apiKey: "<your-api-key>" });

const entity = await client.getEntity("Jessica");
const connection = await entity.initiateConnection({appName: 'github'});

console.log(`Open this URL to authenticate: ${connection.redirectUrl}`);

初始化 Composition 和 OpenAI

import { OpenAI } from "openai";
import { OpenAIToolSet } from "composio-core";

const openai_client = new OpenAI();
const composio_toolset = new OpenAIToolSet();

取得 GitHub 操作並將其傳遞給 LLM

const tools = await composio_toolset.getTools({
actions: ["github_star_a_repository_for_the_authenticated_user"]
});

const instruction = "Star the repo composiohq/composio on GitHub";

const response = await openai_client.chat.completions.create({
model: "gpt-4o",
messages: [{ role: "user", content: instruction }],
tools: tools,
tool_choice: "auto",
});

執行工具呼叫。

const result = await composio_toolset.handleToolCall(response);
console.log(result);

該文件提供了有關 Composio 的更多資訊、它的工作原理以及製作可用於生產的代理的重要概念。

{% cta https://dub.composio.dev/77b7JH5 %}為 Composio 儲存庫加註星標 ⭐{% endcta %}

2. Vercel AI SDK ：在 Typescript 中建立 AI Web 應用程式

如果我今天要建立一個由 AI 驅動的 Web 應用程式，Vercel AI SDK 將是我的第一選擇。它旨在讓開發人員的工作變得更輕鬆，支援 React、Next.js、Vue 和 SvelteKit 等框架。

真正突出的是它如何簡化與LLMs的合作，處理重複的設置，並提供使建立互動式 UI 變得輕而易舉的元件。讓我們看看它提供了什麼以及如何開始。

它由三個部分組成，

• AI SDK Core ：用於產生文字、結構化資料以及與LLMs進行工具互動的單一 API。

• AI SDK UI ：獨立於框架的掛鉤，用於快速建立聊天和產生 UI。

• AI SDK RSC ：使用 React Server Components (RSC) 串流傳輸產生 UI 的函式庫。

首先，安裝該庫。

npm install ai

安裝您選擇的模型提供者。

npm install @ai-sdk/openai

呼叫OpenAI API。

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai'; // Ensure OPENAI_API_KEY environment variable is set

async function main() {
  const { text } = await generateText({
    model: openai('gpt-4-turbo'),
    system: 'You are a friendly assistant!',
    prompt: 'Why is the sky blue?',
  });

  console.log(text);
}

main();

有關 Vercel AI SDK 的更多訊息，請存取他們的文件。

3. LangGraph JS ：建立生產就緒的代理，例如圖表

如果您正在深入研究 AI 代理，LangGraph JS 將會改變遊戲規則。它允許您使用基於圖形的方法建立複雜的人工智慧工作流程 - 想想人工智慧代理的狀態機。

入門非常簡單：

npm install langgraph

建立您的第一個代理：

import { Graph } from 'langgraph';
import { OpenAI } from 'langchain';

const model = new OpenAI({});

const graph = new Graph({
  nodes: {
    analyze: async ({ input }) => {
      return model.predict(`Analyze this: ${input}`);
    },
    respond: async ({ input }) => {
      return model.predict(`Generate response for: ${input}`);
    }
  },
  edges: {
    analyze: ['respond'],
    respond: ['analyze']
  }
});

const result = await graph.invoke("What's the weather like?");

美妙之處在於它如何處理複雜的工作流程——每個節點都可以是 LLM 呼叫、工具或任何自訂邏輯。這使得它非常適合建立客戶服務機器人、研究助理或任何多步驟人工智慧工作流程！

4. CopilotKit ：將人工智慧副駕駛加入到您的網路應用程式中

如果您想將類似 GitHub Copilot 的功能加入到您的應用程式中，CopilotKit 會讓這件事變得異常簡單。這就像為您的用戶配備了一位人工智慧結對程式設計師。

安裝：

npm install @copilotkit/react-core @copilotkit/react-ui

將副駕駛加入到您的應用程式：

import { CopilotKit, useCopilotChat } from '@copilotkit/react-ui';

function App() {
  const { messages, sendMessage } = useCopilotChat({
    context: "This is a code editor for JavaScript",
  });

  return (
    <CopilotKit>
      <div className="editor">
        <CopilotChat
          messages={messages}
          onSendMessage={sendMessage}
          placeholder="Ask for code suggestions..."
        />
      </div>
    </CopilotKit>
  );
}

最酷的部分？它不僅適用於程式碼 - 您可以為任何網域自訂它。無論您是建立設計工具、寫作助理還是資料分析平台，CopilotKit 都可以新增智慧建議。

5. LanceDB ：人工智慧應用程式的高效能向量資料庫

LanceDB 正在解決人工智慧開發中最令人頭痛的問題之一：高效儲存和查詢向量嵌入。它就像向量搜尋的 SQLite，但速度非常快。

開始使用：

npm install lancedb

基本用法：

import { connect } from 'lancedb';

async function main() {
// Connect to a database (creates if not exists)
  const db = await connect('my-vectors.db');

// Create a table
  const table = await db.createTable('embeddings', [
    { vector: [1.1, 2.3, 3.2], text: 'Hello' },
    { vector: [4.5, 5.2, 6.1], text: 'World' }
  ]);

// Search for similar vectors
  const results = await table.search([1.0, 2.0, 3.0])
    .limit(5)
    .execute();
}

它有何特別之處？它專為現代人工智慧工作流程而設計：

• 令人難以置信的快速最近鄰搜尋

• 適用於任何嵌入模型

• 支援記憶體和基於磁碟的存儲

• 非常適合語義搜尋、推薦系統和人工智慧應用

您甚至可以將它與流行的嵌入提供者一起使用：

javascript
Copy
import { OpenAIEmbeddings } from 'langchain/embeddings/openai';

const embeddings = new OpenAIEmbeddings();
const vector = await embeddings.embedQuery('Hello world');
await table.add({ vector, text: 'Hello world' });

框架和建構工具

6. Encore ：具有自動化基礎架構的開發人員優先後端框架

雲端服務非常適合建立可擴展的應用程式。然而，複雜的基礎架構管理、不一致的 API 和分散的 DevOps 流程很快就會變得混亂。

Encore 透過提供整合類型安全後端框架、自動基礎架構配置和 DevOps 自動化的統一開發平台來簡化這種混亂情況。

它在 Golang 和 Typescript 中都可使用。

透過安裝 CLI 開始使用 Encore。

curl -L https://encore.dev/install.sh | bash

建立一個應用程式。

encore app create

這將配置您的免費帳戶，允許您選擇應用程式的名稱，並選擇Hello World範本。

這將使用您選擇的應用程式名稱在新資料夾中建立具有簡單 REST API 的範例應用程式。

在編輯器中開啟該檔案。

// Service hello implements a simple hello world REST API.
package hello

import (
    "context"
)

// This simple REST API responds with a personalized greeting.
//
//encore:api public path=/hello/:name
func World(ctx context.Context, name string) (*Response, error) {
    msg := "Hello, " + name + "!"
    return &Response{Message: msg}, nil
}

type Response struct {
    Message string
}

有關更多訊息，請參閱他們的文件。

7. HTMX ：無需 JS 的動態 Web 應用程式的 HTML 擴充框架

HTMX 正在為 HTML 帶來性感。它使您無需編寫一行 JavaScript 即可建立現代 Web 應用程式。聽起來好得令人難以置信？看看這個：

將其加入到您的專案中：

<script src="https://unpkg.com/[email protected]"></script>

將任何無聊的形式變成動態元件：

<button hx-post="/like"
        hx-trigger="click"
        hx-target="#like-count"
        hx-swap="innerHTML">
  Like
</button>
<span id="like-count">0</span>

就是這樣！ HTMX 處理 AJAX 請求、更新 DOM 並管理載入狀態。當您想要現代互動性而不需要 JavaScript 的複雜性時，它是完美的選擇。

8. Val Town ：用於執行無伺服器 JavaScript 的社交運算平台

Val Town 就像 GitHub Gists 與一些社交媒體結合了無伺服器功能。它正在改變我們對共享和執行 JavaScript 程式碼的看法。

創造一個新的 Val（這就是他們所說的函數）：

// @username/greet
export function greet(name) {
  return `Hello, ${name}!`
}

導入並使用別人的Vals：

import { greet } from "@friend/greet"
export function welcome() {
  return greet("Val Town")
}

最好的部分？每個 Val 都是一個 API 端點，可以像 cron 作業一樣進行排程。它非常適合自動化、機器人和快速實驗！

9. Deno 2 ：具有內建 TypeScript 支援的 JavaScript 安全執行時

Deno 2 是 Ryan Dahl 對 JavaScript 執行階段的第二次嘗試（是的，就是建立 Node.js 的同一個人）。它與 Node.js 類似，但具有從頭開始內建的現代功能和安全性。

建立一個簡單的伺服器：

typescript
Copy
// server.ts
Deno.serve((_req) => {
  return new Response("Welcome to Deno!");
});

執行它：

deno run --allow-net server.ts

TypeScript 開箱即用，無需管理 package.json，且標準函式庫非常全面。另外，內建的測試和格式化工具意味著需要管理的依賴項更少！

10. Turborepo ：JS Monorepos 的高效能建置系統

如果您曾經管理過單一儲存庫，您就會知道建置時間可能...具有挑戰性。 Turborepo 透過智慧型快取和平行執行改變了這一點。

建立一個新的單聲道儲存庫：

npx create-turbo@latest

您的 Turbo.json 可能如下所示：

  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "inputs": ["src/**/*.tsx", "test/**/*.tsx"]
    }
  }
}

執行您的任務：

turbo run build test

Turborepo 會記住它之前建立的內容，並且只重建更改過的內容。您的建造時間從茶歇時間縮短到眨眼間的時間！

即時和事件驅動系統

11. Socket.io：Web應用程式的雙向即時通訊庫

如果您曾經需要為網路應用程式加入即時功能，您可能聽說過 Socket.io。它的特別之處在於它如何處理即時通訊的所有棘手部分。

入門非常簡單：

npm install socket.io

伺服器設定：

const io = require('socket.io')(3000);

io.on('connection', socket => {
  console.log('a user connected');
  socket.on('chat message', msg => {
    io.emit('chat message', msg);// Send to all connected clients
  });
});

客戶端：

import io from 'socket.io-client';
const socket = io('http://localhost:3000');

socket.emit('chat message', 'Hello!');
socket.on('chat message', msg => {
  console.log('received:', msg);
});

最好的部分？它會自動處理重新連接，甚至在不支援 WebSocket 的瀏覽器中也能正常運作！

12. Feather.js ：現代應用程式的即時 API 框架

將 Feathers.js 視為您的全端最好的朋友。這就像 Express.js 遇到了 Socket.io，他們決定一起建造一些很棒的東西。無論您需要 REST API、即時更新還是兩者兼而有之，Feathers 都能滿足您的需求。

以下是您如何開始：

npm create feathers my-app
cd my-app
npm start

建立即時服務非常簡單：

app.use('messages', {
  async find() {
    return [{ text: 'Hello world' }];
  },
  async create(data) {
    return data;// Will automatically notify real-time clients!
  }
});

13. Deepstream.io ：可擴展的即時資料同步引擎

Deepstream 是將即時資料同步、發布/訂閱訊息傳遞和 RPC 呼叫合併到一個套件中時所獲得的結果。它非常適合建立協作編輯器或多人遊戲等內容。

基本設定：

npm install @deepstream/client

在您的應用程式中使用它：

import { DeepstreamClient } from '@deepstream/client';
const client = new DeepstreamClient('localhost:6020');

// Real-time data sync
const record = client.record.getRecord('scores/player1');
record.set({ points: 100 });

// Subscribe to changes
record.subscribe(data => {
  console.log('Score updated:', data.points);
});

14.無伺服器框架：與雲端無關的無伺服器應用程式開發

是否曾經想過將功能部署到雲端而不處理所有基礎架構問題？這正是無伺服器框架所做的。它可與 AWS、Azure、Google Cloud 等搭配使用。

開始使用：

npm install -g serverless
serverless create --template aws-nodejs

您的第一個無伺服器功能：

module.exports.hello = async (event) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Hello World!' })
  };
};

使用簡單的方式進行部署：

serverless deploy

15. RabbitMQ ：分散式系統的健全訊息代理

雖然從技術上來說 RabbitMQ 並不是一個 JavaScript 工具，但它對於許多 Node.js 應用程式來說已經變得至關重要。它是訊息隊列的瑞士軍刀，非常適合服務之間可靠的訊息傳遞。

使用amqplib與 Node.js 一起使用非常簡單：

npm install amqplib

基本發布者：

const amqp = require('amqplib');

async function publish() {
  const connection = await amqp.connect('amqp://localhost');
  const channel = await connection.createChannel();
  const queue = 'tasks';

  await channel.assertQueue(queue);
  channel.sendToQueue(queue, Buffer.from('Hello RabbitMQ!'));
}

開發者體驗與測試

16. Vitest ：整合 Vite 的下一代測試框架

還記得執行測試意味著喝杯咖啡休息一下嗎？ Vitest 徹底改變了這個遊戲。它建置在 Vite 之上（是的，這也是使您的開發伺服器速度超快的那個），並且它在性能上得到了體現。

入門輕而易舉：

npm install -D vitest

建立您的第一個測試：

// calculator.test.js
import { expect, test } from 'vitest'
import { add } from './calculator'

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3)
})

最酷的部分？它開箱即用地支援 TypeScript，如果您來自 Jest，您會感到賓至如歸。另外，觀看模式速度非常快！

17. Playwright ：人工智慧驅動的端對端測試建立工具

如果您曾經處理過不穩定的 E2E 測試，您一定會喜歡 Playwright。這就像擁有一位超級可靠、永不疲倦的 QA 工程師。最好的部分？它有一個令人驚嘆的測試生成器，當您單擊應用程式時，它會為您編寫測試。

首先安裝：

npm init playwright@latest

產生您的第一個測試：

npx playwright codegen playwright.dev

或手動寫一個：

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://your-app.com');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page.getByText('Welcome')).toBeVisible();
});

18. Prettier ：自以為是的程式碼格式化程序

還記得那些關於分號和換行符的長篇程式碼審查討論嗎？漂亮結束了這一切。這就像有一個非常固執己見（但一致）的程式碼格式化程序，可以正常工作。

設定最少：

npm install --save-dev prettier

新增設定檔（.prettierrc）：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

現在您可以使用以下方式格式化您的程式碼：

npx prettier --write .

專業提示：將編輯器設定為儲存時格式化，您將永遠不會再考慮程式碼格式化！

19. Jest ：令人愉快的 JavaScript 測試框架，支援快照

Jest 已經存在了一段時間了，這是有充分理由的——它確實有效。它就像測試框架的瑞士軍刀，處理從單元測試到快照的所有內容。

開始使用：

npm install --save-dev jest

寫出你的第一個測試：

describe('sum module', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('matches snapshot', () => {
    const data = { foo: 'bar' };
    expect(data).toMatchSnapshot();
  });
});

20. Puppeteer ：用於現代 Web 測試的無頭 Chrome 自動化

需要自動化 Chrome 嗎？木偶師是你的朋友。無論是抓取網站、產生 PDF 還是測試應用程式，它都可以讓您完全控制 Chrome/Chromium。

快速啟動：

npm install puppeteer

簡單的截圖腳本：

import puppeteer from 'puppeteer';

async function screenshot() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
}

這些工具中的每一個都解決了開發過程中的特定痛點。

設計元件和使用者介面

21. Shadcn-UI ：具有複製貼上實作的可存取元件庫

如果您厭倦了與元件庫及其樣式限製作鬥爭，您一定會喜歡 Shadcn-UI。與傳統的元件庫不同，它採用獨特的「複製貼上」方法，使您可以完全控制元件。

它是建立在 Radix UI 和 Tailwind CSS 之上，但最酷的部分是 - 您擁有加入到專案中的每個元件。入門非常簡單：

# First, run this in your Next.js project
npx shadcn-ui@latest init

需要按鈕嗎？只需執行：

npx shadcn-ui@latest add button

並像這樣使用它：

import { Button } from "@/components/ui/button"

export default function App() {
  return (
    <Button variant="outline">
      Click me
    </Button>
  )
}

這些元件看起來很漂亮，但您可以調整它們，因為您擁有程式碼。不再與覆蓋進行鬥爭！

22. Radix Themes ：用於 Radix 原語的生產就緒主題系統

Radix Themes 繼承了 Radix Primitives 的所有優點，並將其包裝在一個漂亮的、即用型主題系統中。

將其視為您的設計系統最好的朋友 - 它可以立即處理所有複雜的內容，例如色階、間距和版式。以下是您如何開始：

npm install @radix-ui/themes

在你的應用程式中：

import '@radix-ui/themes/styles.css';
import { Theme, Button } from '@radix-ui/themes';

export default function App() {
  return (
    <Theme>
      <Button>Let's go!</Button>
    </Theme>
  )
}

最好的部分？預設一切都可以存取。生產中不再出現可存取性錯誤！

23. Daisy UI ：基於Tailwind的快速開發元件庫

我們都喜歡 Tailwind CSS，但有時，寫class="flex items-center justify-between p-4 bg-white rounded-lg shadow"已經過時了。 DaisyUI 為 Tailwind 加入了語義類別名稱，使您的程式碼更加簡潔。

安裝輕而易舉：

npm i -D daisyui@latest

更新你的 tailwind.config.js：

module.exports = {
  plugins: [require("daisyui")],
}

現在，您無需編寫十幾個實用程式類，只需執行以下操作：

<button class="btn btn-primary">Button</button>

Tailwind 乾淨、簡單，並且仍然可以 100% 可自訂！

24. Vanilla Extract ：零執行時類型的 CSS-in-JS 解決方案

您是否希望能夠借助 TypeScript 的強大功能編寫 CSS，但又不會產生任何執行時開銷？香草精正好提供了這一點。這就像吃蛋糕一樣：開發過程中的類型安全和生產過程中的純CSS。

快速品嚐一下：

import { style } from '@vanilla-extract/css';

export const button = style({
  backgroundColor: 'blue',
  borderRadius: '4px',
  ':hover': {
    backgroundColor: 'darkblue'
  }
});

最酷的部分？您的 IDE 為 CSS 屬性提供自動完成功能，並在投入生產之前捕獲拼字錯誤！

25. Ark UI ：與框架無關的無頭 UI 元件

Ark UI 是引起轟動的新秀。它類似於 Radix UI，但與框架無關。使用 React、Vue 或 Solid 時，您可以獲得具有一致行為的相同優秀元件。

React 入門：

npm i @ark-ui/react

import { Button } from '@ark-ui/react'

function App() {
  return (
    <Button>
      Click me
    </Button>
  )
}

預設情況下，這些元件是無頭的，這意味著您無需預先定義樣式即可獲得所有行為和可存取性。這非常適合需要完全樣式控制的團隊！

感謝您的閱讀，祝新年快樂！

原文出處：https://dev.to/composiodev/25-top-open-source-tools-for-building-web-apps-you-cant-afford-to-miss-in-2025-5005