Raymond Camden

Building a Document Q&A System with On-Device AI

2026-09-06T18:00:00+00:00

Every now and then I build a demo for a presentation and think to myself - this deserves its own blog post. I then promptly forget to actually do that. Even better, I completely forget to even show the demo in the presentation. A few weeks ago I made my first presentation at RenderATL and gave my talk on Chrome's on-device AI technology. I've been blogging about this particular set of APIs for a few years now and I've given talks on it at numerous conferences. While these APIs are still evolving, many of them (and the ones I'm using today in particular) are now fully GA for Chrome. For this demo, I put together a few things I've done before into one cohesive tool - a completely client-side application that lets you pick a file, get a summary, and then chat with it.

The Stack

The demo is built from a few different things:

First, I'm making use of the incredibly excellent officeParser library by Harsh Ankur. This library can take any Office document, or PDF, or ODT, or CSV, and so on, and creates a parsed version you can do nearly anything with. For me, the most important feature is the ability to convert the file into Markdown which can then be used with AI.
Next, it makes use of Chrome's Summarizer API which - you guessed it - provides summaries of textual input.
Finally, it makes use of Chrome's Prompt API to let you ask questions about the input.

The web app itself is a simple Vite app using vanilla JavaScript. I used my AI agent to set up the application and create the design and there was quite a bit of back and forth to get things locked down, but the end result is pretty cool I think.

The App

Ok, I'm obviously going to link to it, and the source, too, but I thought I'd share a few screenshots for people who may be on Safari, or maybe reading this on iOS where Chrome is locked down to the Safari engine.

On opening the app, you get a three panel UI. The left side is for selecting and previewing the document. The upper right is for the summary. The rest of the right column is for Q and A:

I selected my resume and after a few seconds, I get a summary. Now - I should clarify - the reason it works fast for me is that Chrome has already downloaded the roughly 4 gig model. That's absolutely not insignificant. But it's also a model shared by the browser for any web site making use of these APIs so it's not something a user has to download again and again.

Here's the summary that was displayed:

This is nearly perfect. For some reason it thinks I worked at Microsoft and as far as I know I only mention Microsoft once in the resume and it's in regard to work done at Webflow.

But that brings up a great first use of the Q and A - I specifically asked if Ray worked at Microsoft and I got the proper response:

"The provided document does not mention Ray Camden working at Microsoft."

I asked a followup question about PHP and I liked the response:

Honestly that's a pretty deep answer and kind of impressive I think.

Anyway, if you like this, and are using an up to date Chrome (on desktop or Android), you can check it out here: https://document-question-answer.netlify.app/. You can peruse the source up here: https://github.com/cfjedimaster/doc_qa

My Family Allowance - a Simple Allowance Tracking Site

2026-09-02T18:00:00+00:00

As you can probably tell, I've been on a bit of a builder kick the last few weeks. Today's "release" (it's been live for a few days already) is a tool to help fix a manual process we had in our family - tracking allowance for the kids.

Previously we made use of a Google Sheet. Each kid had a column. When a kid would ask for something, we'd look to see when we last added allowance, multiply the number of weeks by their rate, add it, and then add another row to reduce by the amount they were spending. A simple formula on the right hand side would give a running total so they could see what their current balance was.

I decided to take this manual process and turn it into a proper application.

Using Cursor, I created an application with the following features:

The parent signs up with their Google account.
They then have a simple admin to add, edit, and delete kids while setting their weekly allowance.
The parent can then add or remove funds when necessary.
Every Sunday, automatically, allowance is paid.
They are given a unique URL for their family and can set a basic password. A great idea for this would be the same password used for wifi in the house.
The "family" URL lets kids see their totals, and even click in to see a transaction history if they want to remember what they spent money on.

The stack is Astro, hosted on Netlify, with their Netlify DB as the storage system.

That's it! You can check it out here: https://www.myallowance.family/. If you want to check out the source, you can check out the repo: https://github.com/cfjedimaster/myfamilyallowance

Photo by Igal Ness on Unsplash

Weather Nerd? Check out My OSX Radar Widget

2026-09-01T18:00:00+00:00

I know I'm not alone in being a bit of a weather nerd. Along with four or five weather apps on my phone, I've got two physical devices in my office that show the weather and a weather widget on my Mac that shows the day's forecast. That's not enough. What I really wanted was a radar widget as well, so I built one:

Ok, to be fair, I used Cursor to build it - but it really scratched an itch I've had for a while to constantly have one more thing to distract me.

If you want a copy of this yourself (or want to make it better!), I've set up a GitHub repo here: https://github.com/cfjedimaster/precipradar. I've got both the source as well as a build for easy installation.

Note that as with my LEGO screensaver, you'll need to run a CLI command to authorize the app, but that's a onetime operation. Enjoy!

Like LEGO? Got a Mac? Get My Screensaver

2026-08-26T18:00:00+00:00

Good morning my fabulous readers. This will be a quick post as I just wanted to share something cool I built with Cursor over the past couple of days - a LEGO screensaver. I'm a huge fan of "show me something random from something I like" and have built multiple bots in that vein. I recently discovered Rebrickable's LEGO datasets which contains a CSV file of LEGO sets. The data looks like so:

set_num,name,year,theme_id,num_parts,img_url
0003977811-1,Ninjago: Book of Adventures,2022,761,1,https://cdn.rebrickable.com/media/sets/0003977811-1.jpg
001-1,Gears,1965,756,43,https://cdn.rebrickable.com/media/sets/001-1.jpg
0011-2,Town Mini-Figures,1979,67,12,https://cdn.rebrickable.com/media/sets/0011-2.jpg
0011-3,Castle 2 for 1 Bonus Offer,1987,199,0,https://cdn.rebrickable.com/media/sets/0011-3.jpg
0012-1,Space Mini-Figures,1979,143,12,https://cdn.rebrickable.com/media/sets/0012-1.jpg
0013-1,Space Mini-Figures,1979,143,12,https://cdn.rebrickable.com/media/sets/0013-1.jpg

I thought it would be cool to select a random set, show the year, name, number of pieces, and render the image as well. I gave this CSV to Cursor and started iterating on building a simple OSX screensaver. I had it filter out sets where the number of pieces was greater than or equal to 50 (typically "swag", non-buildable items) or with names that also appeared to be non-buildable things.

After that, I just let Cursor handle creating the project. I know nothing about OSX development, thankfully Cursor does. The only real issue I ran into was OSX aggressively caching the screensaver data which made updates a bit difficult. I think we (and by that I mean mostly Cursor, and some me) figured that out eventually.

Here's an example of how it looks:

Alright, so before I link you to the GitHub repo, a quick warning. I'm not paying Apple for a developer's license which means if you get the build, you'll need to run a one-time command in your terminal to whitelist the app.

Ok, with that out of the way, head over to the repo and check it out: https://github.com/cfjedimaster/lego-screensaver

Links For You (8/23/26)

2026-08-23T18:00:00+00:00

Greetings, programs. Once again, I'm a bit behind on these posts, but I just got back from two weeks of travel and I'm so happy to be home for a while. My last trip was pretty stressful. On the way out, our plane blew a tire (or tires) which required an emergency landing in Dallas (which is where we were scheduled to stop anyway). Everything ended up fine, but as I said, stressful. Then coming home we were minutes from our destination when the pilot had to turn around due to storms. You can actually see exactly where in the route where they said NOPE:

For this, and other reasons, I'm damn happy I've got a therapy session tomorrow. So, let's get to the links.

And the winner for best project name goes to...

I've only given this a cursory glance, but the name itself was enough to make me giggle: The Mullet Stack. The Mullet Stack describes itself as "JavaScript in the front, Python in the back", and describes the combination of a backend built with FastAPI and Pydantic and a front end using React and TypeScript. Now, I'm no React fan, and when I was playing with Python web frameworks last year (this year? time is weird) I didn't get around to checking out FastAPI, but this guide does a great job of walking you through the process of setting up both ends and wiring things together nicely.

Change to Clipboard Reading in JavaScript

If you've ever done anything with JavaScript and the clipboard, the Chrome team has made a change to the API in order to improve performance. "Selective format read: A better default for the Async Clipboard API" discusses how, at least previously, reading from the clipboard could be a bit of a performance hit as the browser would read in all representations of data in the clipboard (along with sanitization) even though your code (typically) only used one format. (As an FYI, when you copy something to the clipboard, it can be represented in multiple different formats.) Their article describes how data is now lazy loaded and - well that's mainly it. This change has also been implemented in Safari and Firefox has indicated they may adopt this as well.

You may also be interested in my post about this here: Handling Paste Events in JavaScript

A New Option for Generating RSS

I've spent a heck of a lot of time writing code to both generate and parse RSS. One thing you'll notice if you look for libraries like this is that - typically - they're pretty old. To be fair, RSS is a spec and hasn't changed in a while. (A quick Google check seems to confirm the last change was 2009.) The feed JavaScript/Typescript library is an example of this, with portions over 8 years old, but it very recently was updated and if you find yourself needing to generate RSS, I'd probably start here.

Just For Fun

Last time I shared a good cheesy 80s video so why not follow it up with even more cheese? This is from a movie I plan on sharing with my kids real soon now...

Using the Cursor SDK to Build a Project Documenter

2026-08-22T18:00:00+00:00

I've shared a few posts recently talking about how I'm using Cursor to learn and employ agentic development. Primarily that work has all been done via our Agent view, but this is just one of the surfaces you can use with the platform. I had a chance recently to try out the SDK and I thought I'd share a little demo I built with it.

First - some explanation would be helpful. You can use Cursor with the desktop application, on the web, via CLI, on iOS, even via API. But the SDK lets you use the platform from your code. There's an SDK for TypeScript, Python, and a bridge that embeds a TypeScript server and lets you use any language. Honestly I've never seen that before in a platform and it's pretty freaking cool. (And... just to remind folks, I do work at Cursor so I'm biased, but that's absolutely an honest opinion.)

With the SDK, you can do all the things you can usually do with the platform - run prompts in different modes - swap models at will, including the auto router which makes it easier, even kick off agents that run in the cloud. Definitely check the docs for a full detailed list of what you can do, but it's basically the platform itself - in your code.

I built a quick demo with the TypeScript SDK, but then switched over to Python as I felt it a bit easier for me to use. The quickstart shows how easy it is:

import os

from cursor_sdk import Agent, LocalAgentOptions

with Agent.create(
    model="composer-2.5",
    api_key="crsr_key",
    local=LocalAgentOptions(cwd=os.getcwd()),
) as agent:
    print(agent.send("Summarize what this repository does").text())

This returns the final result of the prompt, but you also have the ability to get everything that was generated, so for example, the detailed list of tool calls and such. You can also decide between streaming or just waiting and getting the final result.

All of this just works - which is what you want in a SDK - and the quick start example is one of my favorite things to do with Cursor - basically "what the heck is this repo/set of code doing" - and I thought it would be cool to turn this into a CLI tool.

To be clear, normally I'd use the Cursor Agent window, open the repo or folder, and use Ask mode to describe the project. But if I'm not planning to work with the code later and just want a good explanation, a CLI tool could be useful for this purpose instead.

Of course, the easiest way to build this is to use Cursor itself. I set up a new folder and started a new plan:

/plan create a Python CLI that makes use of the Cursor SDK. The CLI is a 
tool that will scan a code base and generated a detailed report of the 
application/code base of the folder being scanned. What it does, what 
technologies it use, what frameworks are in place, and so forth.

The CLI should support a help command. 
The CLI will scan the current directory by default, but supports an 
argument to specify a path.
The CLI will output Markdown, but an argument allows for a PDF file output.
Require a filename to store the result.

This created the following plan:

By the way, the Architecture was a pretty Mermaid chart that's not rendering on my blog:

The end result - in terminal I can create a report in either Markdown or PDF. I'll share a link to the entire thing below, but let's take a look at the Python file responsible for analyzing the codebase via the Cursor SDK:

"""Run a local Cursor agent to produce a codebase Markdown report."""

from __future__ import annotations

import os
import sys
from pathlib import Path

from cursor_sdk import Agent, AgentOptions, CursorAgentError, LocalAgentOptions

PROMPT = """\
Explore this codebase thoroughly (manifests, configs, source layout, docs) and \
produce a detailed report about the application.

Cover at least:
- Overview / purpose of the project
- Primary languages and runtimes
- Frameworks and major libraries
- Architecture and top-level structure
- Entry points and how to run, build, and test (if discoverable)
- Notable tooling (CI, linters, package managers, etc.)
- Anything else material about how the app works

Rules:
- Do not modify, create, or delete any files.
- Return ONLY Markdown for the report (headings, lists, short code snippets as needed).
- Do not wrap the entire reply in a single fenced code block.
"""


class ScanError(Exception):
    """CLI-facing scan failure with an exit code."""

    def __init__(self, message: str, exit_code: int) -> None:
        super().__init__(message)
        self.exit_code = exit_code


def _require_api_key() -> str:
    api_key = os.environ.get("CURSOR_API_KEY", "").strip()
    if not api_key:
        raise ScanError(
            "CURSOR_API_KEY is not set. Export it before running codebase-report.",
            exit_code=1,
        )
    return api_key


def _extract_markdown(result: object) -> str:
    text = getattr(result, "result", None)
    if isinstance(text, str) and text.strip():
        return text
    raise ScanError("Agent finished but returned no report text.", exit_code=2)


def scan_codebase(scan_path: Path) -> str:
    """Analyze *scan_path* with a local Cursor agent and return Markdown."""
    api_key = _require_api_key()
    cwd = str(scan_path.resolve())

    print(f"Scanning {cwd} with Cursor agent…", file=sys.stderr)

    try:
        result = Agent.prompt(
            PROMPT,
            AgentOptions(
                api_key=api_key,
                model="composer-2.5",
                local=LocalAgentOptions(cwd=cwd),
            ),
        )
    except CursorAgentError as err:
        retryable = getattr(err, "is_retryable", False)
        raise ScanError(
            f"startup failed: {err.message} (retryable={retryable})",
            exit_code=1,
        ) from err

    status = getattr(result, "status", None)
    if status == "error":
        run_id = getattr(result, "id", "unknown")
        raise ScanError(f"run failed: {run_id}", exit_code=2)

    return _extract_markdown(result)

This is pretty robust and the prompt it uses is really well written. (Ok, as a reminder folks, don't forget prompt writing is still important and you can cheat at that by asking your AI agent to improve your prompt before you actually run it.)

I did a quick run of this on my blog and got the following:

This is a rather simple example, but being able to use the Cursor platform in code like this could be really freaking powerful I think. If you've done something like this, I'd love to hear more, share a comment below. You can check out the full code here: https://github.com/cfjedimaster/cursor_python_sdk_cli_demo

- A simple web component for file previews

2026-08-11T18:00:00+00:00

This was a "I can't fall asleep and my mind is wondering" type of idea and honestly, I'm surprised at how good it came out. For a while now I've shared demos where a user picks an image and ... something. It doesn't matter. But I typically add a preview of the image when it's selected. This works because once the user selects a file on their local system, JavaScript can then access the bits of that file, making it trivial then to render it. The idea I had, late at night, was simple - what if this could be a web component and expanded to cover different file types?

In my imagination, it would look something like this in code:

<form>
    <!-- various other form things -->
    <label for="upload">Select a file: </label>
    <input type="file" id="upload" name="upload">
    <file-preview file-id="upload"></file-preview>
</form>

The component takes one attribute, file-id, which points to the ID value of the field to monitor. As for preview support, I figured I could cover these:

Images (of course)
HTML, .txt
Markdown (after converting to HTML)
Office docs (Using the excellent officeParser library)
PDF (ditto)
Audio and Video (using the browser's built-in support)

And more. I decided to let Cursor take a swing at this, so I started with this prompt:

I want to create a web component that does the following:

It's tied to a input[type=file] control. When the user selects a file, it attempts to preview it. 

It looks like so: <file-preview file-id="id of file field"></file-preview>

The user would position/size it with CSS as they see fit. The component would support previews for:

* Office docs and PDFs via https://officeparser.harshankur.com/. This will be lazy loaded when a matching file type is selected. It will render the HTML version
* HTML docs - as is.
* Markdown - parse to HTML via the `marked` library and render the HTML
* Images - render as usual
* Video and Audio - create a new instance of <video> or <audio> so the user could click play to preview

Anything else I'm missing?

Cursor came back with a bunch of suggestions, including supporting text type documents (JSON, txt, etc) and said it should handle noting when the associated file field was reset.

And that was pretty much it. In the first iteration there was a bug with the iframe it used to render a PDF. This was due to the iframe's sandbox value and easily corrected.

Cursor's agent also built a good demo (https://cfjedimaster.github.io/file-preview/index.html) but it was focused on the component, and not a "real" form.

I returned to Cursor with this prompt:

the demo you built in index.html is ok, but the idea here was to 
include the web component in a form. make a new file, demo.html, 
and have a few form fields in it, one of which is the file 
preview. just have it post to nothing that's fine

And that created a better demo (imo!):

You can see the full code at the repo here: https://github.com/cfjedimaster/file-preview. If enough people ask (ok, let's say 2), I'll put this up on NPM for easier installation.

Links For You (8/2/26)

2026-08-02T18:00:00+00:00

Happy August folks. Louisiana is celebrating the approach of Fall by gradually increasing the temperatures to roughly that of the surface of the sun. Last night we saw the new Spider-Man, which was really good, although not as fantastic as "No Way Home". The point of these posts is for me to share content from other folks, but I'll remind folks of my Youtube channel. This past week I shared a few new videos demonstrating some cool stuff with Cursor so if you've not checked them out yet, give me a quick watch and let me know what you think!

Web browsing on your gaming console

First up is a great post by Vale detailing the capabilities and history of web browsers on game consoles. I've been playing on consoles since the very beginning and a lot of this was still new and surprising to me. Honestly I can't imagine surfing any web page on a browser now. I think the last time I did was on my XBox so I could find a cool background picture.

Audio visualization with wavesurfer.js

Next up is a cool JavaScript library for audio visualization, wavesurfer.js. Also I think this is the first site I've seen on the xyz TLD. The library works pretty simply - point it at a div and MP3 and it visualizes it on your web page. Here's a simple example of it in action.

See the Pen wavesurfer.js by Raymond Camden (@cfjedimaster) on CodePen.

What the hell happened to frontend?

Ah, the good ole days, hand crafting HTML in Notepad and manually "deploying" via carefully selecting and uploading via an FTP client. In the following few decades things got... a little bit more complex. This great deep dive by David Poblador i Garcia goes into detail over the changes in frontend. Those of you new to this - you missed a lot. ;)

Just For Fun

With AI being everywhere, I'm curious how many of my readers ever saw Electric Dreams, an incredibly corny 80s film I remember watching on VHS over and over again. The story is... well... it was the 80s so that gives you an idea, but it had a pretty good songs in it including the main theme. Enjoy!

Updating my Watch Site for Algolia Support

2026-07-29T18:00:00+00:00

Alright, so I was supposed to share this a bit quicker, but life, work, etc, kept me busy. I've had this particular change up for a few days but I'm just now getting around to blogging about it. What changes?

Adding Algolia's MCP to my Cursor environment
Using Algolia's MCP (what worked, what did not)
Adding Algolia content as a scheduled service with Netlify
Adding a basic search front end to I Watch Watches

Before going on, be sure you've read the last piece where I talked about agentic development in general, and specifically how I built the site.

If you don't have a log, did it happen?

I've been doing some work with different profiles and my Cursor environment, and in doing so, I lost the chat I had with Cursor about these features. I know it's there but I think I lost it the transition/testing I've been doing. (I did find the chat actually, but I'll still probably skip including it directly here.)

The Plan - in Two Parts

I spelled this out above, but it bears repeating. I wanted to add search to my site and wanted to use Algolia. Algolia makes use of an index that's a copy of your site data. For me that's the RSS feed items from the watch blogs I aggregate. Creating and setting up the index is a one time operation. Populating the index and keeping it up to date is something you do forever. (To be technical, you've got a lot of options in that regard. So for example, in a site with millions of updates you could hold off updating your index until a particular time every day or other time period.) So the first operation was setting up that process.

The second part is much simpler - wiring up the search UI. For that I used my interface here as a guide - a nav search field that loads up a search page with results, and another form there so you can quickly change your search.

Algolia and MCP

Algolia's MCP docs were a bit confusing to me. The first example mentioned is the "Algolia Public MCP" - but this is the "per app" MCP I talked about here: "TIL - Algolia Makes Creating an MCP Server Stupid Easy". In other words, it's an MCP server for your data.

Instead, you want the Algolia Productivity MCP, which is what's used to work with your account at a high level. But - right away you see:

"Read-only index access, with an extended set of tools such as analytics."

So the MCP server can't actually make changes to your account, like creating or modifying an index. That's a bit of a bummer (and I let my buddy at Algolia know this), but it does give you MCP access via your agent so you can do things like list your indexes and perform searches right from your AI harness.

Here's a test I did in Cursor:

Pretty standard stuff, but notice both Cursor and Algolia's MCP gracefully handled the fact that I didn't specify a particular index for my account. It was smart enough to recognize which index would most likely have rolex as a term.

One more nit to be aware of. You have to enable Algolia MCP. This is documented, but given that the URL is standard (not something special per index, it's for Algolia in general) and given you have to authenticate to use it, it felt weird that I also had to enable it in my account. This is also feedback I shared with my contact at Algolia.

So given I couldn't use the MCP to create the index, I just did it myself. By hand. Uphill. In the snow. Both ways. After the 20 to 30 seconds of that work was done, I was ready to start building.

Index Seeding and Updating

My first choice was a bit difficult. For my blog here, I've got a huge amount of content, and keeping Algolia in sync could be a bit complex. I went with an approach that gets recent items and does an upsert to my index using the batch API.

For I Watch Watches, I decided to use the same API, the same upsert, but to pass everything. My spidey-sense tells me this may be problematic later as the aggregator grows, and I'll probably have to go with a "last 1k" or so filter, but for now it worked.

In Cursor, I described my ask - create a Netlify scheduled function to upsert my data to my Algolia index. Netlify has my Algolia secrets and serverless functions can use it, so I set Cursor to building it out, and it did a great job. In fact, it did it a bit differently than I would.

First, it created a core Algolia module in src/lib/algolia.ts:

import { algoliasearch } from "algoliasearch";
import { db } from "../db";
import { feedItems } from "../db/schema";

const BATCH_SIZE = 1000;

export type AlgoliaSyncSummary = {
  total: number;
  batches: number;
  indexName: string;
};

function getAlgoliaConfig() {
  const appId = process.env.ALGOLIA_APP_ID;
  const apiKey = process.env.ALGOLIA_SECRET_KEY;
  const indexName = process.env.ALGOLIA_INDEX;

  const missing = [
    !appId && "ALGOLIA_APP_ID",
    !apiKey && "ALGOLIA_SECRET_KEY",
    !indexName && "ALGOLIA_INDEX",
  ].filter(Boolean);

  if (missing.length > 0) {
    throw new Error(`Missing required Algolia environment variables: ${missing.join(", ")}`);
  }

  return { appId: appId!, apiKey: apiKey!, indexName: indexName! };
}

export async function syncFeedItemsToAlgolia(): Promise<AlgoliaSyncSummary> {
  const { appId, apiKey, indexName } = getAlgoliaConfig();
  const client = algoliasearch(appId, apiKey);

  const rows = await db
    .select({
      id: feedItems.id,
      title: feedItems.title,
      url: feedItems.url,
      synopsis: feedItems.synopsis,
      publishedAt: feedItems.publishedAt,
    })
    .from(feedItems);

  const objects = rows.map((row) => ({
    objectID: String(row.id),
    title: row.title,
    url: row.url,
    synopsis: row.synopsis,
    published_at: row.publishedAt ? row.publishedAt.toISOString() : null,
  }));

  if (objects.length === 0) {
    return { total: 0, batches: 0, indexName };
  }

  const responses = await client.saveObjects({
    indexName,
    objects,
    batchSize: BATCH_SIZE,
  });

  return {
    total: objects.length,
    batches: responses.length,
    indexName,
  };
}

And then it built the serverless function which ended up being much smaller with the core logic abstracted.

import type { Config } from "@netlify/functions";
import { syncFeedItemsToAlgolia } from "../../src/lib/algolia";

export default async (req: Request) => {
  const body = await req.json().catch(() => ({}));

  try {
    const result = await syncFeedItemsToAlgolia();
    const summary = {
      next_run: body?.next_run ?? null,
      ...result,
    };

    console.log("Algolia sync complete", JSON.stringify(summary));

    return new Response(JSON.stringify(summary), {
      headers: { "Content-Type": "application/json" },
    });
  } catch (error) {
    const message = error instanceof Error ? error.message : "Unknown error";
    console.error("Algolia sync failed", message);

    return new Response(JSON.stringify({ error: message }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    });
  }
};

export const config: Config = {
  schedule: "@daily",
};

Running locally, I was able to use curl to run this function and then the Algolia MCP to search and confirm it actually worked.

Searching

Algolia has multiple options for performing searches, but for me the basic JavaScript SDK is all I need. I asked Cursor to implement that following the pattern I have on my blog here and as I described above. Cursor wired up the search in the top nav, built a new page, search.astro, and mostly followed the same pattern I did here. Here's the complete Astro page:

---
import Header from "../components/Header.astro";
import { SITE_NAME } from "../config";
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title={`Search · ${SITE_NAME}`} description="Search watch articles and news">
  <div class="site-shell">
    <Header />

    <main class="search-page">
      <h1>Search</h1>

      <form class="search-page-form" action="/search" method="get" role="search">
        <input
          id="search-input"
          type="search"
          name="search"
          placeholder="Search watches, brands, or articles"
          autocomplete="off"
        />
        <button type="submit">Search</button>
      </form>

      <p id="search-status" class="search-status" aria-live="polite"></p>
      <div id="search-results" class="search-results"></div>

      <p class="search-attribution">
        Search by
        <a href="https://www.algolia.com/" target="_blank" rel="noopener noreferrer">Algolia</a>
      </p>
    </main>
  </div>
</BaseLayout>

<script is:inline src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script is:inline>
  (() => {
    const appId = "0FJBPN4K5D";
    const apiKey = "8f741f50b983176875b65e252402b140";
    const indexName = "iwatchwatches";

    const statusEl = document.getElementById("search-status");
    const resultsEl = document.getElementById("search-results");
    const inputEl = document.getElementById("search-input");

    const params = new URLSearchParams(window.location.search);
    const term = (params.get("search") || "").trim();

    if (inputEl) {
      inputEl.value = term;
    }

    if (!term) {
      statusEl.textContent = "Enter a search term above to find articles.";
      return;
    }

    if (typeof algoliasearch !== "function") {
      statusEl.textContent = "Search is temporarily unavailable.";
      return;
    }

    statusEl.textContent = "Searching…";

    const client = algoliasearch(appId, apiKey);
    const index = client.initIndex(indexName);
    const dateFormatter = new Intl.DateTimeFormat("en", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });

    function escapeHtml(value) {
      return String(value)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;");
    }

    function formatDate(value) {
      if (!value) return "";
      const date = new Date(value);
      if (Number.isNaN(date.getTime())) return "";
      return dateFormatter.format(date).toUpperCase();
    }

    index
      .search(term, {
        hitsPerPage: 50,
        attributesToRetrieve: ["title", "url", "synopsis", "published_at"],
      })
      .then((response) => {
        const hits = response.hits || [];
        const count = response.nbHits ?? hits.length;

        if (hits.length === 0) {
          statusEl.textContent = "Sorry, but there were no results.";
          resultsEl.innerHTML = "";
          return;
        }

        statusEl.textContent =
          count === 1
            ? "There was one result for this search."
            : `There were ${count} results for this search.`;

        resultsEl.innerHTML = hits
          .map((hit) => {
            const title = escapeHtml(hit.title || "Untitled");
            const url = escapeHtml(hit.url || "#");
            const synopsis = hit.synopsis ? escapeHtml(hit.synopsis) : "";
            const published = formatDate(hit.published_at);

            return `
              <article class="search-result">
                <h2 class="search-result-title">
                  <a href="${url}" target="_blank" rel="noopener noreferrer">${title}</a>
                </h2>
                ${published ? `<p class="search-result-meta">${published}</p>` : ""}
                ${synopsis ? `<p class="search-result-synopsis">${synopsis}</p>` : ""}
              </article>
            `;
          })
          .join("");
      })
      .catch(() => {
        statusEl.textContent = "Search failed. Please try again.";
        resultsEl.innerHTML = "";
      });
  })();
</script>

In case you're curious, the key embedded in code is safe - it's a read only search key.

Show me the code...

If you want to see everything behind the aggregator, you can check out the repo here: https://github.com/cfjedimaster/iwatchwatches. Note that the readme was updated by Cursor and it did a dang good job. It handled updating the configuration as well as the Changes section.

The next change will be somewhat larger - a web based interface to add new feeds to the site - behind authentication of course.

Photo by Shahrukh Rehman on Unsplash

Building Agentically and Celebrating Watches

2026-07-24T18:00:00+00:00

I've shared past experiences with vibe coding and it's been a fascinating way to experiment and build on a small scale, but while it works well for POCs and other small utilities (I won't say 'toys' as I've built useful, if small, things now multiple times), it isn't really a "process" and not one that would work over a project with a longer time frame. This is where "Agentic Development" comes in. It's not always referred to as such and it's a huge topic, but let me give you my opinion on it and then demonstrate how I used it to build my newest project, I Watch Watches.

Agentic Development in a Nutshell

Vibe coding is traditionally defined by a quick prompt passed to an AI agent. There may be a few rounds of changes afterwards, but the process is relatively simple and straightforward. Acceptable for a team of one and smaller projects, but not necessarily a "real" enterprise/larger environment.

Agentic development integrates your AI agent or harness across an entire development process. Broadly speaking it entails:

A planning stage where you may start with a prompt, but the agent doesn't write any code, but instead creates a plan. That plan is shared with you and you have the opportunity to adjust as you see fit. Add something, remove something, tweak something, this is where you and the agent agree on not just what is being done, but how. For developers who worry about AI taking your job, this is where your experience comes into play. I always validate that the plan makes sense and is building how I (or my organization) would build.
An implementation phase where the AI agent takes over - but even here the process can be far different from simple vibe coding. A good harness (like Cursor!) will let you define rules ("always do X") as well as skills ("when doing Y, here is how we do it") which lets you give firm guardrails for how code will be generated. This is especially useful in cases where you are working on a team within a large codebase and need to ensure you follow the established procedures for that project.
Validation is also part of the process. A good agent/harness will not just build something but also validate that it actually worked. This could also be combined with creating tests to cover new features.
On top of validating the change worked, you can also add an additional level of verification, so for example, when a PR is submitted, you can use an agent (at Cursor this is Bugbot, but of course other options exist).

That's a pretty high level overview, but the end result is that you've got AI agents working for you in a much more controlled, and reliable way. Honestly it's already changed how I do a lot of my work even in cases where I've written every bit of code. Having the agent there to help validate and check what I've done is like having a virtual intern who never complains.

So, how about an example?

Watches are my bling

I've been a huge fan of watches for pretty much all my life. I remember Swatches as a kid (I literally just signed up for a pre-order for a new one) and as I got older, I started collecting more and more watches and finding myself stopping at jewelry stores just to peruse their collections. I've got some cheap ones, some expensive ones, and some weird ones, but I love them all.

This is my current favorite and I've got it on right now: Memento Mori Rose

Yes, this is a Camden watch, and the name initially caught my attention, but their collection is incredible (I have two). Even better, they literally check the timezone of where their watches are being shipped and will set the watch to the appropriate time.

My typical way of discovering new watches is either seeing it on a person or seeing it on Facebook. Shockingly, if you Like a few watch ads, you end up seeing a lot more, and honestly I'm fine with that. (Facebook is where I first saw the Camden Watch company.) A few days ago it finally clicked that there's probably a decent amount of watch blogs out there, why not start aggregating them so I can see watches my own way - in my own app.

How I Started

So obviously I'm using Cursor (where I work, just as a reminder!) and it's got a dedicated Plan mode. I switched to that and started off with this prompt:

My stack was Astro, on Netlify, using their built-in database support, which is not something I've actually used before. Note I gave direction on how aggregation should occur, specifically Netlify CRON-based serverless functions.

When I submitted this, I got a few follow-up questions including my mocks. At some point (honestly I can't find it now), I directed Cursor to not implement search for now. (If you visit the site today, search does work, but that was a second session which I'll turn into a second post.) I also said I wanted pagination with ten items per page, but I told Cursor to ensure that number was easily configurable. I'd say the follow-up questions and back and forth was probably about ten more minutes of work. When done, this plan was created. Note that the links below won't work as they are local to my project. They absolutely did work post creation which was super helpful to verify how things were done.

I told Cursor to execute and it went to work. When it was done, I got this:

I love, love, love how it ended with clear instructions on how to test myself, specifically the Netlify CLI database stuff that I'd never used before. And I knew how to run a Netlify serverless function already, but the curl command was a handy reminder. (As an FYI, a CRON serverless function for Netlify can be called via HTTP locally, but not in production. That's handy!)

At this point I was able to test and it worked perfectly... almost. One blog's items were returning broken images. I asked Cursor about that:

it looks like the media for ablogtowatch all return broken images. investigate why

And here's the response. Honestly, I do not think I could have figured this out on my own:

I selected the first option and let Cursor implement it.

After this, I made a few more changes:

Initially the footer just repeated the title. I had it link to my blog instead.
Cursor can generate favicons, so I asked for three options and picked one. When I did, Cursor went ahead and wired it into the HTML.

What's Next

I hope this made sense and I hope the power and flexibility of how I built it is clear. As I mentioned, I've already done improvements, but I want to cover that in the next blog post. You can find the site here, https://iwatchwatches.netlify.app/. I may spring for a real domain later. You can find the code here, https://github.com/cfjedimaster/iwatchwatches