Build a Bookmark Manager with AI: Step-by-Step Project Tutorial

What You're Building

A bookmark manager is the ideal second project after a notes app. The data model is simple (one main table), but you'll touch every important web development concept: forms, databases, search, external APIs, and deployment.

Here's what the finished app does:

• Save bookmarks — Paste a URL, add a title (or let AI fetch it), and hit save. Your link is stored in a local SQLite database.
• Add tags — Tag bookmarks with anything: design, read-later, tools, inspiration. Filter your collection by tag in one click.
• Search — Full-text search across titles, URLs, and descriptions. Type a word and find every bookmark that mentions it.
• AI-generated descriptions — Paste a URL and click "Describe." The app calls the OpenAI API, fetches the page content, and writes a two-sentence summary. You'll never look at a saved link and wonder "why did I save this?" again.
• Delete and archive — Remove links you no longer need or archive them so they stay searchable without cluttering your main view.

If you've already built a notes app with AI, this project will feel familiar — and slightly more interesting, because you'll add your first external API call. If this is your first project, don't worry: the prompts below do the heavy lifting.

The Tech Stack (and Why AI Chose It)

When you ask AI to build a personal bookmark manager, it tends to reach for the same stack. Here's what it picks and why each choice makes sense:

Tool	What It Does	Why This One
Next.js 14	React framework with built-in routing and API routes	Lets you build the UI and the backend in one project — no separate server to manage
SQLite + Prisma	Database + query builder	SQLite is a single file — zero setup, zero cost, zero network latency. Prisma makes queries readable
Tailwind CSS	Utility-class CSS framework	AI generates clean Tailwind layouts instantly. No separate stylesheet to manage
OpenAI API	AI text generation	Generates bookmark descriptions from page content with a single API call

The SQLite choice is worth a moment. Most tutorials point beginners at cloud databases like Supabase or Firebase. That's not wrong — but for a personal tool, SQLite is genuinely better. It's a file on your machine. There's no dashboard to log into, no free tier limits to worry about, no connection strings to configure. You get all the power of a real SQL database with none of the overhead.

Step 1: Setting Up the Project

Start with one prompt. Copy this exactly into Claude, Cursor, or your AI tool of choice:

AI will output a schema file, the client setup, and a list of commands. Run them in order. When it's done, you'll have a dev.db file in your project — that's your entire database, sitting right there as a regular file.

Here's what the Prisma schema looks like after AI generates it:

// prisma/schema.prisma
datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Bookmark {
  id          Int      @id @default(autoincrement())
  url         String
  title       String
  description String?
  tags        String   @default("")
  favicon     String?
  archived    Boolean  @default(false)
  createdAt   DateTime @default(now())
}

What this does: Defines the shape of your data. Every bookmark has a URL, a title, an optional description, a comma-separated list of tags, an optional favicon URL, an archived flag, and a timestamp. The ? after a type means the field is optional — you don't have to provide a description when saving a bookmark.

After running npx prisma migrate dev --name init, Prisma creates the dev.db file and the bookmarks table inside it. You can inspect it anytime with npx prisma studio — a visual browser for your database that opens at localhost:5555.

Step 2: Building the Core Feature

The core feature is simple: save a bookmark, see your bookmarks. One form, one list. Here's the prompt:

Let's look at the API route AI generates, because this is where the real work happens:

// app/api/bookmarks/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'

export async function POST(req: NextRequest) {
  const body = await req.json()
  const { url, title, tags } = body

  // Validate URL format
  try {
    new URL(url)
  } catch {
    return NextResponse.json(
      { error: 'Invalid URL format' },
      { status: 400 }
    )
  }

  const bookmark = await prisma.bookmark.create({
    data: {
      url,
      title,
      tags: tags || '',
      favicon: `https://www.google.com/s2/favicons?domain=${new URL(url).hostname}&sz=32`,
    },
  })

  return NextResponse.json(bookmark, { status: 201 })
}

export async function GET() {
  const bookmarks = await prisma.bookmark.findMany({
    where: { archived: false },
    orderBy: { createdAt: 'desc' },
  })
  return NextResponse.json(bookmarks)
}

What this does: The POST handler receives a URL, title, and tags from the form. It validates the URL using the built-in URL constructor — if the URL is malformed, it returns a 400 error immediately. Then it creates the bookmark in SQLite and auto-generates the favicon URL using Google's favicon service. The GET handler fetches all non-archived bookmarks, newest first.

This is a REST API — two endpoints, two HTTP methods, clean and predictable. Every web app you'll ever build uses this pattern.

Step 3: Adding Tags and Search

Tags and search are what separate a useful bookmark manager from a link graveyard. Here's the prompt to add them:

The filtering logic AI generates is worth understanding — it's a pattern that shows up in every list-based UI:

// Client-side filtering — runs every time search or activeTag changes
const filteredBookmarks = useMemo(() => {
  return bookmarks.filter(bookmark => {
    // Tag filter: bookmark must include the active tag
    const tagMatch = !activeTag ||
      bookmark.tags.split(',').map(t => t.trim()).includes(activeTag)

    // Search filter: title, url, or description must include the search term
    const searchTerm = search.toLowerCase()
    const searchMatch = !searchTerm ||
      bookmark.title.toLowerCase().includes(searchTerm) ||
      bookmark.url.toLowerCase().includes(searchTerm) ||
      (bookmark.description || '').toLowerCase().includes(searchTerm)

    return tagMatch && searchMatch
  })
}, [bookmarks, activeTag, search])

What this does: useMemo recomputes the filtered list whenever bookmarks, activeTag, or search changes — but not on every render. The filter logic is two conditions joined with AND: the bookmark must match the active tag (if any) AND must contain the search term (if any). Both conditions are optional — if no tag is selected and no search term is typed, every bookmark passes.

This is client-side filtering, which means no server request happens when you type. All bookmarks are loaded once; JavaScript filters them in memory. For hundreds or even thousands of bookmarks, this is fast enough. If you had tens of thousands, you'd move the search to the server — but that's not a problem you'll have for a long time.

Step 4: Auto-Generating Descriptions with AI

This is the feature that makes the whole thing feel magical. Paste a URL, click "Describe," and AI writes a two-sentence summary of what the page is about. Here's how to build it:

Here's the describe route AI generates:

// app/api/bookmarks/[id]/describe/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'
import OpenAI from 'openai'

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })

export async function POST(
  req: NextRequest,
  { params }: { params: { id: string } }
) {
  const bookmark = await prisma.bookmark.findUnique({
    where: { id: parseInt(params.id) }
  })

  if (!bookmark) {
    return NextResponse.json({ error: 'Bookmark not found' }, { status: 404 })
  }

  // Fetch page content server-side
  let pageText = bookmark.url
  try {
    const res = await fetch(bookmark.url, {
      headers: { 'User-Agent': 'Mozilla/5.0' },
      signal: AbortSignal.timeout(5000),
    })
    const html = await res.text()

    // Extract meta description or first paragraph
    const metaMatch = html.match(
      /<meta[^>]*name=["']description["'][^>]*content=["']([^"']+)["']/i
    )
    const titleMatch = html.match(/<title>([^<]+)<\/title>/i)

    pageText = [
      titleMatch?.[1] || bookmark.title,
      metaMatch?.[1] || '',
    ].join(' — ').slice(0, 500)
  } catch {
    // Fall back to title + URL if fetch fails
    pageText = `${bookmark.title}: ${bookmark.url}`
  }

  // Ask AI for a description
  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{
      role: 'user',
      content: `Write a 1-2 sentence description of this webpage for a personal bookmark manager. Be specific about what the page contains or explains. Page info: ${pageText}`
    }],
    max_tokens: 150,
  })

  const description = completion.choices[0].message.content || ''

  // Save to database
  const updated = await prisma.bookmark.update({
    where: { id: parseInt(params.id) },
    data: { description },
  })

  return NextResponse.json(updated)
}

What this does: The route fetches the bookmarked page server-side (so the OpenAI API key stays secret — never on the client), extracts the page title and meta description, and passes that context to GPT-4o mini. The model writes a concise description, which gets saved back to your SQLite database. Next time you load the page, the description is already there — no second API call needed.

Notice the signal: AbortSignal.timeout(5000) — that's a five-second timeout on the page fetch. Some pages are slow or block automated requests. Without a timeout, your API route hangs forever. AI often forgets this; make sure it's in your code.

Step 5: Polish and Deploy

The app works. Now let's make it feel finished. Here are the polish prompts, followed by the deployment step:

For deployment, the simplest path is Vercel with AI. The one wrinkle with SQLite on Vercel: Vercel's serverless functions have an ephemeral filesystem, which means your dev.db file won't persist between deploys. For a deployed app, switch to Turso (a hosted SQLite service with a Prisma driver) or use a small Postgres database on Supabase.

Prompt for the deployment-ready version:

Once deployed, your bookmark manager is accessible from any device with a browser. You can also build a Chrome extension with AI that adds a one-click "Save to My Bookmarks" button in your browser — the extension calls your Vercel API directly.

What AI Gets Wrong About Bookmark Managers

AI generates a working bookmark manager on the first try about 75% of the time. Here's where the other 25% breaks — and how to catch it:

What to Build Next

Got your bookmark manager working? Here are the natural next steps — each is a single prompt away:

🔌 Chrome Extension Saver

Build a browser button that saves the current page with one click. No more copy-pasting URLs. See our guide on building a Chrome extension with AI — the extension calls your bookmark manager's POST /api/bookmarks endpoint directly.

📦 Import Chrome Bookmarks

Chrome exports bookmarks as an HTML file. Prompt: "Add an import feature that accepts a Chrome bookmarks HTML export file, parses all the anchor tags, and bulk-inserts them into the database with 'imported' as the default tag."

🗂️ Collections

Group bookmarks into named collections — "Reading List," "Project Research," "Recipes." Prompt: "Add a Collection model to the Prisma schema with id, name, and a many-to-many relation to Bookmark. Let users drag bookmarks into collections and filter by collection in the sidebar."

📝 Notes on Bookmarks

Add a notes field to each bookmark — your own thoughts, what was useful, action items. This bridges into a full notes app territory. Prompt: "Add a notes field (long text) to each bookmark. Show it as a collapsible section below the description. Auto-save notes as the user types with a 500ms debounce."

📧 Weekly Digest

Get an email every Monday with your bookmarks from the past week. Prompt: "Add a weekly digest email using Resend. Every Monday at 9 AM, send me the bookmarks I saved in the past 7 days, grouped by tag, with their AI-generated descriptions. Use a Vercel Cron Job to trigger it."

🤖 Smart Tagging

Let AI suggest tags automatically when you save a bookmark. Prompt: "When a bookmark is saved, call GPT-4o-mini to suggest 2-3 relevant tags based on the URL and title. Show the suggestions as clickable pills in the form — the user can accept, ignore, or edit them before saving."

Each of these ideas comes together faster than you'd expect because the foundation is already there. Once you understand how the save/read/search pattern works, adding new features is mostly about extending it. If you want to keep building, check out how to build a blog with AI — it reuses the same database and API patterns you just learned.

Frequently Asked Questions