DEV Community: Dang Tran

Pair - your personal stylist

Dang Tran — Sat, 23 May 2026 11:31:53 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

Pair is a personal stylist in your pocket. You take a photo of something you already own — a jacket, a pair of jeans, whatever — and the app finds you a complementary piece from a catalogue of 44,000 products. Then it generates an editorial fashion photo showing both items styled together on a model, so you can actually see how the outfit looks before you buy anything.

The product catalogue is the Myntra fashion dataset (~44k products), available at kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset.

The app is a full-stack TypeScript project — Vite + React on the frontend, Hono on Node.js on the backend. The interesting part is the AI pipeline: I send the uploaded image to Gemma 4, which returns structured JSON — category, gender, style tags, dominant colour. Then I query MongoDB with a $match + $sample aggregation to pull 30 random candidates from the right complementary category, and send those to Gemma 4 again to pick the best pairing. Finally, Gemini 2.5 Flash generates the editorial look image.

Upload a photo

The app finds a match

Generate an editorial image of both items on a model

Demo

pair-vite.vercel.app

Code

sea2709 / pair

Pair.

A clothing pairing app — upload a photo of one piece you own, get a complementary match from a curated catalogue, then see both styled together in an AI-generated editorial image.

The product catalogue is the Myntra fashion dataset (~44k products), available at kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset.

How it works

Upload a photo of a top, bottom, shoes, or accessory — optionally add a hint if the photo contains multiple pieces
Analyze — Gemma 4 identifies the piece: category, gender, style, palette
Confirm — review the AI's interpretation; re-analyse with a corrected hint if needed
Match — a complementary item is randomly sampled from the catalogue, then Gemma 4 picks the best fit
Lookbook — Gemini generates a fashion editorial photo of both pieces styled on a model

Stack

Layer	Tech
Frontend	Vite + React + TypeScript + Tailwind CSS v4
Backend	Hono on Node.js
AI	Google GenAI SDK (Gemma 4

…

View on GitHub

How I Used Gemma 4

Gemma 4 (gemma-4-31b-it) is used for two tasks where we need text output from a structured prompt:

Clothing analysis — given an image, return a JSON object with category, gender, style, colors, etc.
Match selection — given 30 product candidates from MongoDB, pick the best one and return a JSON object with the index, match score, and stylist note.

Notion Bookmarks Manager

Dang Tran — Sun, 29 Mar 2026 14:53:58 +0000

This is a submission for the Notion MCP Challenge

What I Built

The web content I browse every day is part of my personal knowledge base — but finding something I read weeks ago is frustratingly hard. I built this Chrome extension to solve that: it saves any page I bookmark directly to Notion, uses AI to generate a summary of the page content, and lets me search across everything I've saved using natural language.

Video Demo

Show us the code

sea2709 / notion-bookmark-manager

Notion Bookmark Manager

A Chrome extension that saves browser tabs to your Notion workspace, with folder organization, notes, AI-generated summaries, and AI-powered search.

Features

Save bookmarks — Save the current tab to a Notion database with a title, URL, and optional notes
Folder tree — Organize bookmarks into nested folders synced from Notion
AI summaries — Optionally generate a page summary using Gemini AI based on a custom prompt
Browse bookmarks — View all your bookmarks grouped by folder in a collapsible tree
Search — Search your Notion bookmarks using natural language via Gemini AI and the Notion MCP

Architecture

Chrome Extension (Manifest V3)
├── popup/          UI for saving, browsing, and searching bookmarks
├── background/     Service worker — routes messages between popup and server
├── shared/         Shared types, constants, and chrome.storage helpers
└── dist/           Built output (load this directory in Chrome)
Local Server (Express)
└── server/         Handles all Notion API

…

View on GitHub

How I Used Notion MCP

MCP (Model Context Protocol) is used only in the searchBookmark function in server/notion-api.ts. It is not used anywhere else — all other Notion operations (create bookmark, fetch folders, etc.) go through the @notionhq/client SDK directly.

How it works

User presses Enter in search
→ popup sends SEARCH_BOOKMARKS message
→ service worker calls POST /call { tool: "search_bookmarks" }
→ server calls searchBookmark()
→ searchBookmark() connects to Notion MCP via npx mcp-remote
→ Gemini AI uses the MCP tools to query Notion
→ AI response text returned to popup

The three components involved (MCP Client, mcpToTool adapter, Gemini)

1.MCP Client (@modelcontextprotocol/sdk)

const notionClient = new McpClient({ name: "notion-client", version: "1.0.0" });
const transport = new StdioClientTransport({
  command: "npx",
  args: ["-y", "mcp-remote", "https://mcp.notion.com/mcp"],
  env: { NOTION_TOKEN: process.env.NOTION_API_KEY },
});
await notionClient.connect(transport);

The MCP client spawns npx mcp-remote as a child process (stdio transport), which acts as a proxy connecting to Notion's official MCP server at https://mcp.notion.com/mcp. This exposes Notion's capabilities (search pages, read content, etc.) as MCP tools.

2.mcpToTool adapter (@google/genai)

config: {
  tools: [mcpToTool(notionClient)],
}

mcpToTool wraps the MCP client so that Gemini can discover and call Notion's MCP tools automatically — Gemini decides which Notion tools to invoke based on the prompt.

3.Gemini as the orchestrator

const prompt = `Search for pages under the database with the ID ${databaseId} mentioning '${keyword}'`;
const response = await ai.models.generateContent({
  model: process.env.GEMINI_MODEL ?? "gemini-2.5-flash",
  contents: prompt,
  config: { tools: [mcpToTool(notionClient)] },
});

Gemini receives the natural language prompt and autonomously calls Notion MCP tools to find relevant pages, then summarizes the results into a text response.

Why MCP for search vs. the SDK for everything else?
The Notion SDK's search() API only matches page titles — it cannot search page body content. Notion's MCP server exposes richer capabilities including content-level search. By routing the query through Gemini + MCP, the search can find bookmarks by their AI-generated summary text, not just the title.

Apparel Shopping - Chatbot

Dang Tran — Mon, 09 Feb 2026 04:08:41 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Conversational Experiences

What I Built

A apparel shopping site with 2 pages (homepage and product details page) and a chatbot assistanting customers looking for products via conversation.

Demo

https://apparel-web.vercel.app/
Source code: https://bitbucket.org/hdang2709/apparel/src/main/

How I Used Algolia Agent Studio

I set up an application in Alogolia, create a new index and use the apparel sample dataset which has 2000 items.

I configure searchable attributes and related facets.

title
description
product_type
color
categories
price
tags

Leverage InstantSearch.js widget to build the UI including a chat widget.

Why Fast Retrieval Matters

The built-in chat widget in InstantSearch.js is very convenient. From the basic coding perspective, all you need are an agent ID and a container element to render to widget to build a chat interface that interacts with a generative AI assistant built with Algolia Agent Studio. And you can focus on constructing constructions and tools for the AI Agent.
Algolia Studio also provides all conversations lists on the site with insights about how the response conducted (Reasoning and Tool used), which is very helpful to configure the Tools and setting up search attributes.

Apparel Shopping

Dang Tran — Mon, 09 Feb 2026 03:09:10 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Non-Conversational Experiences

What I Built

A apparel shopping site with 2 pages (homepage and product details page) and a chatbot assistanting customers looking for products via conversation.

Demo

https://apparel-web.vercel.app/
Source code: https://bitbucket.org/hdang2709/apparel/src/main/

How I Used Algolia Agent Studio

I set up an application in Alogolia, create a new index and use the apparel sample dataset which has 2000 items.

I configure searchable attributes and related facets.

title
description
product_type
color
categories
price
tags

Leverage InstantSearch.js widget to build the UI for list products, refinement, search box, auto complete, chat, etc.

With a traditional shopping site, customers use existing filter widgets to find their products. I added a tweak to let customers using a prompt to filter products by leveraging Generative AI in Algolia Agent Studio. I set up 2 agents, one for the chat and one for the filter functionality. The 2 agents are pretty similar, but the filter agent will not response with follow up questions to clarify some details.

Why Fast Retrieval Matters

Algolia agent can form a query based on the user's prompt or conversation. The query is flexible depending on the indexed data, configurable search attributes.