DEV Community: Sachin Chaurasiya

Open Source is Not Just for Hacktoberfest

Sachin Chaurasiya — Mon, 29 Dec 2025 17:17:57 +0000

Every October, the developer community buzzes with Hacktoberfest energy. PRs fly, t-shirts are earned, and GitHub turns green. But here's what nobody talks about: what happens in November?

For most contributors, the answer is simple: nothing. The repositories they contributed to become distant memories, the architecture they briefly touched remains unexplored, and the relationships they could have built with maintainers never formed.

I decided to do things differently this year. Let me tell you how one Hacktoberfest discovery turned into a masterclass in production AI systems.

The Problem: October-Only Open Source

Let's be honest about the Hacktoberfest paradox:

The Surface-Level Contribution Trap: Quick documentation fixes and typo corrections are valuable, don't get me wrong. But if that's ALL you do, you're missing the forest for the trees. The real learning happens when you understand why the code is structured a certain way, not just that a semicolon was missing.

Chasing Swag Over Growth: T-shirts and badges are nice, but they don't teach you how to build production-grade systems. The developers who grow fastest are the ones who stick around after October.

Missed Opportunities: The best open source contributions come from contributors who understand the codebase deeply. That takes time, more than one month.

The Discovery: Finding Skyflo.ai

While searching for interesting projects to contribute to, I stumbled upon Skyflo.ai, an open-source AI agent for DevOps and cloud-native operations.

As someone actively learning AI engineering and building agent architectures, this wasn't just another contribution opportunity. It was exactly what I was looking to learn:

LangGraph for stateful agent orchestration
MCP (Model Context Protocol) for standardized tool execution
Human-in-the-loop safety patterns
Kubernetes-native deployment

Instead of submitting a quick PR and moving on, I decided to dive deep.

What is Skyflo.ai?

Skyflo.ai is an AI copilot that unifies Kubernetes operations and CI/CD systems behind a natural-language interface. Instead of memorizing CLI commands or clicking through UIs, you just tell Skyflo.ai what you want:

Show me the last 200 lines of logs for checkout in production. 
If there are errors, summarize them.

Or:

Progressively canary rollout auth-backend in dev through 10/25/50/100 steps

The magic is in how it does this safely, with human approval required for any mutating operation.

Understanding the Architecture

This is where the real learning happened. Skyflo's architecture is a textbook example of how to build production AI agent systems.

The Three-Layer Design

1. Frontend Layer: Command Center

Built with Next.js, TypeScript, and Tailwind
Real-time streaming: SSE to frontend, Streamable HTTP for MCP
Shows every action the agent takes in real-time

2. Intelligence Layer: The Engine

FastAPI backend with LangGraph workflows
Manages the Plan → Execute → Verify loop
Handles approvals and checkpoints
Real-time SSE updates to UI

3. Tool Layer: MCP Server

FastMCP implementation for tool execution
Standardized tools for kubectl, Helm, Jenkins, Argo Rollouts
Safe, consistent actions across all integrations

Why This Architecture Works

The separation of concerns is beautiful:

UI changes don't affect the agent logic
New tools can be added without touching the intelligence layer
Each component is independently deployable and testable

Key Learnings from Production AI Systems

1. LangGraph for Stateful Agents

Traditional LLM chains are stateless—you send a prompt, get a response, done. But real-world AI agents need to:

Remember context across multiple steps
Handle failures gracefully with checkpoints
Support human intervention at any point

LangGraph provides graph-based orchestration that enables all of this. The agent's workflow is defined as nodes and edges, with state persisted at each step.

Here's how Skyflo.ai implements this workflow in engine/src/api/agent/graph.py:

from langgraph.graph import StateGraph, START, END

def _build_graph(self) -> StateGraph:
    workflow = StateGraph(AgentState)

    # Define the workflow nodes
    workflow.add_node("entry", self._entry_node)
    workflow.add_node("model", self._model_node)
    workflow.add_node("gate", self._gate_node)
    workflow.add_node("final", self._final_node)

    # Define the flow
    workflow.add_edge(START, "entry")
    workflow.add_conditional_edges(
        "entry", route_from_entry,
        {"gate": "gate", "model": "model"}
    )
    workflow.add_conditional_edges(
        "model", route_after_model,
        {"gate": "gate", "model": "model", "final": "final"}
    )
    workflow.add_conditional_edges(
        "gate", route_after_gate,
        {"model": "model", "final": "final"}
    )
    workflow.add_edge("final", END)

    return workflow

This creates a stateful workflow where the agent can loop between planning (model), execution (gate), and verification phases until the task is complete.

2. MCP: The USB-C for AI

Model Context Protocol is becoming the standard for how AI agents interact with tools. Instead of building custom integrations for each tool (the "M x N nightmare"), MCP provides:

A universal interface for tool discovery
Standardized invocation patterns
Clean separation between agent logic and tool implementation

Think of it as "OpenAPI for AI agents."

3. Human-in-the-Loop is Non-Negotiable

For DevOps operations, automatic execution without approval is dangerous. Skyflo's pattern:

Agent creates a plan
User reviews and approves
Agent executes
Agent verifies the outcome
Repeat until complete

This Plan → Execute → Verify loop with human approval gates is a pattern every production AI system should adopt.

4. Real-Time Streaming Builds Trust

Users need to see what the agent is doing. Skyflo.ai streams every action in real-time:

Tool invocations
Intermediate reasoning
Execution results
Verification steps

This transparency is critical when your agent is touching production infrastructure. Skyflo.ai streams events via SSE from the Engine to the UI, while the Engine communicates with the MCP server over Streamable HTTP transport for efficient tool execution.

5. Safety-First Design

Key safety patterns I observed:

Dry-run by default for Helm operations
Diff-first before any apply
Approval gates for all mutations
Audit logging of every action

Architecture Note: The communication between components uses different protocols optimized for their use case:

Engine → UI: Server-Sent Events (SSE) for real-time user feedback
Engine → MCP Server: Streamable HTTP transport for tool execution

My Contributions to Skyflo.ai

Over the past few months, I've contributed multiple features and fixes to Skyflo.ai:

Features Shipped

Jenkins Build Control: Added tools to stop/cancel running builds, enabling full CI/CD lifecycle management
Kubernetes Rollout Management: Implemented rollout history and rollback tools for safer deployments
Helm Template Rendering: Added helm_template tool to preview manifests before deployment
Label Selector for K8s Resources: Enhanced k8s_get tool with label selectors for more precise resource queries
Chat History Search: Implemented debounced server-side search for better conversation management

Bug Fixes & UX Improvements

Message Continuity Fix: Resolved critical issue where chat messages disappeared after tool approval/denial
Approval Flow Refinement: Streamlined approval action handling and message finalization in the UI
Navigation Enhancements: Made logo clickable and added GitHub project link to navbar
Profile Management: Fixed button state management for profile updates
SSE Timeout Fix: Increased Nginx proxy timeouts to prevent 60-second SSE connection cutoffs

Documentation

Fixed architecture guide link in CONTRIBUTING.md to help new contributors

Each contribution taught me something new about production AI systems, from SSE streaming patterns to Kubernetes operations safety.

My Journey: Challenges and Breakthroughs

Contributing to Skyflo.ai wasn't always smooth sailing. Here are the challenges I faced and what I learned from them:

Understanding LangGraph State Management

The Challenge: At first, I didn't understand how state flows through the workflow nodes. The conditional edges and state updates seemed complex.

The Breakthrough: After reading through engine/src/api/agent/graph.py and experimenting locally, I realized that LangGraph's state is additive, each node returns updates that merge with the existing state. This pattern makes it easy to maintain conversation context while allowing nodes to be independent.

Decoding the MCP Abstraction

The Challenge: The abstraction between the Engine, MCP Client, and MCP Server initially confused me. I couldn't understand why we needed three separate components.

The Breakthrough: Once I traced a tool call through the entire flow, it clicked:

Engine receives user intent via LLM
MCP Client (engine/src/api/services/mcp_client.py) acts as a bridge
MCP Server (mcp/tools/) executes actual kubectl/helm commands

This separation means you can swap out tools without touching the agent logic—brilliant architecture.

Grasping the Approval Flow

The Challenge: Understanding when and how approval gates trigger took time. The interaction between approval_decisions state and ApprovalPending exceptions was not immediately obvious.

The Breakthrough: I discovered that the gate node checks if a tool requires approval, then raises ApprovalPending which halts execution. The state is checkpointed, and when the user approves/denies, the workflow resumes from exactly where it stopped. This is production-grade error handling.

Beyond Hacktoberfest: The Year-Round Journey

October: The Starting Point

Hacktoberfest is a fantastic catalyst. It lowers the barrier to entry and introduces you to projects you'd never discover otherwise. Use it as your launchpad, not your destination.

November-December: Go Deeper

This is where the real learning happens:

Read the entire codebase, not just the file you're changing
Join Discord/Slack discussions to understand the roadmap
Pick up complex issues that intimidate you
Ask questions about architectural decisions

Year-Round: Become a Maintainer

Consistent contributions build trust. Over time:

You start reviewing other contributors' PRs
Maintainers ask for your input on design decisions
You shape the project's future direction
You build lasting professional relationships

The Contributor Mindset

Here's what separates occasional contributors from impactful ones:

1. Choose projects you want to learn from

Don't just pick easy projects to farm PRs. Pick projects that use technologies you want to master. My contribution to Skyflo.ai taught me more about production AI systems than any tutorial could.

2. Contribute in multiple ways

Code features and bug fixes
Documentation improvements
Test coverage
Code reviews
Community support

All contributions are valuable. Mix them up.

3. Build relationships

Open source is as much about people as it is about code. The maintainers and contributors you meet today become your professional network tomorrow.

4. Track your growth, not just your PRs

The real metric isn't merged PRs, it's skills gained, patterns learned, and confidence built.

Your Turn: Start Now

Whether it's Skyflo.ai or another project that excites you, the best time to start contributing is now. Not next October, now.

Here's your action plan:

Find a project that aligns with what you want to learn
Read the contributing guidelines and code of conduct
Set up the development environment locally
Start with the codebase, not the issues, understand before you contribute
Join the community (Discord, Slack, Discussions)
Pick your first issue and dive in
Stay around after your first PR merges

Resources

Skyflo.ai GitHub: github.com/skyflo-ai/skyflo
Skyflo.ai Discord: discord.gg/kCFNavMund
LangGraph Docs: docs.langchain.com/langgraph
Model Context Protocol: modelcontextprotocol.io

Connect With Me

I'm sharing my AI engineering journey, open source contributions, and developer productivity tips:

What's a project that taught you something unexpected? Drop a comment, I'd love to hear your open source stories.

The debate around AI coding agents misses the point. One side says "AI sucks,” the other says "skill issue." After months of building with Claude Code and Cursor, I’ve learned this: the real skill isn’t prompt engineering,it’s understanding the context win

Sachin Chaurasiya — Sat, 27 Dec 2025 13:07:29 +0000

Sachin Chaurasiya

Dec 27 '25

The #1 Skill Most Developers Miss When Using AI Coding Agents

#ai #agents #coding #developers

Comments

4 min read

The #1 Skill Most Developers Miss When Using AI Coding Agents

Sachin Chaurasiya — Sat, 27 Dec 2025 13:03:17 +0000

The debate over AI coding agents is missing the most important factor. It’s not about prompt engineering, it’s about understanding the context window.

Developers are divided. One side claims coding agents suck. The other insists you’re just using them wrong; it’s a skill issue. While there is truth to both perspectives, the most common skill issue isn’t about prompt engineering , it’s about a fundamental misunderstanding of the tool’s primary constraint.

If there is a skill issue that I see most often with devs, it is not thinking enough about the context window.

What is the Context Window?

The context window is the complete set of input and output tokens an LLM processes in a single session. Think of it as the model’s working memory, everything it can see and consider when generating a response.

This includes:

Input Tokens: Your system prompt, instructions, and user messages
Output Tokens: The assistant’s generated responses

As your conversation grows, so does the token count. Eventually, you’ll hit a limit set by the model’s provider. This can happen if a conversation becomes too long, or even from a single, very large input like uploading extensive documentation. Exceeding this limit results in an error, and generation will stop cold.

Context Windows in 2025

Model providers set different limits based on architecture and cost. These can range from a few thousand to several million tokens , but as we’ll see, bigger isn’t always better.

Gemini has really large context windows, but as we’ll see… bigger is not always better.

The Paradox: More Context, Worse Performance

Here’s the counterintuitive truth: the more information you give a model, the worse it performs at retrieving specific details. This is true for all models, from the smallest to the largest.

Why doesn’t infinite context exist? Two reasons:

1. Cost & Memory

LLM processing is expensive. Larger contexts consume significantly more memory per process, driving up both computational costs and latency.

2. Performance Degradation

This is the critical one. An LLM’s attention is not distributed evenly across the context. Information at the very beginning and very end of a conversation has the most impact on the output. Information in the middle? It’s often de-prioritized or ignored entirely.

This is called the Lost in the Middle problem.

This isn’t a bug, it’s an emergent property of transformer architecture. Interestingly, it mirrors human cognitive biases:

Primacy Bias: Better recall for items at the beginning
Recency Bias: Better recall for items at the end

Just like humans do, models do better with less, more focused information.

Case Study: A 10 Million Token Window is Useless If the Model Can’t Use It

When Meta announced a model with a 10-million-token context window, it seemed like a breakthrough. However, real-world testing quickly revealed it suffered from severe lost-in-the-middle problems. You could feed it vast amounts of information, but the model would fail to retrieve or act on it effectively.

When you’re assessing an LLM, you shouldn’t just look at how big the context window is. You should look at how well it retrieves information from its context window.

The Solution: Keep Your Context Lean and Focused

Since shorter context windows suffer less from the lost-in-the-middle problem, the key to better performance is proactive management. Regularly clearing your coding agent’s chat history refreshes its memory and ensures your instructions are given high priority.

This is the single most effective way to improve results.

Step 1: Get Full Transparency Into Your Context Usage

You cannot manage what you cannot measure. A good coding agent provides tools to inspect the current state of your context window. For example, in Cursor:

Step 2: Your Default Action Should Be to `clear` the Conversation

When you start a new, unrelated task, or when context usage gets high (e.g., less than 50k tokens free), the best practice is to clear the conversation history entirely. This frees up the entire context window, giving you a blank slate and ensuring maximum performance for the new task.

Step 3: Use `compact` When You Need to Preserve the Conversation's Intent

compact is an alternative that clears the detailed history but generates an LLM-powered summary. This preserves the vibes or core goals of the conversation in a much smaller package.

This preserves some of the intention… like a mini rules file just for this conversation.

While useful, be aware that generating the summary itself takes time and consumes tokens.

A Word of Warning: Hidden Context Can Sabotage Performance

Be extremely cautious about tools and configurations that add large amounts of hidden context. This bloats your window from the start, pushing your actual conversation into the dreaded middle.

Common Culprits:

LSP/MCP Servers: These can inject enormous toolsets into your system prompt
Large Rule Files: Overly complex or numerous custom rules in tools like Cursor or Claude Code

When hidden tools consume most of your context, your actual messages end up in the lost in the middle zone , exactly where the model pays the least attention.

Key Takeaways

The context window is the model’s entire memory (input + output). As conversations grow, this fills up quickly and performance suffers.
All models have a hardcoded limit and suffer from lost-in-the-middle attention decay. Even million-token windows aren’t immune to this problem.
A leaner, more focused context consistently yields better performance. Clear early, clear often.

The New Mindset

Develop a healthy paranoia about what’s in your context. Actively manage it with tools like clear and compact. This skill is what separates frustrating interactions from productive partnerships with AI.

Mastering the context window is the key to great results.

How to Build Production-Grade Agentic AI

Sachin Chaurasiya — Sun, 21 Dec 2025 13:41:38 +0000

Agentic AI is everywhere right now.

Everyone is building agents, demos, and workflows, but very few of them are production-ready.

I recently read a research paper on designing, developing, and deploying production-grade agentic AI workflows, and it stood out because it focuses less on hype and more on engineering discipline.

This post is a practical breakdown of what it actually takes to build reliable, scalable, and maintainable agentic AI systems, not prototypes, not experiments, but systems that can survive in production.

These are my key learnings, translated from research language into real-world engineering insights.

Prefer video? I've created a comprehensive video walkthrough of these concepts:

Agentic AI Is a Shift in System Design

Traditional AI systems were simple:

Prompt goes in
Response comes out

Agentic AI systems are very different.

They involve agents that can:

Plan steps
Call tools
Validate results
Retry on failure
Coordinate with other agents
Operate with minimal human intervention

This is not about writing better prompts.

It’s about designing AI systems, not AI demos.

From Single Models to Agentic Workflows

Earlier AI models were built for specific tasks:

Sentiment analysis
Image classification
Entity extraction

Now, with large language models, we have general-purpose reasoning engines. But the real power comes when we combine them into agentic workflows.

In an agentic workflow:

Each agent has a specific role
Multiple agents collaborate
Reasoning, validation, and execution are separated

This modularity is what makes systems reliable and scalable.

One Agent, One Responsibility

One of the strongest principles from the paper is simple:

Do not overload agents.

Each agent should:

Have a single responsibility
Ideally use a single tool
Produce a predictable output

When agents try to do too much:

Prompts become complex
Behavior becomes non-deterministic
Debugging becomes painful

This is just classic software engineering, applied to AI.

Tools Matter More Than Intelligence

A key insight I strongly agree with:

Agents don’t need to be smarter. They need better tools.

The reliability of an agent depends on:

Deterministic tools
Clear input/output contracts
Reduced ambiguity

Your agent is only as good as the tools and boundaries you give it.

Don’t Use AI Where You Don’t Need It

Not everything needs AI.

If a task is deterministic, like:

Writing files
Calling APIs
Creating database records
Generating timestamps

Don’t ask an LLM to reason about it.

The paper recommends:

Moving such tasks into pure functions
Keeping AI only where reasoning is actually required

This reduces:

Cost
Latency
Failure points
Unpredictable behavior

Responsible AI Through Multi-Model Reasoning

Single-model outputs can hallucinate, drift, or bias results.

A powerful pattern discussed in the paper:

Use multiple models to generate outputs
Use a reasoning agent to consolidate and validate them

This approach:

Improves accuracy
Reduces bias
Aligns better with responsible AI practices

Responsible AI is a system design problem, not just a model choice.

Separate Workflow Logic from Interfaces

Another important architectural idea:

Keep agentic workflow logic separate from MCP servers or external interfaces
MCP servers should act as thin adapters
Core logic should live in a clean backend workflow engine

This separation:

Improves maintainability
Allows independent scaling
Keeps systems flexible as tools and models evolve

Containerization and Production Readiness

Agentic AI systems are production systems.

That means:

Containerized deployments
Kubernetes orchestration
Logging, monitoring, retries
Secure tool access
Versioned prompts and workflows

Without this, agentic systems remain fragile prototypes.

Keep It Simple (KISS)

One of the most important reminders from the paper:

Complexity kills agentic systems.

Over-engineering leads to:

Hidden behaviors
Hard-to-trace failures
Unmaintainable workflows

Simple, flat, function-driven designs work best, especially when LLMs are involved.

Final Thoughts

Agentic AI is not magic. It’s a system design problem.

What this research paper made very clear is that moving from demos to production-grade agentic AI requires strong engineering discipline, clear responsibilities, deterministic tooling, thoughtful orchestration, and simplicity in design.

Models will keep improving, but without good system design, agentic workflows will remain fragile and hard to maintain. The real leverage comes from how we compose agents, tools, and workflows, not from chasing the latest model.

If you’re serious about building agentic AI systems that actually work in production, this paper is worth reading end to end: A Practical Guide for Designing, Developing, and Deploying Production-Grade Agentic AI Workflows

I’ll continue sharing learnings as I apply these ideas while building real systems.

How to use canvas in Web Workers with OffscreenCanvas

Sachin Chaurasiya — Sat, 03 May 2025 18:44:30 +0000

Lately, I have been working on a feature to capture images from media streams and scale them down to reduce their size. This helps save storage and reduce costs before uploading the images to a storage service. For this, I used Canvas to render the image data from the stream and then convert it into a blob of the required MIME type.

Canvas rendering, animation, and user interaction occur on the main thread. If the rendering and animation are intensive, they can affect performance. After a few weeks, we received feedback from users that the application felt laggy and slow. So, I decided to move the whole pipeline to a web worker. However, Canvas requires DOM access for rendering and animations, which is not available in web workers. This limitation makes using Canvas in web workers challenging.

This is a big challenge if you want to improve the performance of a web application that frequently uses canvas rendering. So, how can we solve this problem? Fortunately, OffscreenCanvas is the answer. OffscreenCanvas provides a canvas that can be rendered offscreen, removing the dependency on the DOM.

In this article, I will discuss the OffscreenCanvas API and how to use it, using image capturing as an example. Let’s get started.

What is OffscreenCanvas?

OffscreenCanvas is a Web API that provides a canvas that can be rendered offscreen. It decouples the DOM from the Canvas API, so the <canvas> element is no longer entirely dependent on the DOM. Rendering operations can also run inside a worker context, allowing certain tasks to be performed in a separate thread and reducing the load on the main thread.

OffscreenCanvas accepts two parameters: the height and width of the canvas. You can then get the context using the getContext method:

const offScreenCanvas = new OffscreenCanvas(width, height)
const context = offScreenCanvas.getContext('2d')

Now that you understand the limitations of canvas and the benefits of OffscreenCanvas, let’s look at its usage through an image capturing example.

Using Canvas in the main thread

Before jumping into OffscreenCanvas, let’s first discuss using canvas on the main thread.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Camera Capture Every 5 s</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 2rem;
      }
      #video {
        border: 2px solid #444;
        border-radius: 8px;
      }
      #captures {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        max-width: 100%;
      }
      #captures img {
        width: 160px; /* thumbnail size */
        height: auto;
        border: 1px solid #888;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <button id="startBtn">Start Camera</button>

    <video id="video" width="640" height="480" autoplay playsinline muted hidden></video>

    <h2>Captured Images (every 5 s)</h2>
    <div id="captures"></div>

    <div>
      <p>Type in the input below to experience lag during image capture:</p>
      <input
        type="text"
        id="lagInput"
        placeholder="Type here to experience lag..."
        style="width: 300px; padding: 8px; margin-bottom: 10px"
      />
      <div id="typingStats">
        <p>Characters typed: <span id="charCount">0</span></p>
        <p>Typing lag: <span id="lagTime">0</span> ms</p>
      </div>
    </div>

    <script>
      const startBtn = document.getElementById('startBtn');
      const video = document.getElementById('video');
      const captures = document.getElementById('captures');

      let stream = null;
      let captureIntervalId = null;

      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.canvas.width = 640;
      ctx.canvas.height = 480;

      function captureFrame() {
        if (!stream) return;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(
          (blob) => {
            if (!blob) return;
            const url = URL.createObjectURL(blob);
            const img = document.createElement('img');
            img.src = url;

            img.onload = () => URL.revokeObjectURL(url);

            captures.prepend(img);
          },
          'image/webp',
          0.9,
        );
      }

      function startCapturing() {
        if (captureIntervalId) return;
        captureIntervalId = setInterval(captureFrame, 5000);
      }

      async function initCamera() {
        try {
          stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
          video.srcObject = stream;
          video.hidden = false;
          startBtn.disabled = true;
          startCapturing();
        } catch (err) {
          console.error(err);
          alert('Unable to access camera: ' + err.message);
        }
      }

      startBtn.addEventListener('click', () => {
        if (!stream) {
          initCamera();
        }
      });

      window.addEventListener('beforeunload', () => {
        if (stream) {
          stream.getTracks().forEach((track) => track.stop());
        }
        if (captureIntervalId) {
          clearInterval(captureIntervalId);
        }
      });

      const lagInput = document.getElementById('lagInput');
      const charCount = document.getElementById('charCount');
      const lagTime = document.getElementById('lagTime');

      lagInput.addEventListener('input', () => {
        const startTime = performance.now();
        const currentCount = lagInput.value.length;
        charCount.textContent = currentCount;
        const endTime = performance.now();
        const typingLag = endTime - startTime;
        lagTime.textContent = typingLag.toFixed(2);
      });
    </script>
  </body>
</html>

In this example, we capture an image by creating a canvas element, drawing the image on it, converting it to a blob, and then rendering it in the UI.

const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.canvas.width = 640;
      ctx.canvas.height = 480;

function captureFrame() {
        if (!stream) return;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(
          (blob) => {
            if (!blob) return;
            const url = URL.createObjectURL(blob);
            const img = document.createElement('img');
            img.src = url;

            img.onload = () => URL.revokeObjectURL(url);

            captures.prepend(img);
          },
          'image/webp',
          0.9,
        );
  }

Try the example. While capturing an image, type into the input box and observe any lag.

Now that we know there is lag, let’s move canvas operations to a worker to improve performance.

Using Canvas in a Web Worker

We will change the example above by adding a worker script and then using the worker to capture the image.

The initWorker function will create the worker by loading the worker script URL. It will then create the offscreen canvas and use postMessage to send the event data to the worker, passing the offscreen canvas as a transferable object in the second parameter.

Transferable objects are objects that can have their resources moved from one place to another, ensuring the resources are used in only one place at a time.

Now, the offscreen canvas will be available in the worker and can be used for canvas-related tasks.

Offscreen canvas has a different method for converting image data to a blob, called convertToBlob. By default, it provides a high-quality image, so be sure to include the quality parameter as well.

...

<body>
    <script>
      ...
      let worker = null;
      function initWorker() {
        const blob = new Blob(
          [
            `
        self.onmessage = async (e) => {
          if (e.data.type === 'init') {
            self.canvas = e.data.canvas;
            self.ctx = self.canvas.getContext('2d');
          } else if (e.data.type === 'frame') {
            const { bitmap } = e.data;
            self.ctx.drawImage(bitmap, 0, 0, self.canvas.width, self.canvas.height);
            bitmap.close();
            const blob = await self.canvas.convertToBlob({ type: 'image/webp', quality: 0.9 });
            self.postMessage({ type: 'image', blob });
          }
        };
        `,
          ],
          { type: 'application/javascript' },
        );
        const workerUrl = URL.createObjectURL(blob);
        worker = new Worker(workerUrl);

        const offscreen = new OffscreenCanvas(640, 480);
        worker.postMessage({ type: 'init', canvas: offscreen }, [offscreen]);

        worker.onmessage = (e) => {
          if (e.data.type === 'image') {
            const url = URL.createObjectURL(e.data.blob);
            const img = document.createElement('img');
            img.src = url;
            img.onload = () => URL.revokeObjectURL(url);
            captures.prepend(img);
          }
        };
      }

    </script>
</body>
...

Then update captureFrame to use the worker and send the video frame as a bitmap to the worker. This allows the worker to use the bitmap data to draw and capture the image on the canvas.

We use the createImageBitmap API to turn the video frame into a bitmap and then send it as a transferable object. This makes it available in the worker context and usable by the OffscreenCanvas.

function captureFrame() {
        if (!stream || !worker) return;
        createImageBitmap(video).then((bitmap) => {
          worker.postMessage({ type: 'frame', bitmap }, [bitmap]);
        });
}

Lastly, update the initCamera and call the initWorker function before the startCapturing function.

async function initCamera() {
        try {
          stream = await navigator.mediaDevices.getUserMedia({ video: true });
          video.srcObject = stream;
          video.hidden = false;
          startBtn.disabled = true;
          initWorker(); // NEW
          startCapturing();
        } catch (err) {
          console.error(err);
          alert('Unable to access camera: ' + err.message);
        }
}

Try the updated example. While capturing an image, use the input box to type as quickly as possible and observe for any lag.

Notice the difference: when the canvas renders on the main thread, the log is 0.80ms, but in a web worker, it's 0.20ms. This clearly demonstrates better performance. In the real world, this difference can save significant money and reduce the user churn rate.

Conclusion

OffscreenCanvas is a helpful API that allows moving canvas tasks off the main thread, improving performance and user experience. In our example, we:

Created a regular canvas on the main thread
Moved it to a web worker using OffscreenCanvas
Handled image rendering in the worker
Sent the result back to the main thread for display

By using web workers and OffscreenCanvas, you can significantly improve performance in apps that use canvas for rendering. Try it in your next project.

Thanks for reading! If you found this article useful, please like, comment, and share it.

Resources

Why Strong Basics Matter in the AI Era

Sachin Chaurasiya — Mon, 31 Mar 2025 17:49:39 +0000

AI tools have changed how we build software. They can write code, fix bugs, and even help understand large codebases. But as AI gets better, one thing remains true: the better the input, the better the output.

To give AI the right instructions, you need to know what you want, why you want it, and how it will impact your work. That's why having strong basics in coding and problem-solving is more important than ever.

How AI is Changing Software Development

AI has changed how developers work in several ways:

Writing Code

AI tools can write functions, classes, or components based on descriptions. They understand context and can match your coding style.

Understanding Code

AI can analyze large codebases, explain unfamiliar code, and find patterns across different parts of your project.

Finding and Fixing Problems

These tools can spot bugs, suggest fixes, and find performance issues that humans might miss.

Automating Repetitive Tasks

Tasks like creating standard code, transforming data, and making tests can be automated with AI, letting developers focus on more important work.

Helping with Documentation

AI can create, summarize, and update documentation to keep information current.

These features boost productivity, but they depend on your ability to guide the AI effectively. Unclear instructions lead to poor solutions, which is why knowing the basics is so important.

Why The Basics Matter More Now

Good In = Good Out

AI works like this: what you tell it decides what you get back. Clear instructions get good answers. You need:

Basic Skills: Know how coding works so you can ask for what you need
Planning Skills: Understand how parts fit together to guide AI
Problem-Solving: Break big problems into small pieces AI can handle

Know What You Want First

Before asking AI for help, you must know:

What's the real problem? What can't be changed?
Why this way? What other ways could work?
Will it stay good? Is it fast? Easy to fix? Can it grow?

Without these answers, you might get something that works but causes problems later.

Check AI's Answers

Never just trust what AI gives you. Good basics help you:

Find mistakes in AI's code
See security problems AI missed
Make sure the code follows good practices
Check that it actually fixes your problem

Stop Rewording Your Questions

Many people get stuck asking AI the same thing different ways. Strong basics help by:

Letting you ask clearly the first time
Helping you understand what AI says back
Showing how to make real improvements

How to Use AI Better

Think Before You Ask

Start with your own brain:

Know your problem before asking AI
Think of some answers yourself first
Pick parts where AI can help the most
Gather facts that AI needs to understand

Always Double-Check

Never just use what AI gives you:

Try weird cases that might break it
Make sure it's fast, not just working
Look for safety problems AI missed
Keep it simple so others can read it

Get Better Each Time

When AI gives bad answers:

Ask why it didn't work
Learn more about your problem
Add helpful facts in your next try
Break big questions into smaller ones

Conclusion

AI is a great tool, but it can't replace knowledge and experience. To get the most out of it, focus on learning the basics, thinking critically, and improving your problem-solving skills. With strong fundamentals, AI can help you work faster and smarter.

How web worker works with a practical example

Sachin Chaurasiya — Sun, 23 Feb 2025 12:50:09 +0000

Ever noticed a webpage freezing during a heavy task? This happens because JavaScript runs on a single thread by default, causing a bad user experience. Users can't interact and have to wait until the task finishes. This problem can be solved using web workers. In this article, we will discuss what web workers are, why they are useful, and how to use them with a practical example by building an image compression application. Exciting, right? Let's get started.

What are Web Workers?

Web Workers let JavaScript run tasks in the background without blocking the main thread, which keeps your UI smooth and responsive. You can create them using the Web Workers API, which takes two parameters: url and options. Here is a simple example of creating a web worker.

const worker = new Worker('./worker.js', { type: 'module' });

Why use Web Workers?

As mentioned earlier, web workers run tasks in the background. Here are a few reasons to use them

Prevents page lag during heavy computations
Handles large data processing efficiently
Improves performance for complex web applications

How do they work?

The main thread creates a worker and gives it a task
The worker handles the task in the background
When finished, it sends the result back to the main thread

Alright, now we know what a web worker is, why to use them, and how they work. But that's not enough, right? So let's build the image compression application and see how to use web workers in practice.

Project setup

Create a Next.js project with TypeScript and Tailwind CSS

npx create-next-app@latest --typescript web-worker-with-example

cd web-worker-with-example

To compress images in the browser, we will use the @jsquash/web npm library to encode and decode WebP images. This library is powered by WebAssembly, so let's install it.

npm install @jsquash/webp

Great, our project setup is complete. In the next section, we will create a worker script to manage image compression.

Creating worker script

A worker script is a JavaScript or TypeScript file that contains the code to handle worker message events.

Create an imageCompressionWorker.ts file inside the src/worker folder and add the following code.

/// <reference lib="webworker" />

const ctx = self as DedicatedWorkerGlobalScope;

import { decode, encode } from '@jsquash/webp';

ctx.onmessage = async (
  event: MessageEvent<{
    id: number;
    imageFile: File;
    options: { quality: number };
  }>
) => {
  // make sure the wasm is loaded
  await import('@jsquash/webp');

  const { imageFile, options, id } = event.data;
  const fileBuffer = await imageFile.arrayBuffer();
  try {
    const imageData = await decode(fileBuffer);
    const compressedBuffer = await encode(imageData, options);
    const compressedBlob = new Blob([compressedBuffer], {
      type: imageFile.type,
    });
    ctx.postMessage({ id, blob: compressedBlob });
  } catch (error: unknown) {
    const message = error instanceof Error ? error.message : 'Unknown error';
    ctx.postMessage({ id, error: message });
  }
};

export {};

Here, we import the encode and decode methods from the @jsquash/webp library and use the worker global scope, self, to listen for messages from the main thread.

When a message arrives, we get the image file and options, then compress the image by first decoding and then encoding it with the quality option. Finally, we use postMessage to send the compressed image blob back to the main thread. If there's an error, we handle it and send the error message back using postMessage.

The worker script is ready. In the next section, we will build the Imagelist component, update the styles, update the page, and use the worker script to handle the compression.

Using the web worker

Before we start, let's update the global.css file with the following content and remove the default styling.

@tailwind base;
@tailwind components;
@tailwind utilities;

Create a ImageList.tsx in the src/components folder and add the following code.

/* eslint-disable @next/next/no-img-element */
import React from 'react';

export type ImgData = {
  id: number;
  file: File;
  status: 'compressing' | 'done' | 'error';
  originalUrl: string;
  compressedUrl?: string;
  error?: string;
  compressedSize?: number;
};

interface ImageListProps {
  images: ImgData[];
}

const formatBytes = (bytes: number): string => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const dm = 2;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};

const ImageList: React.FC<ImageListProps> = ({ images }) => {
  return (
    <div className="mt-4">
      <h2 className="text-xl font-semibold mb-2">Image List</h2>
      <div className="space-y-4">
        {images.map((img) => (
          <div
            key={img.id}
            className="flex flex-col md:flex-row items-center border p-4 rounded"
          >
            <div className="flex-1 flex flex-col items-center">
              <p className="font-bold mb-2">Original</p>
              <img
                src={img.originalUrl}
                alt="Original"
                className="w-32 h-32 object-cover rounded border mb-2"
              />
              <p className="text-sm">Size: {formatBytes(img.file.size)}</p>
            </div>
            {img.status === 'done' && img.compressedUrl ? (
              <div className="flex-1 flex flex-col items-center mt-4 md:mt-0">
                <p className="font-bold mb-2">Compressed</p>
                <img
                  src={img.compressedUrl}
                  alt="Compressed"
                  className="w-32 h-32 object-cover rounded border mb-2"
                />
                <p className="text-sm">
                  Size:{' '}
                  {img.compressedSize ? formatBytes(img.compressedSize) : 'N/A'}
                </p>
                <a
                  href={img.compressedUrl}
                  download={`${img.file.name.replace(
                    /\.[^/.]+$/,
                    ''
                  )}-compressed.webp`}
                  className="mt-2 inline-block px-3 py-1 bg-blue-500 text-white rounded"
                >
                  Download
                </a>
              </div>
            ) : img.status === 'compressing' ? (
              <div className="flex-1 flex flex-col items-center mt-4 md:mt-0">
                <p className="font-bold">Compressing...</p>
              </div>
            ) : img.status === 'error' ? (
              <div className="flex-1 flex flex-col items-center mt-4 md:mt-0">
                <p className="font-bold text-red-500">Error in compression</p>
              </div>
            ) : null}
          </div>
        ))}
      </div>
    </div>
  );
};

export default ImageList;

The ImageList component takes one prop, images, which is a list of ImgData. It then displays the original and compressed images, showing their size and providing a download option for the compressed images.

Next, update the app/page.tsx with the following code, and let's go through the parts together.

'use client';

import { useState, useRef, useEffect } from 'react';
import ImageList, { ImgData } from '../components/ImageList';

export default function Home() {
  const [images, setImages] = useState<ImgData[]>([]);
  const [text, setText] = useState('');

  const workerRef = useRef<Worker | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || !workerRef.current) return;
    const filesArray = Array.from(files);
    filesArray.forEach((file, index) => {
      const id = Date.now() + index;

      const originalUrl = URL.createObjectURL(file);
      setImages((prev) => [
        ...prev,
        { id, file, status: 'compressing', originalUrl },
      ]);

      // Send the file with its id to the worker.
      workerRef.current!.postMessage({
        id,
        imageFile: file,
        options: { quality: 75 },
      });
    });
  };

  // Initialize the worker once when the component mounts.
  useEffect(() => {
    const worker = new Worker(
      new URL('../worker/imageCompressionWorker.ts', import.meta.url),
      { type: 'module' }
    );
    workerRef.current = worker;

    // Listen for messages from the worker.
    worker.onmessage = (
      event: MessageEvent<{ id: number; blob?: Blob; error?: string }>
    ) => {
      const { id, blob: compressedBlob, error } = event.data;
      setImages((prev) =>
        prev.map((img) => {
          if (img.id === id) {
            if (error) return { ...img, status: 'error', error };
            const compressedSize = compressedBlob!.size;
            const compressedUrl = URL.createObjectURL(compressedBlob!);
            return { ...img, status: 'done', compressedUrl, compressedSize };
          }
          return img;
        })
      );
    };

    return () => {
      worker.terminate();
    };
  }, []);

  return (
    <div className="min-h-screen p-8">
      <h1 className="text-2xl font-bold text-center mb-4">
        Image Compression with Web Workers
      </h1>
      <div className="rounded shadow p-4 mb-4 flex flex-col gap-2">
        <p className="text-sm">
          While images are compressing, you can interact with the textarea below
          and observe the text being typed and UI is not frozen.
        </p>
        <p className="text-sm">
          Even you can open the dev tools and then open the performance tab and
          see the INP(Interaction to Next Paint) is very low.
        </p>
        <textarea
          className="w-full h-32 border rounded p-2 text-black"
          placeholder="Type here while images are compressing..."
          value={text}
          onChange={(e) => setText(e.target.value)}
        ></textarea>
      </div>
      <div className="rounded shadow p-4">
        <input
          type="file"
          multiple
          accept="image/webp"
          onChange={handleFileChange}
        />
        <ImageList images={images} />
      </div>
    </div>
  );
}

First, we import the hooks and the ImageList component, along with ImgData for type.

import { useState, useRef, useEffect } from 'react';
import ImageList, { ImgData } from '../components/ImageList';

Then, we create a ref to hold the worker instance because we don't want to create the worker repeatedly with each re-render. We also want to avoid re-rendering the component if the worker instance changes.

const workerRef = useRef<Worker | null>(null);

In the useEffect, we are initializing the worker instance by using the imageCompressionWorker.ts worker script we created earlier.

We use the URL API with import.meta.url. This makes the path relative to the current script instead of the HTML page. This way, the bundler can safely optimize, like renaming, because otherwise, the worker.js URL might point to a file not managed by the bundler, stopping it from making assumptions. Read more here.

Once the worker is initialized, we listen for messages from it. When we receive a message, we extract the id, blob, and error, then update the images state with the new values.

Finally, we clean up the worker when the component unmounts.

useEffect(() => {
    const worker = new Worker(
      new URL('../worker/imageCompressionWorker.ts', import.meta.url),
      { type: 'module' }
    );
    workerRef.current = worker;

    // Listen for messages from the worker.
    worker.onmessage = (
      event: MessageEvent<{ id: number; blob?: Blob; error?: string }>
    ) => {
      const { id, blob: compressedBlob, error } = event.data;
      setImages((prev) =>
        prev.map((img) => {
          if (img.id === id) {
            if (error) return { ...img, status: 'error', error };
            const compressedSize = compressedBlob!.size;
            const compressedUrl = URL.createObjectURL(compressedBlob!);
            return { ...img, status: 'done', compressedUrl, compressedSize };
          }
          return img;
        })
      );
    };

    return () => {
      worker.terminate();
    };
  }, []);

To manage image file uploads, we use the handleFileChange method. This method listens for the onchange event of the file input, processes the files, and sends them to the worker for compression.

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || !workerRef.current) return;
    const filesArray = Array.from(files);
    filesArray.forEach((file, index) => {
      const id = Date.now() + index;

      const originalUrl = URL.createObjectURL(file);
      setImages((prev) => [
        ...prev,
        { id, file, status: 'compressing', originalUrl },
      ]);

      // Send the file with its id to the worker.
      workerRef.current!.postMessage({
        id,
        imageFile: file,
        options: { quality: 75 },
      });
    });
  };

Finally, render the elements the textarea, image input, and image list.

User Selects Images: The user picks images using the file input, which makes the component create object URLs and mark each image as "compressing."
Worker Communication: The component sends each image file (with options) to the Web Worker.
Parallel Processes:
- Text Area Interaction: At the same time, the user can type in the text area, showing that the UI is not blocked.
- Image Compression: The worker compresses the image in the background.
Completion: When compression is done, the worker sends the result back to the component, which updates the UI with the compressed image while the text area keeps working smoothly.

Great, everything is set up. In the next section, we will run the application and see how the web worker works.

Running the example

Open the terminal and run the command below, then go to http://localhost:3000/.

npm run dev

Try the live demo here: https://web-worker-with-example.vercel.app/

Conclusion

Web workers are a great tool to improve application performance. By using Web Workers, you ensure faster, smoother, and more responsive applications. However, they should not be overused and should only be used when necessary. Also, check browser support, which is currently about 98% globally. You can check it here.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Resources

SocialBuddy: create simple, impactful content for any platform

Sachin Chaurasiya — Fri, 24 Jan 2025 18:08:21 +0000

This is a submission for the Agent.ai Challenge: Productivity-Pro Agent (See Details)

What I Built

What exactly is SocialBuddy?

SocialBuddy is your new best friend for crafting engaging, creative, and platform-specific social media posts. Whether you're focusing on LinkedIn, Peerlist, Twitter, Facebook, or Instagram, SocialBuddy is here to help you create content that's simple, impactful, and designed to truly connect with your audience.

Why did I build SocialBuddy?

Content is the ultimate way to connect with your audience on any social media platform, and each piece of content has its own uniqueness. Copying and pasting the same content across all platforms is not a good approach, as it can suggest that you only care about posting and not about simplicity, impact, and audience connection. So, what can we do?

We can create tailored content for different social media platforms, but this will require time and effort to think about and write content for each one. So, how can we solve this problem? 🤔

You don’t have to think too much! Let me share my secret: how about creating the content once and then using a tool to adapt it for different social media platforms?

Exciting, right? That’s why I built SocialBuddy, a tool designed to assist you in this process and enhance your productivity!

Demo

Did you see the demo? Exciting, right? Why not try it out for yourself here: https://agent.ai/agent/SocialBuddy

Agent.ai Experience

Using the Agent.ai Builder was a great experience! It was my first time creating AI agents, and the variety of actions made it simple to develop and improve SocialBuddy.

I found it easy to create the AI agent, thanks to the "Actions" feature, which helped me break down my ideas into clear steps. One challenge I faced was understanding the documentation. I recommend adding visual examples to show what each action does, as it would be helpful for beginners.

Overall, the platform's flexibility and tools enabled me to create an agent that can save a significant amount of time for content creators and enhance their productivity to a pro level.

If you're on the lookout for some assistance with your social media content, why not give SocialBuddy a try? I'd love to hear what you think!

How to Use Proxy Objects in JavaScript

Sachin Chaurasiya — Sat, 26 Oct 2024 18:38:03 +0000

Objects in JavaScript are useful data types that let us define complex data with simple key-value pairs, like a dictionary. Sometimes, you might want to change how JavaScript objects work by default. This is where Proxy Objects are helpful. In this article, we will discuss what proxy objects are, why they are useful, and how to use them.

What is a Proxy Object?

Before understanding what a Proxy Object is, let's look at the word Proxy. A proxy means something that acts like the original thing but isn't the original thing. Similarly, a Proxy Object is an object created using the original object that can intercept and change how the original object works.

The Proxy constructor takes two parameters

target: the object you want to create a proxy for
handler: an object with operations you want to change or redefine

const proxyObject = new Proxy(target, handler)

How Does a Proxy Object Work?

When we create Proxy Objects with a handler that has operations you want to change, it intercepts those operations, catches the call to the target object, and runs the custom logic you defined for those operations.

The operations are called traps, which are basically the internal methods of an object. Some of them are:

get
set
deleteProperty

Here, I have created a simple visual showing how a Proxy Object works. If we try to access or set a value, it intercepts and runs the operations (traps) defined in the handler.

Alright, I hope the what and how of Proxy Objects are clear. Next, we will discuss some use cases to show why Proxy Objects are useful.

Use cases of Proxy Object

Logging

Let's say you want to create a system where every time a property is accessed from the object, it logs the information.

const platform = {
  type: "peerlist.io",
  handle: "sachin87",
};

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    return target[key];
  },
});

// try to access the property
proxyPlatformObj.type;

// [Info]: Accessing type at 1729661722827

// 'peerlist.io'

This is a very simple use case, but it's useful when logging is needed, and you can expand it to do more advanced things.

We can also let users access properties that aren't directly available. For example, in the case above, we might want the full URL of the platform with the user handle.

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    if (key === "url") {
      return `https://${target.type}/${target.handle}`;
    }
    return target[key];
  },
});

// try to access the url property
proxyPlatformObj.url;

// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'

Validation

Another use case is checking the value before adding it. For instance, let's say we want to check the handle's value before setting it. We will validate two basic conditions:

It should be in lowercase
It can be alphanumeric

const proxyPlatformObj = new Proxy(platform, {
  set(target, key, value) {
    if (key === "handle" && !(/^[a-z0-9]+$/.test(value))) {
      console.error(`[Error]: ${key} should be in small case and can be alphanumerical`);
    } else {
      return Reflect.set(target, key, value);
    }
  },
});

proxyPlatformObj.handle="Sachin87"
// [Error]: handle should be in small case and can be alphanumerical

You might be wondering what Reflect.set(target, key, value) is. It's a namespace object with static methods for calling JavaScript object's internal methods that can be intercepted. If you don't want validation for all properties, you can use the Reflect object to keep the default behavior.

We talked about two use cases logging and validation, but you can intercept other internal methods based on your needs.

Conclusion

We talked about what a Proxy Object is, how it works, and some of its uses. A Proxy Object is helpful, but we should be aware of its downsides. We should use it only when necessary to avoid adding complexity or bugs by mistake.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

How to Build a Collaborative Editor with Next.js and Liveblocks

Sachin Chaurasiya — Sun, 06 Oct 2024 18:53:32 +0000

Collaborative applications are now essential in modern software, allowing multiple users to work on the same document, design, or codebase at the same time. Think of Google Docs, Figma, or multiplayer coding platforms these tools are powerful because they offer real-time collaboration, where every change is instantly visible to everyone.

In this guide, I'll show you how to build a collaborative text editor using Next.js and Liveblocks, a library that makes real-time collaboration easy. By the end, you'll have a working editor where multiple users can edit a document, see each other's changes in real-time, and track who is online and what they are doing.

What to Expect from This Guide?

Part 1: Understanding Collaborative Editors and the Role of Liveblocks

In the first part, we'll look at what collaborative editors are, how they work, and the technologies behind them. We'll focus on WebSockets for real-time updates and discuss how Liveblocks makes building these features easier.

Part 2: Building the Collaborative Editor Step-by-Step

In the second part, we'll start building the editor from scratch. We'll set up the project, integrate Liveblocks, and add features like real-time editing, user presence indicators, and managing document state. By the end, you'll have a live, shareable editor to show off.

Ready to get started? First, let's understand the basics of collaborative editors, the technology behind them, and why Liveblocks is perfect for building them.

What is a Collaborative Editor?

Imagine you're editing a document with a friend. You both see each other’s changes in real-time, making it feel like you're working on the same computer. That’s the magic of collaborative editors.

A collaborative editor is a software tool that lets multiple users work on the same document or file at the same time. Each user can make changes, and everyone sees these updates instantly. Examples include Google Docs, Notion, and Figma.

How Do Collaborative Editors Work?

Collaborative editors use real-time communication between users and a shared server. Here’s a simple overview of how it works

When a user edits the document, the changes are sent to the server.
The server processes these changes and sends them to all connected users.
Everyone’s view updates instantly, showing the changes in real-time.

In scenarios where multiple users make changes simultaneously, the editor must effectively manage these updates to ensure consistency. This is where the technology that enables this real-time synchronization comes into play: WebSockets.

The Technology Behind Real-Time Collaboration: WebSockets

Most traditional websites use HTTP requests to talk to servers. This works well for static pages but isn't quick enough for real-time apps like collaborative editors.

WebSockets fix this by allowing ongoing, two-way communication between the client and the server. Instead of sending separate requests for every update, a WebSocket connection stays open. This way, data can be sent and received instantly as changes occur.

Here's a simple explanation of how WebSocket communication works

User 1 makes an edit.
The server gets the edit and sends it to both User 1 and User 2.
User 2 makes an edit, and the server sends it to both users again.

This way, everyone sees the same document version in real-time.

Liveblocks: Simplifying Real-Time Collaboration

Building a collaborative editor from scratch is possible, but handling real-time sync, conflict resolution, and user presence can be tricky. This is where Liveblocks helps.

Liveblocks is a powerful library that makes building collaborative apps easier. Instead of writing all the WebSocket and state management code yourself, you can use Liveblocks’ built-in features, such as

Presence: Track who is online and what they are doing.
Storage: Share and sync documents, drawings, or any content.
Room Management: Manage connections and permissions for multiple users.

Here’s why using Liveblocks can save you a lot of time:

Built-in Presence: See who’s editing, where their cursors are, and what they’re typing all in real-time.
Conflict Handling: Easily manage updates when multiple users make changes at the same time.
Simple Integration: It works seamlessly with popular frontend frameworks like Next.js, making it easier to build and scale.

By using Liveblocks, you can focus on building the core features of your editor without worrying about low-level communication details.

Project Setup

Let's start by creating a new Next.js project.

npx create-next-app@latest collaborative-editor --typescript

After creating the project install the Liveblocks dependencies

npm install @liveblocks/client @liveblocks/node @liveblocks/react @liveblocks/yjs @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor @tiptap/pm @tiptap/react @tiptap/starter-kit yjs

Next, create a Liveblocks config to set up the types for the user information and to display the cursor in the editor.

// liveblocks.config.ts

declare global {
  interface Liveblocks {
    Presence: { cursor: { x: number; y: number } | null };
    UserMeta: {
      id: string;
      info: {
        name: string;
        color: string;
        picture: string;
      };
    };
  }
}

export {};

Go to https://liveblocks.io/ and sign up for a free account. After signing up, you'll be taken to the dashboard where you will see two projects created for you. Select the first project, go to the API keys section on the left panel, and get the secret key.

Create a .env file and add LIVEBLOCKS_SECRET_KEY environment variable and secret key you copied from the API keys dashboard.

LIVEBLOCKS_SECRET_KEY=sk_dev_xxxxxxxxxx_xxxxxxx_xxx_xxxxx_x

Alright, the project setup is done. In the next section, we will create components for our editor.

Create components for the editor

I won't talk about styling because this post is about building a collaborative editor with Liveblocks and Next.js. I'll share a GitHub link for the CSS and icon files.

Here is the link for all components, their CSS files, and icons

Let's start by creating a toolbar component and adding the following code. We will use Tiptap to build the editor because it is one of my favorite tools for creating rich text and collaborative editors.

// components/Toolbar.tsx

import { Editor } from "@tiptap/react";
import styles from "./Toolbar.module.css";

type Props = {
  editor: Editor | null;
};

export function Toolbar({ editor }: Props) {
  if (!editor) {
    return null;
  }

  return (
    <div className={styles.toolbar}>
      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleBold().run()}
        data-active={editor.isActive("bold") ? "is-active" : undefined}
        aria-label="bold"
      >
        <BoldIcon />
      </button>
      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleItalic().run()}
        data-active={editor.isActive("italic") ? "is-active" : undefined}
        aria-label="italic"
      >
        <ItalicIcon />
      </button>
      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleStrike().run()}
        data-active={editor.isActive("strike") ? "is-active" : undefined}
        aria-label="strikethrough"
      >
        <StrikethroughIcon />
      </button>

      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleBlockquote().run()}
        data-active={editor.isActive("blockquote") ? "is-active" : undefined}
        aria-label="strikethrough"
      >
        <BlockQuoteIcon />
      </button>

      <button
        className={styles.button}
        onClick={() => editor.chain().focus().setHorizontalRule().run()}
        data-active={undefined}
        aria-label="horizontal-line"
      >
        <HorizontalLineIcon />
      </button>

      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleBulletList().run()}
        data-active={editor.isActive("bulletList") ? "is-active" : undefined}
        aria-label="bullet-list"
      >
        <BulletListIcon />
      </button>

      <button
        className={styles.button}
        onClick={() => editor.chain().focus().toggleOrderedList().run()}
        data-active={editor.isActive("orderedList") ? "is-active" : undefined}
        aria-label="number-list"
      >
        <OrderedListIcon />
      </button>
    </div>
  );
}

Here we are using the Tiptap editor and its formatting options like italic, bold, and lists.

Next, let's create an Avatars component to display all the online users in the room.

// components/Avatars.tsx

import { useOthers, useSelf } from "@liveblocks/react/suspense";
import styles from "./Avatars.module.css";

export function Avatars() {
  const users = useOthers();
  const currentUser = useSelf();

  return (
    <div className={styles.avatars}>
      {users.map(({ connectionId, info }) => {
        return (
          <Avatar key={connectionId} picture={info.picture} name={info.name} />
        );
      })}

      {currentUser && (
        <div className="relative ml-8 first:ml-0">
          <Avatar
            picture={currentUser.info.picture}
            name={currentUser.info.name}
          />
        </div>
      )}
    </div>
  );
}

export function Avatar({ picture, name }: { picture: string; name: string }) {
  return (
    <div className={styles.avatar} data-tooltip={name}>
      <img
        src={picture}
        className={styles.avatar_picture}
        data-tooltip={name}
      />
    </div>
  );
}

Here we are using two hooks:

useOthers: to get the list of other users connected to the same room I'm in.
useSelf: to get the info of my own user

Now let's create an ErrorListener component to catch any errors happening inside the Liveblocks provider. most important one is the 4001 when user is trying to connect the room which they don’t have access to.

// components/ErrorListener.tsx

"use client";

import { useErrorListener } from "@liveblocks/react/suspense";

import React from "react";

import styles from "./ErrorListener.module.css";
import { Loading } from "./Loading";

const ErrorListener = () => {
  const [error, setError] = React.useState<string | undefined>();

  useErrorListener((error) => {
    switch (error.code) {
      case -1:
        setError("Could not connect to Liveblocks");

        break;

      case 4001:
        // Could not connect because you don't have access to this room
        setError("You don't have access to this room");

        break;

      default:
        setError("An unexpected error occurred");

        break;
    }
  });

  return error ? (
    <div className={styles.container}>
      <div className={styles.error}>{error}</div>
    </div>
  ) : (
    <Loading />
  );
};

export default ErrorListener;

Thanks to Liveblocks for making things easier with the useErrorListener hook, which handles all the error-catching logic in our collaborative application.

Next is the ConnectToRoom component, which shows the initial UI where the user enters the room name they want to join. Then, it redirects to the room page using the entered name as the roomId.

// components/ConnectToRoom.tsx

"use client";

import React from "react";
import styles from "./ConnectToRoom.module.css";

import { useRouter } from "next/navigation";

const ConnectToRoom = () => {
  const router = useRouter();

  const inputRef = React.useRef<HTMLInputElement>(null);

  const connectToRoom = async () => {
    const roomId = inputRef.current?.value;
    if (roomId && roomId.length > 0) {
      await (async () => router.push(`/room?roomId=${roomId}`))();
    }
  };

  return (
    <div className={styles.container}>
      <h1>Connect to a room</h1>
      <p>Connect to a room to start collaborating with others.</p>
      <input
        ref={inputRef}
        type="text"
        placeholder="Room ID"
        className={styles.input}
      />
      <button className={styles.button} onClick={connectToRoom}>
        Connect
      </button>
    </div>
  );
};

export default ConnectToRoom;

Since we will get the roomId from the URL, let's create a custom hook.

// hooks/useRoomId.ts

import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

export const useRoomId = () => {
  const searchParams = useSearchParams();

  const [roomId, setRoomId] = useState<string | null>(
    searchParams.get("roomId")
  );

  useEffect(() => {
    setRoomId(searchParams.get("roomId"));
  }, [searchParams]);

  return roomId;
};

Lastly, there's the Editor component, which works together with Tiptap and Liveblocks to create some of the magic.

// components/Editor.tsx

"use client";

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import * as Y from "yjs";
import { LiveblocksYjsProvider } from "@liveblocks/yjs";
import { useRoom, useSelf } from "@liveblocks/react/suspense";
import { useEffect, useState } from "react";
import { Toolbar } from "./Toolbar";
import styles from "./Editor.module.css";
import { Avatars } from "@/components/Avatars";

export function Editor() {
  const room = useRoom();
  const [doc, setDoc] = useState<Y.Doc>();
  const [provider, setProvider] = useState<any>();

  useEffect(() => {
    const yDoc = new Y.Doc();
    const yProvider = new LiveblocksYjsProvider(room, yDoc);
    setDoc(yDoc);
    setProvider(yProvider);

    return () => {
      yDoc?.destroy();
      yProvider?.destroy();
    };
  }, [room]);

  if (!doc || !provider) {
    return null;
  }

  return <TiptapEditor doc={doc} provider={provider} />;
}

type EditorProps = {
  doc: Y.Doc;
  provider: any;
};

function TiptapEditor({ doc, provider }: EditorProps) {
  const userInfo = useSelf((me) => me.info);

  const editor = useEditor({
    editorProps: {
      attributes: {
        class: styles.editor,
      },
    },
    extensions: [
      StarterKit.configure({
        history: false,
      }),
      Collaboration.configure({
        document: doc,
      }),
      CollaborationCursor.configure({
        provider: provider,
        user: userInfo,
      }),
    ],
  });

  return (
    <div className={styles.container}>
      <div className={styles.editorHeader}>
        <Toolbar editor={editor} />
        <Avatars />
      </div>
      <EditorContent editor={editor} className={styles.editorContainer} />
    </div>
  );
}

Liveblocks gives us a YJS provider that helps define and store the editor content. Plus, Tiptap supports collaboration extensions, making it easy to set up collaboration.

Great, our editor is ready, but for collaboration, we need to set up the Liveblocks provider and RoomProvider. This will allow users to authenticate themselves and create a session for the room they want to join.

In the next section, we will discuss rooms and how Liveblocks enable real-time collaboration.

Set Up Liveblocks Provider and Room Provider

Before writing the code let's first understand how Liveblocks work with the diagram.

When a user opens the app, it sends a request to find out which room they want to join. The room ID is obtained using the useRoomId hook.
After getting the roomId, the LiveblocksProvider is set up.
An authentication request is sent to /api/liveblocks-auth (we will set this up soon) with the roomId to check the user's access.
If the authentication is successful, the room setup starts. This includes creating a new collaborative document instance (Y.Doc) and setting up a provider (LiveblocksYjsProvider) to handle synchronization with the Liveblocks backend.
The LiveblocksYjsProvider opens a WebSocket connection with Liveblocks, joining the specified room.
The initial presence state (like cursor position and user activity) is shared with other participants in the room.
User Presence: When a user joins, their presence is updated and shared with everyone in the room.
Cursor Tracking: Their cursor position is tracked and shared instantly using the CollaborationCursor extension.
Document Synchronization: Any changes a user makes are sent to the Liveblocks server, which updates the shared document for all users.
If User A edits the document, these changes are sent to Liveblocks as updates.
Liveblocks sends these changes to all users, keeping the document in sync.
When User B joins, their cursor and presence are shared with everyone.
When a user leaves, the Y.Doc instance and provider are removed, and the WebSocket connection is closed.
This starts a cleanup process to remove the user’s presence and updates from the room.

I hope the explanation above helps you understand how Liveblocks works.

As mentioned, Liveblocks needs an endpoint to verify the user and start a session for the room they want to join. So, let's create an API endpoint called liveblocks-auth.

// app/api/liveblocks-auth/route.ts

import { Liveblocks } from "@liveblocks/node";
import { NextRequest } from "next/server";

const liveblocks = new Liveblocks({
  secret: process.env.LIVEBLOCKS_SECRET_KEY!,
});

export async function POST(request: NextRequest) {
  const userId = Math.floor(Math.random() * 10) % USER_INFO.length;

  const roomId = request.nextUrl.searchParams.get("roomId");

  const session = liveblocks.prepareSession(`session-${userId}`, {
    userInfo: USER_INFO[userId],
  });

  session.allow(roomId!, session.FULL_ACCESS);

  const { body, status } = await session.authorize();
  return new Response(body, { status });
}

const USER_INFO = [
  {
    name: "Sachin Chaurasiya",
    color: "#D583F0",
    picture: "https://github.com/Sachin-chaurasiya.png",
  },
  {
    name: "Mislav Abha",
    color: "#F08385",
    picture: "https://liveblocks.io/avatars/avatar-2.png",
  },
  {
    name: "Tatum Paolo",
    color: "#F0D885",
    picture: "https://liveblocks.io/avatars/avatar-3.png",
  },
  {
    name: "Anjali Wanda",
    color: "#85EED6",
    picture: "https://liveblocks.io/avatars/avatar-4.png",
  },
  {
    name: "Jody Hekla",
    color: "#85BBF0",
    picture: "https://liveblocks.io/avatars/avatar-5.png",
  },
  {
    name: "Emil Joyce",
    color: "#8594F0",
    picture: "https://liveblocks.io/avatars/avatar-6.png",
  },
  {
    name: "Jory Quispe",
    color: "#85DBF0",
    picture: "https://liveblocks.io/avatars/avatar-7.png",
  },
  {
    name: "Quinn Elton",
    color: "#87EE85",
    picture: "https://liveblocks.io/avatars/avatar-8.png",
  },
];

Here, we are using fake user data, but in a real product, you would get the user data from the database and then create the session.

This line lets the user access the room with full permissions, which are room:read and room:write. This is just for demo purposes, but in real situations, access will depend on the user's role.

session.allow(roomId!, session.FULL_ACCESS);

Next, Let's create a Provider component and use it in the RootLayout.

// app/Providers.tsx

"use client";

import { useRoomId } from "@/hooks/useRoomId";
import { LiveblocksProvider } from "@liveblocks/react";
import { type PropsWithChildren } from "react";

export function Providers({ children }: PropsWithChildren) {
  const roomId = useRoomId();

  return (
    <LiveblocksProvider
      key={roomId}
      authEndpoint={`/api/liveblocks-auth?roomId=${roomId}`}
    >
      {children}
    </LiveblocksProvider>
  );
}

Update the root layout and wrap the children with the providers.

// app/layout.tsx
import { Providers } from "./Providers";
...

return (
    ...
    <body>
      <Providers>{children}</Providers>
    </body>
    ...
)

Alright, the providers are set up. Now, let's create a Room component using RoomProvider.

// app/Room.tsx

"use client";

import { ReactNode } from "react";
import { RoomProvider } from "@liveblocks/react/suspense";
import { ClientSideSuspense } from "@liveblocks/react";
import ErrorListener from "@/components/ErrorListener";
import { useRoomId } from "@/hooks/useRoomId";

export function Room({ children }: { children: ReactNode }) {
  const roomId = useRoomId();

  return (
    <RoomProvider
      id={roomId ?? ""}
      initialPresence={{
        cursor: null,
      }}
      key={roomId}
    >
      <ClientSideSuspense fallback={<ErrorListener />}>
        {children}
      </ClientSideSuspense>
    </RoomProvider>
  );
}

Here, RoomProvider uses two props: roomId and initialPresence for the user's cursor, which is just the x, y position of the cursor.

We use ClientSideSuspense with the ErrorListener component as a fallback. If there's an error, it will show the error; otherwise, it will display a loader, meaning the providers are still loading.

Next, create the Room page and add the following code. It's straightforward: use the Room component to wrap the Editor so that the editor gets all the connections in that specific room.

// app/room/page.tsx
"use client";

import { Room } from "@/app/Room";
import { Editor } from "@/components/Editor";

export default function RoomPage() {
  return (
    <main>
      <Room>
        <Editor />
      </Room>
    </main>
  );
}

Finally, update the Home page, which is app/page.tsx.

import ConnectToRoom from "@/components/ConnectToRoom";

export default function Home() {
  return (
    <main>
      <ConnectToRoom />
    </main>
  );
}

Alright, Liveblocks providers are set up correctly. Now, let's move on to the most exciting part: testing our collaborative editor. Are you excited? I am too! Let's test it in the next section.

Testing

Start the dev server by running the following command

npm run dev

The server will start on localhost:3000, and you will see the "Connect to Room" interface.

Enter the room ID, and you will be taken to the room page where you can work with other users in real time.

Here is an example of two users connecting to the same room, local-room.

Great job, and congratulations on building the editor with real-time collaboration.

Thanks for reading to the end. If you don't want to miss interesting topics and project-building content, subscribe to the Dev Buddy newsletter.

Conclusion

In this guide, we explore the power of collaborative applications, focusing on building a real-time collaborative text editor using Next.js and Liveblocks.

We break down the process into understanding the role of collaborative editors and setting up a project with features like real-time editing, user presence tracking, and document state management.

Resources

GitHub Repo
Thanks to Liveblocks for creating different examples here

What is Retrieval-Augmented Generation (RAG)?

Sachin Chaurasiya — Sat, 21 Sep 2024 16:37:27 +0000

In recent years, AI models like GPT-4 have become super popular for generating text that sounds human-like. These models are called Large Language Models (LLMs), and they’re great for writing articles, answering questions, and even creating stories. But, they have some limits. we’ll talk about how Retrieval-Augmented Generation (RAG) makes these models even better.

Why Do Large Language Models (LLMs) Have Limits?

Even though LLMs are incredibly smart, they still have some challenges

Old Information

LLMs only know what they were trained on. They don’t know about anything that happened after their training, so they can miss out on the latest news or facts.

Limited Memory

If you have a long conversation or ask many questions, LLMs can forget the earlier part of the conversation because they can only hold so much information at once.

Guessing Sometimes

Sometimes, LLMs don’t know the answer but will make something up that sounds believable. This is called hallucination and it’s a big problem if you need correct information.

What is Retrieval-Augmented Generation (RAG)?

RAG helps solve these issues by allowing the AI model to look up information before giving you an answer. Here’s how it works

Step 1: Find Information

When you ask a question, instead of only relying on what the model already knows, RAG searches for extra information from the web, databases, or other sources.

Step 2: Combine

After finding relevant information, RAG gives it to the AI model, which combines it with its own knowledge to come up with a response.

Step 3: Generate Answer

The AI then uses both the information it found and what it already knows to create a more accurate and up-to-date answer.

How Does RAG Help?

Here are some of the ways RAG improves how AI models work

Stays Up-to-Date

RAG can look for real-time information from live sources, which means it can answer questions based on current facts.

Fewer Mistakes

Since RAG finds real facts from external sources, it reduces the chances of the AI making up wrong information.

Handles Specific Topics

If the AI needs to answer a question about a specific subject (like medicine or law), RAG can find data from trusted sources in that field, making the answers much more reliable.

In short, Retrieval-Augmented Generation (RAG) makes AI models smarter and more reliable by letting them find and use real-time information before answering. This makes it a fantastic tool for anything that needs up-to-date or factual information, like research, customer service, or learning new things.

RAG is an exciting development, and it shows how AI can continue to get better at understanding and helping us in more useful ways.

Thanks for reading till the end! I’ll see you next week with another interesting topic. Until then, happy learning!

Connect with me

How to Use Broadcast Channel API in React

Sachin Chaurasiya — Sat, 14 Sep 2024 17:56:09 +0000

In today’s web applications, keeping information updated across multiple tabs or windows can greatly enhance the user experience. For instance, if a user logs out in one tab, you want that action to be reflected in all other tabs. The Broadcast Channel API makes this easy by allowing communication between different browsing contexts of the same origin. This article will guide you on how to use this API in a React application.

What is the Broadcast Channel API?

The Broadcast Channel API is a simple method to enable communication between different tabs, windows, or iframes of the same website. It allows you to broadcast messages to all other contexts listening on the same channel, making it ideal for real-time updates and synchronization.

Why Use It?

• Real-Time Updates: Sync data like user sessions across different tabs.

• Ease of Integration: Simple to add to your existing React app.

• No Additional Libraries: Functions natively in modern browsers without extra dependencies.

Setting Up the Broadcast Channel API in React

Let’s walk through how to use the Broadcast Channel API in a React application by creating a custom hook to manage communication.

Create a Custom Hook

First, create a custom hook named useBroadcastChannel to encapsulate the Broadcast Channel logic.

import { useEffect, useState } from 'react';

const useBroadcastChannel = (channelName) => {
    const [message, setMessage] = useState(null);
    const channel = new BroadcastChannel(channelName);

    useEffect(() => {
        const handleMessage = (event) => {
            setMessage(event.data);
        };

        channel.onmessage = handleMessage;

        // Clean up the channel when the component unmounts
        return () => {
            channel.close();
        };
    }, [channel]);

    const sendMessage = (msg) => {
        channel.postMessage(msg);
    };

    return { message, sendMessage };
};

export default useBroadcastChannel;

This hook creates a new BroadcastChannel, listens for incoming messages, and provides a function to send messages.

Use the Hook in a React Component

Let’s use our custom hook in a React component to manage login sessions across different tabs.

import React, { useEffect } from 'react';
import useBroadcastChannel from './useBroadcastChannel';

const AuthManager = () => {
    const { message, sendMessage } = useBroadcastChannel('auth_channel');

    const handleLogin = () => {
        // Notify all tabs that the user has logged in
        sendMessage({ type: 'login', user: 'JohnDoe' });
    };

    const handleLogout = () => {
        // Notify all tabs that the user has logged out
        sendMessage({ type: 'logout' });
    };

    useEffect(() => {
        if (message) {
            if (message.type === 'logout') {
                alert('You have been logged out in another tab!');
            }
        }
    }, [message]);

    return (
        <div>
            <h1>Authentication Manager</h1>
            <button onClick={handleLogin}>Log In</button>
            <button onClick={handleLogout}>Log Out</button>
        </div>
    );
};

export default AuthManager;

This AuthManager component uses the useBroadcastChannel hook to handle user authentication state across tabs. When a user logs in or out, a message is sent to all other tabs on the auth_channel channel. If a logout message is received in any tab, it triggers an alert to notify the user.

Conclusion

The Broadcast Channel API provides a straightforward way to synchronize data across multiple tabs or windows in your web applications. By using a custom React hook, you can easily manage real-time messaging and improve user experience. Whether you’re handling login states or syncing other types of data, the Broadcast Channel API simplifies cross-tab communication.

DEV Community: Sachin Chaurasiya

Open Source is Not Just for Hacktoberfest

The Problem: October-Only Open Source

The Discovery: Finding Skyflo.ai

What is Skyflo.ai?

Understanding the Architecture

The Three-Layer Design

Why This Architecture Works

Key Learnings from Production AI Systems

1. LangGraph for Stateful Agents

2. MCP: The USB-C for AI

3. Human-in-the-Loop is Non-Negotiable

4. Real-Time Streaming Builds Trust

5. Safety-First Design

My Contributions to Skyflo.ai

Features Shipped

Bug Fixes & UX Improvements

Documentation

My Journey: Challenges and Breakthroughs

Understanding LangGraph State Management

Decoding the MCP Abstraction

Grasping the Approval Flow

Beyond Hacktoberfest: The Year-Round Journey

October: The Starting Point

November-December: Go Deeper

Year-Round: Become a Maintainer

The Contributor Mindset

Your Turn: Start Now

Resources

Connect With Me

The debate around AI coding agents misses the point. One side says "AI sucks,” the other says "skill issue." After months of building with Claude Code and Cursor, I’ve learned this: the real skill isn’t prompt engineering,it’s understanding the context win

The #1 Skill Most Developers Miss When Using AI Coding Agents

The #1 Skill Most Developers Miss When Using AI Coding Agents

What is the Context Window?

Context Windows in 2025

The Paradox: More Context, Worse Performance

1. Cost & Memory

2. Performance Degradation

Case Study: A 10 Million Token Window is Useless If the Model Can’t Use It

The Solution: Keep Your Context Lean and Focused

Step 1: Get Full Transparency Into Your Context Usage

Step 2: Your Default Action Should Be to clear the Conversation

Step 3: Use compact When You Need to Preserve the Conversation's Intent

A Word of Warning: Hidden Context Can Sabotage Performance

Key Takeaways

The New Mindset

How to Build Production-Grade Agentic AI

Agentic AI Is a Shift in System Design

From Single Models to Agentic Workflows

One Agent, One Responsibility

Tools Matter More Than Intelligence

Don’t Use AI Where You Don’t Need It

Responsible AI Through Multi-Model Reasoning

Separate Workflow Logic from Interfaces

Containerization and Production Readiness

Keep It Simple (KISS)

Final Thoughts

How to use canvas in Web Workers with OffscreenCanvas

What is OffscreenCanvas?

Using Canvas in the main thread

Using Canvas in a Web Worker

Conclusion

Resources

Why Strong Basics Matter in the AI Era

How AI is Changing Software Development

Writing Code

Understanding Code

Finding and Fixing Problems

Automating Repetitive Tasks

Helping with Documentation

Why The Basics Matter More Now

Good In = Good Out

Know What You Want First

Check AI's Answers

Stop Rewording Your Questions

How to Use AI Better

Think Before You Ask

Always Double-Check

Get Better Each Time

Conclusion

Step 2: Your Default Action Should Be to `clear` the Conversation

Step 3: Use `compact` When You Need to Preserve the Conversation's Intent