2025 年不容错过的 25 款顶级 Web 应用构建开源工具🎉 🚀

2025-05-24

2025 年不容错过的 25 款顶级 Web 应用构建开源工具🎉 🚀

2024年真是疯狂的一年，人工智能和软件开发领域发生了许多大事。我相信2025年的情况只会更加有趣。

Javascript 仍然是全球开发人员构建生产级应用程序的首选，并且在 2025 年仍将如此。

因此，我收集了 25 个存储库，它们在 2024 年展现出巨大的潜力，并且肯定会在 2025 年蓬勃发展。这些基本上就是你在 2025 年构建任何东西所需的所有工具。

恶搞之家新年 GIF

我已将所有这些工具分为以下类别。

  1. AI 和 LLM 工具
  2. 框架和构建工具
  3. 实时和事件驱动系统
  4. 开发人员体验和测试
  5. 设计组件和 UI

AI 和 LLM 工具

1. Composio 👑：AI 代理的集成平台

AI 代理如今已成为主流，许多公司正在构建代理，将其作为核心产品或用于内部自动化。然而，AI 模型无法访问外部应用程序。Composio 填补了这一空白；它支持销售、CRM、编码、生产力等垂直领域的 250 多个应用程序。

只需几行代码，您就可以将您的 AI 代理连接到多个 SaaS 应用程序，如 GitHub、Jira、Salesforce、Gmail 等，而无需自己处理用户身份验证流程。

它对 Javascript/Typescript 和 Python 有一流的支持。

开始使用它非常容易。

npm install composio-core openai
Enter fullscreen mode Exit fullscreen mode

连接你的 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}`);
Enter fullscreen mode Exit fullscreen mode

初始化 Composio 和 OpenAI

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

const openai_client = new OpenAI();
const composio_toolset = new OpenAIToolSet();
Enter fullscreen mode Exit fullscreen mode

获取 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",
});
Enter fullscreen mode Exit fullscreen mode

执行工具调用。

const result = await composio_toolset.handleToolCall(response);
console.log(result);
Enter fullscreen mode Exit fullscreen mode

该文档提供了有关 Composio 的更多信息，包括它的工作原理以及制作可用于生产的代理的重要概念。

作曲 GIF

为 Composio 代码库加星标 ⭐

2. Vercel AI SDK：使用 Typescript 构建 AI Web 应用程序

如果我今天要构建一个 AI 驱动的 Web 应用，Vercel AI SDK 将是我的首选。它旨在简化开发人员的工作，支持 React、Next.js、Vue 和 SvelteKit 等框架。

它真正突出之处在于它如何简化 LLM 的使用，处理重复的设置，并提供一些组件，让构建交互式 UI 变得轻而易举。让我们看看它提供了哪些功能以及如何开始使用。

它分为三个部分，

  • AI SDK Cor e：用于生成文本、结构化数据和与 LLM 的工具交互的单一 API。
  • AI SDK U I：独立于框架的钩子，用于快速构建聊天和生成 UI。
  • AI SDK RSC：使用 React Server Components (RSC) 流式生成 UI 的库。

首先，安装该库。

npm install ai
Enter fullscreen mode Exit fullscreen mode

安装您选择的模型提供程序。

npm install @ai-sdk/openai
Enter fullscreen mode Exit fullscreen mode

调用 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();
Enter fullscreen mode Exit fullscreen mode

有关 Vercel AI SDK 的更多信息，请访问其 文档。

Vercel AI SDK

3. LangGraph JS：构建可用于生产的代理（例如图表）

如果您正在深入研究 AI 代理，LangGraph JS 将带来颠覆性改变。它允许您使用基于图的方法构建复杂的 AI 工作流——就像 AI 代理的状态机一样。

开始使用非常简单：

npm install langgraph
Enter fullscreen mode Exit fullscreen mode

创建您的第一个代理：

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?");
Enter fullscreen mode Exit fullscreen mode

它的优点在于能够处理复杂的工作流程——每个节点可以是 LLM 调用、工具或任何自定义逻辑。这使得它非常适合构建客户服务机器人、研究助理或任何多步骤的 AI 工作流程！

LangGraph

4. CopilotKit：将 AI 副驾驶添加到你的 Web 应用

如果您想在应用中添加类似 GitHub Copilot 的功能，CopilotKit 可以让您轻松上手。这就像为您的用户配备了一位 AI 结对程序员。

安装：

npm install @copilotkit/react-core @copilotkit/react-ui
Enter fullscreen mode Exit fullscreen mode

向您的应用添加副驾驶：

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

最酷的地方？它不仅适用于代码——您可以针对任何领域进行自定义。无论您是构建设计工具、写作助手还是数据分析平台，CopilotKit 都能添加智能建议。

副驾驶套件

5. LanceDB：面向 AI 应用的高性能向量数据库

LanceDB 正在解决 AI 开发中最大的难题之一：高效存储和查询向量嵌入。它就像用于向量搜索的 SQLite，但速度极快。

开始：

npm install lancedb
Enter fullscreen mode Exit fullscreen mode

基本用法：

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();
}
Enter fullscreen mode Exit fullscreen mode

它有什么特别之处？它是为现代 AI 工作流程而设计的：

  • 极快的最近邻搜索
  • 适用于任何嵌入模型
  • 支持内存和基于磁盘的存储
  • 非常适合语义搜索、推荐系统和人工智能应用

您甚至可以将它与流行的嵌入提供程序一起使用：

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' });
Enter fullscreen mode Exit fullscreen mode

LanceDB

框架和构建工具

6. Encore：面向开发者的自动化基础设施后端框架

云服务非常适合构建可扩展的应用程序。然而，复杂的基础设施管理、不一致的 API 以及分散的 DevOps 流程很快就会让云服务变得混乱。

Encore 通过提供集成类型安全后端框架、自动基础设施配置和 DevOps 自动化的统一开发平台来简化这种混乱。

它在 Golang 和 Typescript 中均可用。

通过安装 CLI 开始使用 Encore。

curl -L https://encore.dev/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

创建一个应用程序。

encore app create
Enter fullscreen mode Exit fullscreen mode

这将配置您的免费帐户，允许您选择应用程序的名称并选择 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
}
Enter fullscreen mode Exit fullscreen mode

有关更多信息，请参阅其 文档。

再来一次

7. HTMX：无需 JS 的动态 Web 应用程序的 HTML 扩展框架

HTMX 让 HTML 重现魅力。它让你无需编写任何 JavaScript 代码即可构建现代化的 Web 应用。听起来是不是很棒？来看看这个：

将其添加到您的项目中：

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
Enter fullscreen mode Exit fullscreen mode

将任何无聊的形式变成动态组件：

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

就是这样！HTMX 处理 AJAX 请求、更新 DOM 并管理加载状态。如果您想要现代交互体验，又不想面对 JavaScript 的复杂性，那么它就是您的理想之选。

HTMX

8. Val Town：运行无服务器 JavaScript 的社交计算平台

Val Town 就像 GitHub Gists 与无服务器函数的结合，还融入了一点社交媒体元素。它正在改变我们共享和运行 JavaScript 代码的思维方式。

创建一个新的 Val（这就是所谓的函数）：

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

导入并使用其他人的 Vals：

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

最棒的是？每个 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!");
});
Enter fullscreen mode Exit fullscreen mode

使用以下命令运行它：

deno run --allow-net server.ts
Enter fullscreen mode Exit fullscreen mode

TypeScript 开箱即用，无需管理 package.json 文件，并且其标准库功能全面。此外，内置的测试和格式化工具意味着需要管理的依赖项更少！

Deno 2

10. Turborepo：JS Monorepos 的高性能构建系统

如果您曾经管理过 Mono 仓库，您就会知道构建时间可能非常……具有挑战性。Turborepo 通过智能缓存和并行执行改变了这一现状。

创建一个新的 Mono 仓库：

npx create-turbo@latest
Enter fullscreen mode Exit fullscreen mode

您的 turbo.json 可能看起来像这样：


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

运行你的任务：

turbo run build test
Enter fullscreen mode Exit fullscreen mode

Turborepo 会记住之前的构建内容，并仅重建更改过的内容。您的构建时间将从咖啡休息时间缩短到眨眼之间！

Turbo 仓库

实时和事件驱动系统

11. Socket.io：Web应用的双向实时通信库

如果您曾经需要为 Web 应用添加实时功能，您可能听说过 Socket.io。它的独特之处在于它能够处理实时通信中所有棘手的部分。

入门非常简单：

npm install socket.io
Enter fullscreen mode Exit fullscreen mode

服务器设置：

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
  });
});
Enter fullscreen mode Exit fullscreen mode

客户端：

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);
});
Enter fullscreen mode Exit fullscreen mode

最棒的是？它能自动处理重新连接，甚至在不支持 WebSocket 的浏览器中也能正常工作！

套接字输入输出

12. Feather.js：现代应用程序的实时 API 框架

把 Feathers.js 视为你的全栈挚友。就像 Express.js 遇见了 Socket.io，然后他们决定联手打造一个很棒的产品。无论你需要 REST API、实时更新，还是两者兼而有之，Feathers 都能满足你的需求。

以下是您的入门方法：

npm create feathers my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

创建实时服务非常简单：

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

羽毛io

13. Deepstream.io：可扩展的实时数据同步引擎

Deepstream 将实时数据同步、发布/订阅消息和 RPC 调用整合到一个包中。它非常适合构建协作编辑器或多人游戏等应用。

基本设置：

npm install @deepstream/client
Enter fullscreen mode Exit fullscreen mode

在您的应用中使用它：

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);
});
Enter fullscreen mode Exit fullscreen mode

深流木卫一

14.无服务器框架：云无关的无服务器应用程序开发

您是否想过将函数部署到云端，而无需处理所有令人头疼的基础设施问题？这正是 Serverless Framework 的用武之地。它兼容 AWS、Azure、Google Cloud 等云平台。

开始：

npm install -g serverless
serverless create --template aws-nodejs
Enter fullscreen mode Exit fullscreen mode

您的第一个无服务器功能：

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

使用简单的部署：

serverless deploy
Enter fullscreen mode Exit fullscreen mode

无服务器框架

15. RabbitMQ：分布式系统的强大消息代理

虽然从技术上讲，RabbitMQ 并非 JavaScript 工具，但它已成为许多 Node.js 应用程序的关键。它堪称消息队列领域的“瑞士军刀”，非常适合在服务之间实现可靠的消息传递。

将它与 Node.js 一起使用非常简单amqplib：

npm install amqplib
Enter fullscreen mode Exit fullscreen mode

基本发布者：

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!'));
}
Enter fullscreen mode Exit fullscreen mode

RabbitMQ

开发人员体验和测试

16. Vitest：集成 Vite 的下一代测试框架

还记得以前跑测试意味着要喝杯咖啡休息一下吗？Vitest 彻底改变了这一切。它基于 Vite 构建（没错，就是那个让你的开发服务器超级快的 Vite），其性能表现可见一斑。

入门非常简单：

npm install -D vitest
Enter fullscreen mode Exit fullscreen mode

创建您的第一个测试：

// 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)
})
Enter fullscreen mode Exit fullscreen mode

最酷的是？它开箱即用地支持 TypeScript，如果你之前用过 Jest，那上手会非常顺手。而且，它的监听模式速度超快！

维特斯

17. Playwright：人工智能驱动的端到端测试创建工具

如果您曾经处理过不稳定的端到端测试，您一定会爱上 Playwright。它就像拥有一位超级可靠、永不疲倦的 QA 工程师。最棒的是？它拥有一个强大的测试生成器，可以在您点击应用时自动为您编写测试。

首先安装：

npm init playwright@latest
Enter fullscreen mode Exit fullscreen mode

生成您的第一个测试：

npx playwright codegen playwright.dev
Enter fullscreen mode Exit fullscreen mode

或者手动写一个：

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();
});
Enter fullscreen mode Exit fullscreen mode

剧作家

18. Prettier：自以为是的代码格式化程序

还记得那些关于分号和换行符的冗长代码审查讨论吗？Prettier 终结了这一切。它就像一个固执己见（但又一致）的代码格式化程序，而且它还能正常工作。

设置非常简单：

npm install --save-dev prettier
Enter fullscreen mode Exit fullscreen mode

添加配置文件（.prettierrc）：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}
Enter fullscreen mode Exit fullscreen mode

现在您可以使用以下方式格式化您的代码：

npx prettier --write .
Enter fullscreen mode Exit fullscreen mode

专业提示：将编辑器设置为在保存时格式化，您将永远不再考虑代码格式化！

Prettier

19. Jest：支持快照的 JavaScript 测试框架

Jest 已经存在一段时间了，原因很简单——它就是好用。它就像测试框架中的瑞士军刀，可以处理从单元测试到快照的一切。

开始：

npm install --save-dev jest
Enter fullscreen mode Exit fullscreen mode

编写你的第一个测试：

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();
  });
});
Enter fullscreen mode Exit fullscreen mode

笑话

20. Puppeteer：用于现代 Web 测试的无头 Chrome 自动化

需要自动化 Chrome 吗？Puppeteer 就是你的好帮手。无论是抓取网站、生成 PDF 还是测试应用，它都能让你完全掌控 Chrome/Chromium。

快速入门：

npm install puppeteer
Enter fullscreen mode Exit fullscreen mode

截取屏幕截图的简单脚本：

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();
}
Enter fullscreen mode Exit fullscreen mode

这些工具中的每一个都解决了开发过程中的特定痛点。

木偶师

设计组件和 UI

21. Shadcn-UI：具有复制粘贴功能的可访问组件库

如果您厌倦了与组件库及其样式限制作斗争，您一定会喜欢 Shadcn-UI。与传统组件库不同，它采用独特的“复制粘贴”方法，让您可以完全控制组件。

它基于 Radix UI 和 Tailwind CSS 构建，但更酷的是——你添加到项目中的每一个组件都归你所有。入门非常简单：

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

需要按钮吗？只需运行：


npx shadcn-ui@latest add button
Enter fullscreen mode Exit fullscreen mode

像这样使用它：

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

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

这些组件看起来很漂亮，但您可以根据自己的代码进行调整。不用再为代码覆盖而烦恼了！

ShadCN 用户界面

22. Radix Themes：适用于 Radix Primitives 的生产就绪主题系统

Radix Themes 吸收了 Radix Primitives 的所有优点，并将其包装在一个美观、可立即使用的主题系统中。

把它当作你的设计系统最好的朋友——它开箱即用，处理所有复杂的内容，例如色阶、间距和排版。以下是入门方法：

npm install @radix-ui/themes
Enter fullscreen mode Exit fullscreen mode

在您的应用中：

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

最棒的是？所有功能默认均可访问。生产环境中再也不用担心可访问性 bug 了！

基数主题

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
Enter fullscreen mode Exit fullscreen mode

更新你的 tailwind.config.js：

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

现在，您无需编写十几个实用程序类，只需执行以下操作：

<button class="btn btn-primary">Button</button>
Enter fullscreen mode Exit fullscreen mode

干净、简单，并且仍然可以通过 Tailwind 100% 定制！

雏菊用户界面

24. Vanilla Extract：零运行时类型的 CSS-in-JS 解决方案

您是否曾经梦想过能够利用 TypeScript 的强大功能编写 CSS，却无需任何运行时开销？Vanilla Extract 正是如此。它就像蛋糕一样，既能满足您的需求，又能让您轻松上手：开发阶段拥有类型安全，生产阶段则使用纯 CSS。

让我们简单品尝一下：

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

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

最酷的部分？您的 IDE 提供 CSS 属性的自动完成功能，并在投入生产之前发现拼写错误！

香草精

25. Ark UI：与框架无关的无头 UI 组件

Ark UI 是行业新秀，正在掀起波澜。它类似于 Radix UI，但与框架无关。无论使用 React、Vue 还是 Solid，您都能获得同样优秀的组件和一致的行为。

React 入门：

npm i @ark-ui/react
Enter fullscreen mode Exit fullscreen mode 
import { Button } from '@ark-ui/react'

function App() {
  return (
    <Button>
      Click me
    </Button>
  )
}
Enter fullscreen mode Exit fullscreen mode

这些组件默认为无头组件，这意味着您可以获得所有行为和可访问性，而无需预定义样式。这对于需要完全控制样式的团队来说非常理想！

方舟用户界面

感谢您的阅读，祝您新年快乐！

如果您想成为充满活力的 AI 开发者社区的一员，请加入我们的Discord 频道。

文章来源：https://dev.to/composiodev/25-top-open-source-tools-for-building-web-apps-you-cant-afford-to-miss-in-2025-5005
Devto 翻译
PREV
9 款用于构建下一代 AI 应用的尖端开源工具 🔮💡 9. ONNX Runtime - 生产级 AI 引擎，可加速训练
NEXT
2025 年你的下一个大型项目必须使用的 13 个顶级开源工具