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

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

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

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

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

AI 和 LLM 工具

框架和构建工具

实时和事件驱动系统

开发人员经验和测试

设计组件和 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

连接你的 GitHub 帐户

import { Composio } from "composio-core";

const client = new Composio({ apiKey: "" });

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

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

初始化 Composio 和 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 的更多信息，包括它的工作原理以及制作可用于生产的代理的重要概念。

为 Composio 存储库加星标 ⭐

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

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

真正突出的是它如何简化 LLM 的使用、处理重复设置以及提供使构建交互式 UI 变得轻而易举的组件。让我们看看它提供了什么以及如何开始。

它有三个部分，

AI SDK Core：用于生成文本、结构化数据和与 LLM 的工具交互的单一 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 将会改变游戏规则。它允许您使用基于图形的方法构建复杂的 AI 工作流 - 想象一下 AI 代理的状态机。

入门非常简单：

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 调用、工具或任何自定义逻辑。这使得它非常适合构建客户服务机器人、研究助理或任何多步骤 AI 工作流程！

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

如果您想在应用中添加类似 GitHub Copilot 的功能，CopilotKit 可让您轻松实现这一目标。这就像为您的用户配备一名 AI 配对程序员。

安装：

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 都可以添加智能建议。

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

LanceDB 正在解决 AI 开发中最大的难题之一：高效存储和查询向量嵌入。它就像用于向量搜索的 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();
}

它有什么特别之处？它是为现代 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' });

框架和构建工具

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 应用程序。听起来好得令人难以置信？看看这个：

将其添加到您的项目中：

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

就是这样！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 的高性能构建系统

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

创建一个新的 Mono 仓库：

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 应用的双向实时通信库

如果您曾经需要为 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);
});

最好的部分？它会自动处理重新连接，甚至可以在不支持 WebSockets 的浏览器中运行！

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. 无服务器框架：与云无关的无服务器应用程序开发

您是否曾经想过将功能部署到云中，而无需处理所有基础设施难题？这正是 Serverless Framework 的功能。它适用于 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 之上（是的，就是那个让你的开发服务器超级快的 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：自定代码格式化程序

还记得那些关于分号和换行符的冗长代码审查讨论吗？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？Puppeteer 是您的好帮手。无论是抓取网站、生成 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();
}

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

设计组件和 UI

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 (
    
  )
}

这些组件看起来很漂亮，但您可以调整它们，因为您拥有代码。不再需要与覆盖作斗争！

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

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 (
    
      
    
  )
}

最好的部分？默认情况下，所有内容均可访问。生产中不再存在可访问性错误！

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")],
}

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

干净，简单，并且仍然可以通过 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'
  }
});

最酷的部分？您的 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 (
    
  )
}

默认情况下，组件是无头的，这意味着您可以获得所有行为和可访问性，而无需预定义样式。这对于需要完全样式控制的团队来说是完美的选择！

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

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

CLIS.CC

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

AI 和 LLM 工具

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

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

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

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

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

框架和构建工具

6. Encore：具有自动化基础设施的开发人员优先后端框架

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

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

9. Deno 2：具有内置 TypeScript 支持的 JavaScript 安全运行时

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

实时和事件驱动系统

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

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

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

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

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

开发人员经验和测试

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

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

18. Prettier：自定代码格式化程序

19. Jest：具有快照支持的出色 JavaScript 测试框架

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

设计组件和 UI

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

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

23. Daisy UI：基于 Tailwind 的快速开发组件库

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

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