Forem: Mohammed Taukir Sheikh

How to Build Your Own Local AI Agent: Setting Up OpenClaw with Ollama and Slack on Ubuntu

Mohammed Taukir Sheikh — Thu, 02 Apr 2026 16:22:27 +0000

Imagine having a personal assistant that lives on your computer, respects your privacy, costs $0 in subscription fees, and chats with you directly through Slack.

This guide will show you how to set up OpenClaw (an open-source AI agent), Ollama (to run the AI brain locally), and Slack (the interface) on an Ubuntu system. Even if you aren't a Linux expert, you can follow these steps to get your agent running.

Prerequisites

A computer running Ubuntu (20.04 or newer).
A Slack workspace where you have permission to add apps.
Basic comfort with the Terminal (Ctrl+Alt+T).

Step 1: Install the "Brain" (Ollama)

Ollama allows your computer to run powerful AI models (like Llama 3 or Qwen) locally so your data never leaves your machine.

Run the Installer: Open your terminal and paste this command:

curl -fsSL https://ollama.com | sh

Download a Model: We’ll use qwen2.5-coder, which is excellent at following instructions and using tools.

ollama pull qwen2.5-coder:7b

Step 2: Install the "Agent" (OpenClaw)

OpenClaw is the "body" of your assistant. It takes your Slack messages, asks the AI brain what to do, and performs tasks like searching files or the web.

Install Dependencies: OpenClaw needs Node.js. The easiest way is the official script:

curl -fsSL https://openclaw.ai | bash

Run Onboarding: This command sets up the background services.

openclaw onboard --install-daemon

Follow the prompts: Select Manual and Local when asked.

Start the Gateway:

openclaw gateway start

Step 3: Create the "Interface" (Slack App)

To talk to your agent, you need to create a "bot" in Slack.

Create App: Go to Slack API Dashboard → Create New App → From Scratch. Name it "MyAI" and pick your workspace.
Enable Socket Mode: This allows the bot to work without complex networking.
In the left sidebar, click Socket Mode → Toggle Enable.
- Give the token a name (e.g., "OpenClawToken") and click Generate.
- Copy the token (starts with xapp-).
Permissions (Scopes):
Go to OAuth & Permissions.
- Scroll to Bot Token Scopes and add: app_mentions:read, chat:write, im:history, and im:read.
- Scroll up and click Install to Workspace.
- Copy the Bot User OAuth Token (starts with xoxb-).
Events:
Go to Event Subscriptions → Toggle On.
- Under "Subscribe to bot events," add app_mention and message.im. Click Save Changes.

Step 4: Connecting Everything

Now, tell OpenClaw how to talk to Slack and Ollama.

Configure Tokens: Replace the placeholders below with your actual tokens from Step 3:

openclaw config set channels.slack.enabled true
openclaw config set channels.slack.appToken "YOUR_XAPP_TOKEN"
openclaw config set channels.slack.botToken "YOUR_XOXB_TOKEN"

Connect Ollama: Tell OpenClaw to use your local AI model.

openclaw config set provider.type "ollama"
openclaw config set provider.model "qwen2.5-coder:7b"

Restart & Pair:

openclaw gateway restart

The Final Handshake:
Open Slack and find your new bot under "Apps."
- Send it a message like "Hello."
- The bot will reply with a Pairing Code.
- Go back to your Ubuntu terminal and type: openclaw pairing approve slack

Success!

Your local AI agent is now live. You can ask it to write code, summarize text, or (once you install more "skills" from the OpenClaw dashboard) manage your calendar and files.

Fixing Slow MongoDB Queries on Array Fields Using `$elemMatch`

Mohammed Taukir Sheikh — Fri, 13 Mar 2026 09:05:57 +0000

When working with MongoDB, queries on arrays of objects can sometimes become slow even if you have indexes.

In this article, we’ll explore why that happens and how using $elemMatch can make your queries fast and efficient.

1. The Data Structure

Suppose you have a users collection with documents like this:

{
  name: "Alice",
  cart: [
    { product: "Apple", quantity: 2 },
    { product: "Banana", quantity: 5 }
  ]
}

Here:

cart is an array of objects.
Each object contains:
- product → name of the item
- quantity → how many of that item

2. The Common Query

You want to find users who have 2 Apples in their cart:

{
  "cart.product": "Apple",
  "cart.quantity": 2
}

At first glance, this seems correct.

But MongoDB interprets it as:

Find users where some array element has product = Apple
AND some array element has quantity = 2

⚠️ Notice: MongoDB does not guarantee these two conditions are in the same cart item.

3. Why This Can Be Slow

Consider a user document like this:

{
  name: "Bob",
  cart: [
    { product: "Apple", quantity: 1 },
    { product: "Banana", quantity: 2 }
  ]
}

cart.product = Apple → matches first element ✅
cart.quantity = 2 → matches second element ✅

MongoDB thinks this document could match.
It must fetch and check the full document, even though there’s no cart item with Apple and quantity 2 together.

This unnecessary document fetch makes queries slow, especially on large collections.

4. The `$elemMatch` Solution

To fix this, use $elemMatch:

{
  cart: {
    $elemMatch: {
      product: "Apple",
      quantity: 2
    }
  }
}

Now MongoDB understands:

Find a single element in the cart array where both conditions match.

This allows MongoDB to:

Use the index efficiently (if you have one)
Avoid scanning unnecessary documents
Dramatically improve performance

5. Indexing for Speed

If your collection is large, create a compound index on the array fields:

db.users.createIndex({ "cart.product": 1, "cart.quantity": 1 })

With $elemMatch, MongoDB can directly use this index for the query.

6. Visual Comparison

❌ Without `$elemMatch`:

MongoDB workflow:

1. Find any element with product = "Apple"
2. Scan each document to check if quantity = 2 exists
3. Return documents

Can scan thousands of documents unnecessarily

✅ With `$elemMatch`:

MongoDB workflow:

1. Find elements with product = "Apple" AND quantity = 2 in the same array item
2. Return matching documents immediately

Only fetches the relevant documents
Much faster

7. Key Takeaways

When querying multiple conditions on an array of objects, always use $elemMatch.
$elemMatch ensures all conditions match the same array element.
Combine $elemMatch with indexes for maximum performance.
This simple change can make queries up to 100× faster.

✅ Example Summary

// Slow query (can match across different elements)
db.users.find({ "cart.product": "Apple", "cart.quantity": 2 });

// Fast query (matches same element)
db.users.find({
  cart: { $elemMatch: { product: "Apple", quantity: 2 } }
});

Singleton Pattern issue in playwright browser

Mohammed Taukir Sheikh — Sun, 23 Nov 2025 06:20:31 +0000

Explaining why the singleton pattern retains the previous value:

Why singleton pattern using previous value

The singleton pattern structure:

// ONE instance created when module loads
const playwrightManager = new PlaywrightBrowserManager();

// This instance has properties:
// - this.browser = null (initially)
// - this.context = null (initially)

The problem flow:

Scenario 1: First request

// Request A comes in
playwrightManager.launchBrowser({ headless: false })
  → this.browser = BrowserInstance1 (headless: false) ✅
  → Browser window opens

Scenario 2: Second request (the problem)

// Request B comes in 2 seconds later
playwrightManager.launchBrowser({ headless: true })
  → Checks: Does this.browser exist? YES (BrowserInstance1)
  → Checks: Is it connected? YES (still running)
  → Checks: Does headless match? NO (false vs true)
  → BUT: BrowserInstance1 was ALREADY launched with headless=false
  → BrowserInstance1 CANNOT change its headless setting after launch!
  → Returns the existing BrowserInstance1 (still headless: false) ❌

Why you can't change headless after launch:

// When you launch a browser:
const browser = await chromium.launch({ headless: false });
// The browser is NOW running with headless=false
// You CANNOT do: browser.setHeadless(true) ❌ (doesn't exist)

// The headless setting is baked into the browser process
// Once launched, it's fixed until you close and relaunch

Visual representation:

┌─────────────────────────────────────────────┐
│  Singleton Instance (ONE for entire app)   │
│  ┌───────────────────────────────────────┐ │
│  │ this.browser = BrowserInstance1      │ │ ← Shared by ALL requests
│  │   - headless: false (fixed forever)  │ │
│  │   - launched at: 10:00:00            │ │
│  │   - still connected: YES             │ │
│  └───────────────────────────────────────┘ │
│                                            │
│  Request A (10:00:00):                    │
│    launchBrowser({headless: false})        │
│    → Creates BrowserInstance1 ✅          │
│                                            │
│  Request B (10:00:02):                    │
│    launchBrowser({headless: true})        │
│    → Sees BrowserInstance1 exists         │
│    → Tries to reuse it                    │
│    → But it's still headless: false ❌    │
└─────────────────────────────────────────────┘

The code that caused the issue:

// In the old singleton code:
if (this.browser && this.browser.isConnected()) {
  // Browser exists and is running
  if (currentHeadless === headless) {
    // Settings match - reuse browser ✅
    return { browser: this.browser, context: this.context };
  } else {
    // Settings DON'T match, but browser is still connected
    // What happens? It might still return the old browser!
    // OR it creates a new one but doesn't close the old one properly
  }
}

Why separate instances fix it:

// Request A
const managerA = playwrightManager();  // NEW instance
managerA.launchBrowser({ headless: false })
  → managerA.browser = BrowserInstance1 (headless: false) ✅

// Request B (simultaneously)
const managerB = playwrightManager();  // DIFFERENT instance
managerB.launchBrowser({ headless: true })
  → managerB.browser = BrowserInstance2 (headless: true) ✅
  → No conflict! Each has its own browser

Key points:

Browser headless setting is immutable after launch — you can't change it.
Singleton shares one browser instance — all requests use the same this.browser.
Reuse logic — if a browser exists and is connected, it may be reused even with different settings.
Timing — if Request A's browser is still running when Request B starts, Request B might get the old browser.

The fix:

With separate instances:

Each request gets its own PlaywrightBrowserManager instance
Each instance has its own this.browser property
No sharing = no conflicts
Each request controls its own browser lifecycle

That's why separate instances solve the problem — each request gets a fresh browser manager with its own browser instance, so settings aren't shared or reused incorrectly.

How web works

Mohammed Taukir Sheikh — Tue, 02 Sep 2025 10:07:03 +0000

The web—short for the World Wide Web—is a system of interconnected documents and resources, linked by hyperlinks and accessed via the internet. Understanding how the web works involves several key components and processes. Here's a simplified breakdown:

1. Key Components of the Web

Internet: The global network of computers that connects devices worldwide.
Web Browsers: Software like Chrome, Firefox, or Safari that users use to access web content.
Web Servers: Computers that store and serve web pages (e.g., websites).
Web Pages: Documents written in HTML (HyperText Markup Language), often enhanced with CSS and JavaScript.
URLs (Uniform Resource Locators): Addresses used to identify resources on the web (e.g., https://www.example.com).
HTTP/HTTPS: Protocols used to transfer data between browsers and servers.

2. How It Works: Step-by-Step

Let’s say you type https://www.google.com into your browser:

Step 1: Enter URL

You type a web address (URL) into your browser.

Step 2: DNS Lookup

The browser needs to find the server's IP address (like 142.250.180.78) from the domain name (www.google.com).

It queries a DNS (Domain Name System) server, which acts like a phonebook for the internet.
DNS returns the corresponding IP address.

Step 3: HTTP/HTTPS Request

Your browser sends an HTTP (HyperText Transfer Protocol) or HTTPS (secure version) request to the server at that IP address.

Example request:

GET / HTTP/1.1
Host: www.google.com

Step 4: Server Processes Request

The web server receives the request, processes it (e.g., retrieves the requested web page), and sends back a response.

Step 5: Server Sends Response

The server sends back an HTTP response, which includes:

Status code (e.g., 200 OK means success)
The web page content (HTML, CSS, JavaScript, images, etc.)

Step 6: Browser Renders the Page

Your browser receives the HTML, CSS, and JavaScript and renders it into a visual webpage.

It reads the HTML to build the structure.
Applies CSS for styling.
Executes JavaScript for interactivity.

Step 7: Page Loads and Becomes Interactive

You now see the webpage and can interact with it (click links, submit forms, etc.).

3. Additional Concepts

Hyperlinks: Clicking a link triggers the same process for a new page.
Client-Server Model: Your browser (client) requests data; the server responds.
Caching: Browsers and servers often store copies of pages to load them faster next time.
Security (HTTPS): Uses encryption (via SSL/TLS) to protect data in transit.

4. Example Diagram (Simplified)

You → Browser → DNS → Server → HTTP Response → Browser Renders → Web Page
       ↑           ↑         ↑
     URL        Finds IP   Sends Data

Summary

The web works through a client-server model using HTTP(S) over the internet, where:

You request a webpage via a URL.
DNS finds the server's IP address.
Your browser asks the server for the page.
The server sends back the content.
Your browser displays it.

It’s a powerful, decentralized system that allows billions of people to share and access information globally.

🛠️ Fix Broken NPM Packages in 5 Minutes: A Lifesaver Guide for Modern Developers

Mohammed Taukir Sheikh — Sat, 23 Aug 2025 16:33:10 +0000

Tired of waiting for a critical bug fix in a third-party library? What if you could fix it yourself—today—and ensure the fix stays even after npm install? Meet patch-package, your secret weapon for resilient, maintainable projects.

In this guide, you’ll learn how to patch an npm dependency in minutes, save the fix permanently, and share it seamlessly with your team. No more forks, no more deadlocks.

🔍 Why Patch a Package?

Third-party libraries are essential, but bugs happen. Opening a PR is the right long-term move—but what if you’re blocked now?

That’s where patch-package shines. It lets you:

Fix bugs directly in node_modules
Generate a patch file
Automatically reapply the fix on every install

It’s like a band-aid for your node_modules—but one that sticks .

🧰 Step 1: Install `patch-package`

Add it to your project:

npm install patch-package --save-dev

Then, update your package.json scripts:

"scripts": {
  "postinstall": "patch-package"
}

This ensures patches are applied automatically after every dependency install .

✏️ Step 2: Make Your Fix

Let’s say buggy-lib has a function returning incorrect results.

Navigate to node_modules/buggy-lib/dist/index.js
Find the broken code:

function calculateTotal(a, b) {
  return a - b; // 🚨 Should be a + b!
}

Fix it:

return a + b;

Yes, edit it directly in node_modules. It feels wrong—until it works.

📦 Step 3: Create the Patch

Run:

npx patch-package buggy-lib

This generates a patch file:

patches/buggy-lib+2.1.0.patch

The file contains a diff showing exactly what changed—perfect for code review .

💾 Step 4: Commit & Share

Add the patch to Git:

git add patches/buggy-lib+2.1.0.patch
git commit -m "fix: patch buggy-lib to correct calculation"

Now, every teammate and your CI/CD pipeline gets the fix automatically. No extra steps needed .

🔄 What Happens on Update?

If buggy-lib releases v2.2.0, your patch might fail to apply. You’ll see a warning.

Just:

Re-apply your fix in the updated version
Re-run npx patch-package buggy-lib
Commit the updated patch

It’s a small price for immediate progress.

✅ Pro Tips

Use clear titles that spark curiosity and promise value .
Break content into digestible sections with headings .
Include real-world examples to make concepts relatable .
Always add a cover image—it boosts engagement .
Document why you patched the library in your commit message or README.

🚀 Final Thoughts

patch-package isn’t a replacement for contributing upstream. Always open that PR! But while you wait, patch-package keeps your project moving.

It’s especially useful in React Native and other ecosystems where dependency issues can be frequent .

Have you used patch-package to escape a dependency deadlock? Share your story below! 👇

If you found this helpful, hit the 🎉 and share it with someone stuck on a node_modules bug.

npm #webdev #javascript #productivity #devtips #tutorial

Understanding Children Props in React

Mohammed Taukir Sheikh — Sat, 08 Apr 2023 05:35:06 +0000

If you've been working with React, you may have heard the term "children props" thrown around. But what exactly are children props, and how do they work?

In short, children props are a way to pass components or elements as children to another component. This allows you to create more flexible and reusable components in your application.

To understand how children props work, let's consider a real-world example. Imagine you have a parent component called Card, which displays a box with some content inside. The Card component has a few props, such as title, subtitle, and body, which allow you to customize the content displayed inside the box.

Now, let's say you want to add a button to the Card component, but you want to allow the user to customize the button's text and functionality. This is where children props come in.

Instead of adding a button prop to the Card component, you can pass the button element as a child component to the Card component. Here's how you can do it:

function Card({ title, subtitle, body, children }) {
  return (
    <div className="card">
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
      <p>{body}</p>
      {children}
    </div>
  );
}

function App() {
  return (
    <Card title="My Card" subtitle="Subtitle" body="This is the body">
      <button onClick={() => console.log('Button clicked!')}>
        Click me!
      </button>
    </Card>
  );
}

In this example, I've added a children prop to the Card component, which allows us to pass any child component to the Card component. In this case, we're passing a button element with an onClick handler that logs a message to the console.

By using children props, we've created a more flexible and reusable Card component that can be customized with any child component. This makes our code more modular and easier to maintain.

Lets see some more examples

import React from "react";

function Greeting(props) {
  return <p>Hello, {props.children}!</p>;
}

function App() {
  return (
    <div className="App">
      <Greeting>world</Greeting>
    </div>
  );
}

export default App;

In this example, we have a "Greeting" component that takes in a "children" prop. The "children" prop is used to pass in the name of the person being greeted.

In the "Greeting" function, we render a pelement that says "Hello, " followed by the "children" passed in as props, followed by an exclamation point.

In the "App" function, we render the "Greeting" component and pass in the string "world" as children. This results in the message "Hello, world!" being rendered on the screen.

This is a simple example, but it shows how the children prop
can be used to pass content to a component and render it within the component. The possibilities for what can be passed in as children are endless, allowing for great flexibility in creating reusable components.

import React from "react";

function Card(props) {
  return (
    <div className="card">
      <div className="card-header">{props.title}</div>
      <div className="card-body">{props.children}</div>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Card title="My Card">
        <p>This is the content of my card.</p>
        <p>It can contain any type of content, including images, lists, and more.</p>
      </Card>
    </div>
  );
}

export default App;

In this example, we have a "Card" component that takes in a "title" prop and a "children" prop. The "title" prop is used to specify the title of the card, and the "children" prop is used to pass in the content of the card.

Lets see one more example

import React from "react";

function List(props) {
  return (
    <ul className="list">
      {props.children.map((child) => (
        <li key={child.props.id}>{child}</li>
      ))}
    </ul>
  );
}

function ListItem(props) {
  return <span id={props.id}>{props.text}</span>;
}

function App() {
  return (
    <div className="App">
      <List>
        <ListItem id="1" text="Item 1" />
        <ListItem id="2" text="Item 2" />
        <ListItem id="3" text="Item 3" />
      </List>
    </div>
  );
}

export default App;

In this example, we have a "List" component that takes in a "children" prop. The "children" prop is an array of "ListItem" components, each with its own ID and text.

In the "List" function, we render an unordered list and map over the "children" prop to render each "ListItem"component as a list item within the list.

In the "ListItem" function, we render a span element with the ID and text passed in as props.

In the "App" function, we render the "List" component and pass in an array of "ListItem" components as children. Each "ListItem"has its own ID and text, which are rendered within the "List" using the "children" prop.

This allows us to easily create lists of items in our app and customize the content of each item using the "children" prop. We can pass in any number of "ListItem" components as children, each with its own content and styling.