Introduction

“Wait, when is the new Pixel”s release date again?” “I forgot to sign up for this tech conference…”

If you”re a gadget lover, you”ve probably faced this frustration. Information is scattered across Twitter (X), PR Times, and various news sites, making it a struggle just to keep up.

Author

It’s impossible to check everything yourself. So, why not let AI do it?

So, I built the “Ultimate Gadget Calendar” that automatically gathers event information from the web, classifies it neatly, and even displays my own blog posts alongside it.

In this article, I’ll deep-dive into the technical side, complete with code.

The Result: This is the “AI Gadget Calendar”

First, check out the finished product. It’s implemented on the /calendar page of this site.

The key highlights are:

Tech Stack: Web Development in the AI Era

Here is the stack I chose to realize this calendar:

1. Astro DB : The mothership for data. Built on SQL (LibSQL), it’s incredibly fast in both local and production (Studio).
2. Puppeteer : Handles web scraping. Renders dynamic sites to pull out information.
3. Vercel AI SDK : The brain. Uses GPT-4o to extract only the necessary information from chaotic HTML.
4. React + Framer Motion : Handles the UI. Mounts React components within Astro for rich interactions.

Behind the Scenes of Implementation

1. Information Gathering via AI Agent

The biggest challenge is “how to accurately extract event information from the disordered text of the web.” This is where Vercel AI SDK shines.

Below is a snippet of the script (scripts/collect-events.ts) I’m actually using:

// Toss raw scraped text to AI and have it returned as structured data
const { text } = await generateText({
 model: "openai('gpt-4o')",
 prompt: "`Extract upcoming tech/gadget events from the following text.
 For each event", provide: "title", date (YYYY-MM-DD), category (e.g., "Release", "Conference", "Sale"), description, and sourceUrl.
 Return as a JSON array of objects.
 Text: "${rawContent"}`,
});

Assistant

With traditional regular expressions or CSS selectors, code needed fixing every time a site’s structure changed. But with LLMs, they understand the “meaning of the text” to extract dates and titles, dramatically reducing maintenance costs.

2. Saving to Astro DB

The extracted data is saved to Astro DB . The schema definition (db/config.ts) is very intuitive.

export const Events = defineTable({
 columns: {
 id: column.text({ primaryKey: true }),
 title: column.text(),
 date: column.date(),
 category: column.text(),
 sourceUrl: column.text({ optional: true }),
 // ...
 },
});

Then simply toss it in with await db.insert(Events).values(...). No need for ORM configuration or migration file management. Astro is amazing.

3. Integration with Blog Articles

The true essence of this calendar is that “external event information” and “my own blog posts” are mixed together .

In src/pages/calendar/index.astro, these two sets of data are merged.

// 1. Get scraped events
const scrapedEvents = await db.select().from(Events);

// 2. Get blog posts
const blogPosts = await getCollection("blog");

// 3. Normalize both as an "Event" type and join them
const allEvents = [
 ...scrapedEvents.map((e) => ({ ...e, type: "scraped" })),
 ...blogPosts.map((p) => ({
 title: "p.data.title",
 date: "p.data.date",
 type: "blog",
 })),
];

By passing this to the <CalendarContainer /> React component, a seamless timeline is achieved.

Summary: Websites Pivot from “Media” to “Tools”

Static blogs that only broadcast information might already be a thing of the past.

Agents moving around in the background to gather, organize, and present information for users—by combining Astro DB and AI SDK , such a “living website” can now be easily built by individuals.

This calendar feature is accessible anytime from the top-right menu (or /calendar). I hope it helps set the rhythm for your gadget life.