Sunil Kumar Dash

for Composio

Posted on Dec 26

25 top open-source tools for building web apps you can't afford to miss in 2025🎉 🚀

#webdev #javascript #programming #ai

2024 was insane, and many things happened around AI and software development in general. I believe this is only going to be even more interesting in 2025.

Javascript continues to be the top choice for developers worldwide to build production-ready apps, and it will continue to be so in 2025.

So, I have gathered 25 repositories that showed great potential in 2024 and will certainly flourish in 2025. These are basically all the tools you’ll need to build anything in 2025.

I have segregated all these tools under the following categories.

AI and LLM tools
Frameworks and Build tools
Real-Time and Event-Driven Systems
Developer Experience and Testing
Design components and UI

AI and LLM tools

1. Composio 👑: The integration platform for AI agents

AI agents are mainstream now, and many companies are building agents either as core offerings or for internal automation. However, the AI models cannot access external apps. Composio fills this void; it supports 250+ applications across verticals like Sales, CRM, Coding, Productivity, and more.

With a few lines of code, you can connect your AI agents to multiple SaaS apps like GitHub, Jira, Salesforce, Gmail, etc, without the hassle of handling user auth flows by yourself.

It has first-class support for Javascript/Typescript and Python.

Getting started with it is very easy.

npm install composio-core openai

Connect your GitHub Account

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

Initialize Composio and OpenAI

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

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

Fetch GitHub actions and pass them to the 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",
});

Execute the tool calls.

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

The documentation provides more on Composio, how it works, and important concepts for making capable production-ready agents.

Star the Composio repository ⭐

2. Vercel AI SDK: Build AI Web Apps in Typescript

If I were building an AI-powered web app today, the Vercel AI SDK would be my first choice. It’s built to make things easier for developers, supporting frameworks like React, Next.js, Vue, and SvelteKit.

What really stands out is how it simplifies working with LLMs, takes care of the repetitive setup, and provides components that make building interactive UIs a breeze. Let’s look at what it offers and how to get started.

It has three parts,

AI SDK Core: A single API for generating text, structured data, and tool interactions with LLMs.
AI SDK UI: Framework-independent hooks for quickly building chat and generative UIs.
AI SDK RSC: A library for streaming generative UIs with React Server Components (RSC).

To get started, install the library.

npm install ai

Install the model provider of your choice.

npm install @ai-sdk/openai

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

For more on Vercel AI SDK, visit their documentation.

3. LangGraph JS: Build production-ready agents like graphs

If you're diving into AI agents, LangGraph JS is a game-changer. It lets you build complex AI workflows using a graph-based approach - think state machines for AI agents.

Here's how simple it is to get started:

npm install langgraph

Create your first agent:

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

The beauty is how it handles complex workflows—each node can be an LLM call, a tool, or any custom logic. This makes it perfect for building customer service bots, research assistants, or any multi-step AI workflow!

4. CopilotKit: Add AI copilot to your web apps

If you want to add GitHub Copilot-like features to your app, CopilotKit makes it surprisingly easy. It's like having an AI pair programmer for your users.

Installation:

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

Add a copilot to your app:

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

The cool part? It's not just for code - you can customize it for any domain. Whether you're building a design tool, writing assistant, or data analysis platform, CopilotKit can add intelligent suggestions.

5. LanceDB: Performant Vector Database for AI Apps

LanceDB is solving one of the biggest headaches in AI development: efficiently storing and querying vector embeddings. It's like SQLite for vector search but blazingly fast.

Get started:

npm install lancedb

Basic usage:

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

What makes it special? It's designed for modern AI workflows:

Incredibly fast nearest neighbour search
Works with any embedding model
Supports both memory and disk-based storage
Perfect for semantic search, recommendation systems, and AI applications

You can even use it with popular embedding providers:

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

Frameworks and Build tools

6. Encore: Developer-First Backend Framework with Automated Infrastructure

Cloud services are great for building scalable applications. However, it can quickly become messy with complex infrastructure management, inconsistent APIs, and scattered DevOps processes.

Encore simplifies this chaos by providing a unified development platform integrating type-safe backend frameworks, automatic infrastructure provisioning, and DevOps automation.

It is available both in Golang and Typescript.

Get started with Encore by installing the CLI.

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

Create an app.

encore app create

This will configure your free account, allow you to choose your app's name, and select the Hello World template.

This will create an example application with a simple REST API in a new folder using your chosen app name.

Open the file in your editor.

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

For more information, refer to their documentation.

7. HTMX: HTML-Extended framework for dynamic web apps without JS

HTMX is bringing sexy back to HTML. It lets you build modern web apps without writing a single line of JavaScript. Sound too good to be true? Check this out:

Add it to your project:

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

Turn any boring form into a dynamic component:

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

That's it! HTMX handles the AJAX request, updates the DOM, and manages loading states. It's perfect for when you want modern interactivity without the complexity of JavaScript.

8. Val Town: Social Computing Platform for Running Serverless JavaScript

Val Town is like GitHub Gists meets serverless functions with a dash of social media. It's changing how we think about sharing and running JavaScript code.

Create a new Val (that's what they call functions):

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

Import and use other people's Vals:

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

The best part? Every Val is an API endpoint and can be scheduled like a cron job. It's perfect for automation, bots, and quick experiments!

9. Deno 2: Secure Runtime for JavaScript with Built-in TypeScript Support

Deno 2 is Ryan Dahl's second take on JavaScript runtime (yes, the same person who created Node.js). It's similar to Node.js but with modern features and security built in from the ground up.

Create a simple server:

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

Run it with:

deno run --allow-net server.ts

TypeScript works out of the box, there's no package.json to manage, and the standard library is comprehensive. Plus, the built-in testing and formatting tools mean fewer dependencies to manage!

10. Turborepo: High-Performance Build System for JS Monorepos

If you've ever managed a mono repo, you know the build times can be... challenging. Turborepo changes that with intelligent caching and parallel execution.

Create a new mono repo:

npx create-turbo@latest

Your turbo.json might look like this:


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

Run your tasks:

turbo run build test

Turborepo remembers what it's built before and only rebuilds what's changed. Your build times go from coffee-break length to blink-of-an-eye fast!

Real Time and Event Driven Systems

11. Socket.io: Bidirectional Real-Time Communication Library for Web Apps

If you've ever needed to add real-time features to your web app, you've probably heard of Socket.io. What makes it special is how it handles all the tricky parts of real-time communication.

Getting started is surprisingly simple:

npm install socket.io

Server setup:

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

Client-side:

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

The best part? It handles reconnections automatically and works even in browsers that don't support WebSockets!

12. Feather.js: Real-Time API Framework for Modern Applications

Think of Feathers.js as your full-stack best friend. It's like Express.js met Socket.io and they decided to build something awesome together. Whether you need REST APIs, real-time updates, or both, Feathers has covered you.

Here's how you get started:

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

Creating a real-time service is as simple as:

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

13. Deepstream.io: Scalable Real-Time Data Sync Engine

Deepstream is what you get when you combine real-time data sync, pub/sub messaging, and RPC calls into one package. It's perfect for building things like collaborative editors or multiplayer games.

Basic setup:

npm install @deepstream/client

Using it in your app:

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: Cloud-Agnostic Serverless Application Development

Ever wanted to deploy functions to the cloud without dealing with all the infrastructure headaches? That's exactly what Serverless Framework does. It works with AWS, Azure, Google Cloud, and more.

Get started:

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

Your first serverless function:

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

Deploy with a simple:

serverless deploy

15. RabbitMQ: Robust Message Broker for Distributed Systems

While RabbitMQ isn't technically a JavaScript tool, it's become crucial to many Node.js applications. It's the Swiss Army knife of message queues, perfect for reliable message delivery between services.

Using it with Node.js is straightforward with amqplib:

npm install amqplib

Basic publisher:

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

Developer Experience and Testing

16. Vitest: Next-Generation Testing Framework with Vite Integration

Remember when running tests meant taking a coffee break? Vitest changes that game completely. It's built on top of Vite (yes, the same one that makes your dev server super fast), and it shows in the performance.

Getting started is a breeze:

npm install -D vitest

Create your first test:

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

The cool part? It supports TypeScript out of the box, and if you're coming from Jest, you'll feel right at home. Plus, the watch mode is insanely fast!

17. Playwright: AI-Powered End-to-End Test Creation Tool

If you've ever dealt with flaky E2E tests, you'll love Playwright. It's like having a super reliable QA engineer who never gets tired. The best part? It has this amazing Test Generator that writes tests for you while you click around your app.

Start by installing:

npm init playwright@latest

Generate your first test:

npx playwright codegen playwright.dev

Or write one manually:

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: Opinionated Code Formatter

Remember those long code review discussions about semicolons and line breaks? Prettier ends all of that. It's like having a very opinionated (but consistent) code formatter that just works.

Setup is minimal:

npm install --save-dev prettier

Add a config file (.prettierrc):

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

Now you can format your code with:

npx prettier --write .

Pro tip: Set up your editor to format on save, and you'll never think about code formatting again!

19. Jest: Delightful JavaScript Testing Framework with Snapshot Support

Jest has been around for a while, and there's a good reason for that - it just works. It's like the Swiss Army knife of testing frameworks, handling everything from unit tests to snapshots.

Get started:

npm install --save-dev jest

Write your first test:

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: Headless Chrome Automation for Modern Web Testing

Need to automate Chrome? Puppeteer is your friend. Whether scraping websites, generating PDFs, or testing apps, it gives you full control over Chrome/Chromium.

Quick start:

npm install puppeteer

Simple script to take a screenshot:

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

Each of these tools solves a specific pain point in the development process.

Design Components and UI

21. Shadcn-UI: Accessible Component Library with Copy-Paste Implementation

If you're tired of fighting with component libraries and their styling constraints, you'll love Shadcn-UI. Unlike traditional component libraries, it takes a unique "copy-paste" approach that gives you full control over your components.

It's built on top of Radix UI and Tailwind CSS, but here's the cool part - you own every component you add to your project. Getting started is super simple:

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

Need a button? Just run:


npx shadcn-ui@latest add button

And use it like this:

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

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

The components look beautiful, but you can tweak them since you own the code. No more fighting with overrides!

22. Radix Themes: Production-Ready Theme System for Radix Primitives

Radix Themes takes all the goodness of Radix Primitives and wraps it in a beautiful, ready-to-use theme system.

Think of it as your design system's best friend - it handles all the complex stuff like colour scales, spacing, and typography right out of the box. Here's how you get started:

npm install @radix-ui/themes

And in your app:

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

The best part? Everything is accessible by default. No more accessibility bugs in production!

23. Daisy UI: Tailwind-Based Component Library for Rapid Development

We all love Tailwind CSS, but sometimes, writing class="flex items-center justify-between p-4 bg-white rounded-lg shadow" gets old. DaisyUI adds semantic class names to Tailwind, making your code much cleaner.

Installation is a breeze:

npm i -D daisyui@latest

Update your tailwind.config.js:

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

Now, instead of writing a dozen utility classes, you can just do:

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

Clean, simple, and still 100% customizable with Tailwind!

24. Vanilla Extract: Zero-Runtime Typed CSS-in-JS Solution

Ever wish you could write CSS with the power of TypeScript but without any runtime overhead? Vanilla Extract offers exactly that. It's like having and eating your cake: type safety during development and pure CSS in production.

Here's a quick taste:

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

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

The coolest part? Your IDE provides autocomplete for CSS properties and catches typos before they hit production!

25. Ark UI: Framework-Agnostic Headless UI Components

Ark UI is the new kid on the block that's making waves. It's like Radix UI but framework-agnostic. You get the same great components with consistent behaviour when using React, Vue, or Solid.

Getting started in React:

npm i @ark-ui/react

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

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

The components are headless by default, meaning you get all the behaviour and accessibility without predefined styles. This is perfect for teams that need full styling control!