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

npm install composio-core openai

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}`);

import { OpenAI } from "openai";import { OpenAIToolSet } from "composio-core";
const openai_client = new OpenAI();const composio_toolset = new OpenAIToolSet();

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);

npm install ai

npm install @ai-sdk/openai

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

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?");

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

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

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

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

encore app create

// 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/:namefunc World(ctx context.Context, name string) (*Response, error) {    msg := "Hello, " + name + "!"    return &Response{Message: msg}, nil}
type Response struct {    Message string}

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

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

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

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

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

deno run --allow-net server.ts

npx create-turbo@latest

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

turbo run build test

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

npm create feathers my-appcd my-appnpm start

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

npm install @deepstream/client

import { DeepstreamClient } from '@deepstream/client';const client = new DeepstreamClient('localhost:6020');
// Real-time data syncconst record = client.record.getRecord('scores/player1');record.set({ points: 100 });
// Subscribe to changesrecord.subscribe(data => {  console.log('Score updated:', data.points);});

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

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

serverless deploy

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!'));}

npm install -D vitest

// calculator.test.jsimport { expect, test } from 'vitest'import { add } from './calculator'
test('adds 1 + 2 to equal 3', () => {  expect(add(1, 2)).toBe(3)})

npm init playwright@latest

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

npm install --save-dev prettier

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

npx prettier --write .

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

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

# First, run this in your Next.js projectnpx 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>  )}

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

npm i -D daisyui@latest

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

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

import { style } from '@vanilla-extract/css';
export const button = style({  backgroundColor: 'blue',  borderRadius: '4px',  ':hover': {    backgroundColor: 'darkblue'  }});

npm i @ark-ui/react

import { Button } from '@ark-ui/react'
function App() {  return (    <Button>      Click me    </Button>  )}