Byg en Full-Stack Bookmark Manager med OpenCode på 30 minutter (Trin-for-trin)

Hvad vi bygger

Glem funktionslister. Den bedste måde at lære et værktøj på er ved at bygge noget med det.

I denne vejledning vil du bruge OpenCode — den open-source AI coding agent med over 120K+ GitHub stars — til at bygge en komplet bookmark manager fra bunden. Appen vil have:

• En REST API med Express.js og TypeScript
• En SQLite database med full-text search
• Et tag-system til organisering af bookmarks
• En enkel men funktionel frontend
• Unit tests

Hver OpenCode funktion bliver introduceret i det øjeblik, du har brug for den — ikke i et abstrakt funktionsafsnit. Ved slutningen vil du vide, hvordan man installerer OpenCode, konfigurerer modeller, bruger Build og Plan modes, opsætter MCP servers og opretter custom agents — alt sammen fordi du brugte dem til at bygge et rigtigt projekt.

Tid: ~30 minutter Forudsætninger: Node.js 18+ installeret, en terminal (macOS, Linux eller WSL på Windows) Pris: Gratis (ved brug af OpenCode Zen modeller)

Fase 1: Installation af OpenCode og opsætning af projektet (5 minutter)

Installer OpenCode

Åbn din terminal og kør en af disse kommandoer:

# Option 1: npm (recommended)
npm i -g opencode-ai@latest

# Option 2: Homebrew (macOS/Linux)
brew install sst/tap/opencode

# Option 3: One-line installer
curl -fsSL https://opencode.ai/install.sh | bash

Bekræft installationen:

opencode --version

Du bør se versionsnummeret. Per March 2026 er den seneste stabile udgivelse tilgængelig på OpenCode GitHub repository.

Opret projektmappen

mkdir bookmark-manager && cd bookmark-manager
git init
npm init -y

Start OpenCode for første gang

opencode

Dette åbner OpenCode's TUI (Terminal User Interface) — en interaktiv brugerflade i fuld skærm bygget med Bubble Tea. Du vil se et chat-felt i bunden og en samtalrude i hovedområdet.

Vælg en model

Ved første opstart vil OpenCode bede dig om at vælge en model. Du har tre muligheder:

Gratis (Zen modeller): Skriv /models og vælg en af de gratis Zen modeller. Til denne vejledning fungerer Grok Code Fast 1 eller GLM 4.7 godt. Disse er gratis og kræver ingen API key.

Lokal (Ollama): Hvis du har Ollama installeret, vil OpenCode registrere det automatisk. Den anbefalede model til Ollama er glm-4.7:cloud.

Betalt (medbring din egen nøgle): Skriv /connect for at forbinde din Anthropic, OpenAI eller Google API key. Nøgler gemmes lokalt i ~/.local/share/opencode/auth.json.

Til denne vejledning fungerer enhver model. Modeller med højere kapacitet (Claude Sonnet 4.6, GPT-5.4) vil give bedre resultater ved komplekse opgaver, men de gratis Zen modeller håndterer alt, hvad vi bygger her.

Fase 2: Opbygning af projektet med Build mode (4 minutter)

OpenCode starter som standard i Build mode. Build mode giver AI agenten fuld adgang til at oprette filer, redigere kode og køre kommandoer. Dette er det, vi ønsker til opbygningen.

Din første prompt

Skriv dette i OpenCode chatten:

Set up a TypeScript Node.js project with Express for a bookmark manager REST API.
Use SQLite via better-sqlite3 for the database. Add TypeScript, ts-node, and
nodemon as dev dependencies. Create a src/ directory with an index.ts entry point
that starts an Express server on port 3000.

OpenCode vil:

1. Oprette en tsconfig.json
2. Installere afhængigheder med npm install
3. Oprette src/index.ts med Express server-opsætningen
4. Opdatere package.json med start-scripts

Hold øje med TUI — du vil se agenten udføre terminal-kommandoer, oprette filer og forklare, hvad den gør ved hvert trin. Dette er ikke kodegenerering i et vakuum; OpenCode har fuld adgang til dit filsystem og din terminal.

Bekræft at det virker

Når OpenCode er færdig, fortæl den:

Run the server and verify it starts correctly on port 3000.

OpenCode vil køre npx nodemon src/index.ts og bekræfte, at serveren lytter. Du bør se et output som Server running on http://localhost:3000.

Hvad skete der lige (Funktion: Build Mode)

Build mode er OpenCode's standard-agent. Den har adgang til alle værktøjer: fil læsning/skrivning, terminal-eksekvering og koderedigering. Ifølge OpenCode dokumentationen kan du tænke på det som en AI pair programmer med fuld adgang til dit udviklingsmiljø.

Fase 3: Oprettelse af datamodel og database (4 minutter)

Design skemaet

Skriv denne prompt:

Create a database module at src/db.ts that:
1. Initializes a SQLite database at ./data/bookmarks.db
2. Creates a bookmarks table with: id (auto-increment), url (text, unique),
   title (text), description (text, nullable), created_at (datetime),
   updated_at (datetime)
3. Creates a tags table with: id (auto-increment), name (text, unique)
4. Creates a bookmark_tags junction table for many-to-many relationships
5. Enables WAL mode for concurrent read performance
6. Creates an FTS5 virtual table for full-text search on title and description
Export a function to get the database instance.

OpenCode vil generere det fulde database-modul. Vær opmærksom på, hvordan den håndterer FTS5 (Full-Text Search 5) opsætningen — dette er en SQLite funktion, der vil drive vores søgefunktion senere.

Initialiser databasen ved serverstart

Import the database module in index.ts and initialize it when the server starts.
Log a confirmation message.

Opret opencode.json konfigurationen

Dette er et godt tidspunkt at introducere projektkonfiguration på. Opret en fil ved at fortælle OpenCode:

Create an opencode.json file in the project root with the project name
"bookmark-manager" and a rule that says "This is a TypeScript Express API
using better-sqlite3. Follow RESTful conventions. Use async/await. Return
JSON responses with consistent error formatting."

Dette opretter projektkonfigurationsfilen, som OpenCode læser ved opstart. Den giver AI'en vedvarende kontekst om dit projekt — kodestandarder, arkitekturbeslutninger og begrænsninger — så du ikke behøver at gentage dem i hver prompt.

Fase 4: Opbygning af REST API endpoints (5 minutter)

Generer ruterne

Create a routes module at src/routes/bookmarks.ts with these endpoints:
- POST /api/bookmarks — create a bookmark (validate url and title are present)
- GET /api/bookmarks — list all bookmarks with pagination (page, limit params)
- GET /api/bookmarks/:id — get a single bookmark with its tags
- PUT /api/bookmarks/:id — update a bookmark
- DELETE /api/bookmarks/:id — delete a bookmark and its tag associations
Use proper HTTP status codes. Return JSON with a consistent shape:
{ success: boolean, data: any, error?: string }

Registrer ruterne

Import the bookmark routes in index.ts and register them. Also add
express.json() middleware and a global error handler.

Test med curl

Start the server, then create a test bookmark using curl:
curl -X POST http://localhost:3000/api/bookmarks \
  -H "Content-Type: application/json" \
  -d '{"url": "https://opencode.ai", "title": "OpenCode - AI Coding Agent"}'
Then fetch all bookmarks to verify it was saved.

OpenCode vil udføre disse kommandoer i din terminal og vise dig svarene. Det er her, værktøjet virkelig skinner — du forlader aldrig terminalen, og AI'en bekræfter sit eget arbejde.

Fase 5: Tilføj søgning med FTS5 (4 minutter)

Introduktion til Plan mode

Før vi bygger søgefunktionen, lad os bruge Plan mode til at gennemtænke implementeringen. Skift tilstand:

/plan

Nu er du i Plan mode. AI'en kan læse din kode og analysere den, men kan ikke ændre nogen filer. Dette er nyttigt til planlægning før man foretager ændringer.

Analyze my current database schema and FTS5 table. Plan how to implement a
search endpoint that queries the FTS5 table and returns bookmarks ranked by
relevance. Consider edge cases: empty queries, special characters, partial
matches.

OpenCode vil undersøge din kode, skrive en plan til .opencode/plans/ og forklare sin tilgang uden at røre ved nogen filer. Læs planen, juster hvis nødvendigt, og skift derefter tilbage:

/build

Implementer søgning

Based on the plan, implement a GET /api/bookmarks/search?q=query endpoint
that uses the FTS5 virtual table for full-text search. Include snippet
highlighting and relevance ranking. Handle edge cases from the plan.

Test søgning

Create three more test bookmarks with different titles and descriptions,
then test the search endpoint with a query that should match two of them.

Hvad skete der lige (Funktion: Plan Mode)

Plan/Build arbejdsgangen er, hvordan erfarne udviklere bruger OpenCode til komplekse opgaver. Planlæg først, gennemse tilgangen, og byg derefter. Planfilerne gemmes i .opencode/plans/ og kan refereres senere af build-agenten. Dette forhindrer AI'en i at træffe store strukturelle beslutninger løbende.

Fase 6: Implementering af tag-systemet (4 minutter)

Opret tag-endpoints

Create a routes module at src/routes/tags.ts with:
- POST /api/tags — create a new tag
- GET /api/tags — list all tags with bookmark counts
- POST /api/bookmarks/:id/tags — add a tag to a bookmark
- DELETE /api/bookmarks/:id/tags/:tagId — remove a tag from a bookmark
- GET /api/bookmarks?tag=tagname — filter bookmarks by tag (update existing
  list endpoint to support this query parameter)
Register the tag routes in index.ts.

Test tag-flowet

Create two tags: "dev-tools" and "tutorials". Add the "dev-tools" tag to
the OpenCode bookmark. Then fetch bookmarks filtered by the "dev-tools" tag.

Fase 7: Opbygning af en enkel frontend (5 minutter)

Generer frontenden

Create a public/ directory with a single-page frontend:
- index.html with a clean, minimal design (no framework, just HTML/CSS/JS)
- A form to add bookmarks (url, title, description)
- A search bar that queries the search endpoint with debounced input
- A list of bookmarks showing title, url, tags, and a delete button
- A tag filter sidebar that shows all tags with counts
- Use fetch() for API calls. Mobile responsive. No build step needed.
Serve the public/ directory as static files from Express.

OpenCode vil generere den komplette frontend — HTML-struktur, CSS-styling og JavaScript til API-interaktioner — i én omgang. Fordelen ved at bygge dette i terminalen med en AI agent er, at den med det samme kan teste, om frontenden forbinder til API'en.

Test hele stakken

Start the server, open http://localhost:3000 in a description, and verify
that adding a bookmark from the form, searching, and filtering by tag all
work correctly.

Fase 8: Tilføjelse af tests med en Custom Agent (5 minutter)

Opret en Custom Test Agent

Det er her OpenCode's custom agents funktion kommer ind i billedet. I stedet for at bruge den generiske Build agent til test, vil vi oprette en specialiseret en.

Tilføj dette til din opencode.json:

{
  "agents": {
    "test": {
      "name": "Test Writer",
      "instructions": "You are a testing specialist. Write comprehensive tests using Vitest. Focus on edge cases and error paths. Never modify source code — only create and edit test files.",
      "tools": ["read", "write", "terminal"]
    }
  }
}

Skift nu til test-agenten:

/agent test

Generer tests

Write comprehensive tests for the bookmark API using Vitest and supertest.
Cover:
- Creating a bookmark with valid data
- Creating a bookmark with missing required fields
- Fetching all bookmarks with pagination
- Searching with FTS5 (matching and non-matching queries)
- Adding and removing tags
- Deleting a bookmark removes its tag associations
Use an in-memory SQLite database for test isolation.

Kør testene

Install vitest and supertest as dev dependencies, add a test script to
package.json, then run the test suite.

Hvad skete der lige (Funktion: Custom Agents)

Custom agents lader dig oprette fokuserede personaer med specifikke instruktioner og værktøjsadgang. Den test-agent vi oprettede, kan kun læse filer, skrive testfiler og køre terminal-kommandoer — den kan ikke ændre kildekode. Denne begrænsning forhindrer det almindelige problem med, at AI'en "fikser" din kildekode, når tests fejler, i stedet for at fikse testene.

Du kan oprette agenter til enhver specialiseret arbejdsgang: code review, dokumentation, database migrations, DevOps-scripts. OpenCode agents dokumentationen har flere eksempler.

Bonus: Tilslutning af en MCP server for udvidet funktionalitet

Hvis du vil udvide din bookmark manager, kan du tilslutte eksterne værktøjer via MCP (Model Context Protocol) servers.

Eksempel: Tilføjelse af en Link Preview MCP server

Forestil dig, at du ønsker, at OpenCode automatisk skal hente metadata (titel, beskrivelse, favicon) fra URL'er, når du opretter bookmarks. Du kan tilslutte en MCP server, der udfører HTTP fetching:

Tilføj dette til din opencode.json:

{
  "mcp": {
    "link-preview": {
      "type": "local",
      "command": ["npx", "link-preview-mcp-server"]
    }
  }
}

Nu har OpenCode et nyt værktøj til rådighed: den kan hente URL-metadata som en del af sin arbejdsgang. Når du beder den om at "tilføje et bookmark for https://example.com og udfylde titel og beskrivelse automatisk", vil den bruge MCP serveren til at hente de data.

Remote MCP servers

Til cloud-tjenester skal du bruge remote MCP servers med automatisk OAuth-håndtering:

{
  "mcp": {
    "cloud-storage": {
      "type": "remote",
      "url": "https://mcp.example.com/storage",
      "headers": {
        "Authorization": "Bearer ${STORAGE_TOKEN}"
      }
    }
  }
}

OpenCode registrerer 401-svar og starter automatisk OAuth-flowet, hvis serveren understøtter Dynamic Client Registration.

Bonus: Brug af OpenCode i CI/CD

OpenCode har en CLI mode, der kører uden TUI — perfekt til automatisering. Du kan bruge det i GitHub Actions eller enhver CI pipeline:

# Run a single prompt and exit
opencode -p "Review the changes in the last commit for security issues" --no-tui

# Use a specific model
opencode -m "claude-sonnet-4-6" -p "Generate a changelog entry for this release" --no-tui

Til vores bookmark manager kunne du tilføje et CI-trin, der kører OpenCode for at gennemgå PR'er automatisk. OpenCode GitHub integrationen giver en mere strømlinet version af denne arbejdsgang.

Den komplette projektstruktur

Efter at have fulgt denne vejledning bør dit projekt se således ud:

bookmark-manager/
  opencode.json          # OpenCode projektkonfiguration + custom agents + MCP
  package.json
  tsconfig.json
  src/
    index.ts             # Express server entry point
    db.ts                # SQLite database modul med FTS5
    routes/
      bookmarks.ts       # CRUD + søge-endpoints
      tags.ts            # Tag management endpoints
  public/
    index.html           # Single-page frontend
  tests/
    bookmarks.test.ts    # API test suite
  data/
    bookmarks.db         # SQLite database (gitignored)
  .opencode/
    plans/               # Planer fra Plan mode sessioner

Hvad du har lært

Ved at bygge et rigtigt projekt har du øvet dig på disse OpenCode funktioner:

Den væsentligste forskel på OpenCode og andre AI-kodningsværktøjer er, at det er helt open source, kører i din terminal og ikke gemmer din kode eller kontekstdata. Du kontrollerer modellerne, dataene forbliver lokale, og fællesskabet af over 800 bidragsydere sørger for, at det udvikler sig hurtigt.

For teams, der bruger flere AI-værktøjer, fungerer OpenCode godt som det terminal-baserede supplement til IDE-assistenter. Hos ZBuild bruger vi det ofte sammen med editor-baserede værktøjer til forskellige dele af udviklingsprocessen.

Næste trin

Nu hvor du har en fungerende bookmark manager og en solid forståelse af OpenCode, er her nogle retninger, du kan udforske:

1. Tilføj autentificering — Brug Build-agenten til at tilføje JWT-baseret auth med brugerkonti
2. Udrul til produktion — Bed OpenCode om at generere en Dockerfile og udrul til Fly.io eller Railway
3. Byg en browser extension — Opret en Chrome extension, der tilføjer bookmarks via API'en
4. Udforsk flere Zen modeller — Prøv Big Pickle, MiniMax M2.1, eller kør en lokal model via Ollama
5. Opret flere custom agents — En "refactor"-agent, en "docs"-agent eller en "security audit"-agent

OpenCode dokumentationen og awesome-opencode repository har flere plugins, temaer og fællesskabskonfigurationer, du kan udforske.

Kilder

• OpenCode — Official Documentation
• OpenCode — GitHub Repository
• OpenCode — Zen Models
• OpenCode — Agents Documentation
• OpenCode — MCP Servers
• OpenCode — CLI Mode
• OpenCode — Configuration
• OpenCode — GitHub Integration
• Ollama — OpenCode Integration
• awesome-opencode — Community Resources
• Composio — MCP with OpenCode
• Computing for Geeks — Setup OpenCode AI