How I Built One-Click Bookmark Organization with Gemini AI
sheep

sheep @sheep_

About: Full stack developer

Joined:
Apr 13, 2025

How I Built One-Click Bookmark Organization with Gemini AI

Publish Date: Jun 11
6 0

As a solo developer, free tier of Gemini 2.5 Flash is incredibly attractive. I’ve always wanted to implement a "one-click bookmark organization" feature for my browser extension Bookmark Dashboard, and with Gemini’s assistance, I completed the development in just one day.

One-Click Bookmark Organization

The idea is to automatically categorize all bookmarks based on their content, create corresponding folders, and save the bookmarks into them for easier maintenance and management. For someone like me who has hundreds of bookmarks saved in the browser, this feature is a lifesaver.

Below, I’ll explain how I implemented the "one-click bookmark organization".

Implementation Approach

Bookmark organization is done in two steps:

  • Tagging: Assign one or two topic-specific tags to each bookmark, describing its core subject.
  • Categorization: Merge similar tags into broader categories to create a hierarchical structure.

I added two API endpoints to the server side to handle these tasks, both leveraging Gemini for processing. The two APIs respectively call Gemini using the following prompts to obtain the results for tagging and categorization.

Prompt for Tagging Bookmarks

Analyze and categorize the following web links, to each link assign 1 or 2 specific, topic-oriented tags that represent the core subject matter of its content.
Extract tags from the url, title, or keywords of link's content. Focus exclusively on what the content is about, not its format, purpose, or meta-features.
Ensure the results maintain the same order as the input. No additional explanations are needed.

**Guidelines:**
1. ABSOLUTELY PRIORITIZE SPECIFICITY: Tags must describe the primary topic(s) with the highest possible granularity.
2. Tags should be simple and precise, avoid overly broad terms.
3. All tags must be in short, singular English words. Use lowercase and hyphenate multi-word only if necessary.

reference output format:
index: 1
category: tag1, tag2

index: 2
category: tag1


web links (url title):
1. https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18 Mobx Server Side Rendering with Next.js - DEV Community

2. https://blog.logrocket.com/build-full-stack-app-next-js-supabase/ Build a full-stack app with Next.js and Supabase - LogRocket Blog

3. https://www.npmjs.com/package/favicon-getter favicon-getter - npm

4. https://www.baeldung.com/ops/docker-databases How to Deal With Databases in Docker? | Baeldung on Ops

...

Enter fullscreen mode Exit fullscreen mode

Gemini's Response for Tagging

index: 1
category: next.js, mobx

index: 2
category: next.js, supabase

index: 3
category: favicon, npm

index: 4
category: docker, database

...

Enter fullscreen mode Exit fullscreen mode

Prompt for Grouping Tags into Categories

Organize the following tags into several categories, where each tag belongs to only one category, and each category should include as many tags as possible.
The categorization process follows this order:
1. From all tags, identify as many tags of the same type as possible, assign a category name, and group these tags under this category.
2. From the remaining tags, continue identifying as many tags of the same type as possible, assign a different category name, and group these tags under the new category. Repeat this step until no more tags of the same type remain or no tags are left.
3. Any remaining tags that cannot be grouped should be treated as individual categories.

Return the results strictly in the reference output format, with no additional explanations.

**Guidelines:**
1. Prioritize the core function or primary purpose of the tag for categorization.
2. Each tag must be interpreted in isolation, without inferring relationships, context, or common associations from other tags in the list. Treat each tag as if it were the only tag provided.
3. Category names should be simple, precise. Avoid overly broad category names.
4. The meaning of category cannot be narrower than any tags under it.
5. All category names must be in short, singular English words. Use lowercase and hyphenate multi-word only if necessary.

reference output format:
category1: tag1, tag2, tag3
category2: tag4, tag5


tags:
1. react-icons
2. flutter
3. expo
4. react
5. react-native
6. electron
7. next.js
8. vercel
9. docker

...

Enter fullscreen mode Exit fullscreen mode

Gemini's Response for Categorization

framework: react, react-native, next.js, astro, flutter, electron, expo
node: node.js, npm, nvm, express, pm2
icon: remix-icon, ionicons, react-icons
database: supabase, postgresql, row-level-security
devops: github-actions, docker, vercel
web-feature: text-truncation, text-selection, image-map, rel-preload

...

Enter fullscreen mode Exit fullscreen mode

Sending Requests to Gemini

According to the Quick Start, install the Google GenAI SDK, which will be invoked to send messages to Gemini.

async function send(content) {
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash-preview-05-20",
    contents: content,
  });
  return response.text;
}
Enter fullscreen mode Exit fullscreen mode

Thanks to the power of AI, capabilities like tagging and categorization can be easily achieved. By calling the two APIs implemented from server side, the frontend (browser extension) can achieve categorized organization of bookmarks.

Since users may have a large number of bookmarks (why else would they need one-click organization?), the frontend processes bookmarks in batches — sending a maximum of 30 links per request to avoid server timeouts. Once all bookmarks are tagged, the tags will be aggregated and categorized.

Finally, the categories serve as top-level folders, while tags become subfolders. Bookmarks are then placed into their respective folders, completing the organization. Some optimizations can be applied — for example, if a folder contains only one bookmark, it is better to be merged into its parent folder.

Observations on Gemini’s Performance

Gemini’s response speed is impressive, and its tagging and categorization are generally reasonable. However, this was my first time integrating AI into a product, and the experience was mostly great — with one caveat: AI output is not always consistent.

During testing, the quality of categorization varied. It took multiple iterations of prompt refinement to stabilize the output, and even then, perfect consistency wasn’t guaranteed. For developers accustomed to deterministic code execution (where results are either correct or incorrect), this unpredictability is something to adapt to. If you're a prompt engineering pro, feel free to drop me a comment with your tips – I'd love to level up my AI skills! 😉

Try It Out!

That’s my experience developing with Gemini. If you’re drowning in hundreds of browser bookmarks, give my bookmark extension's one-click organization a try — it might just save you hours of manual sorting!

Image description

Thanks for reading!

Comments 0 total

    Add comment