Bygg en Full-Stack Bookmark Manager med OpenCode på 30 minutter (steg-for-steg)

Det vi bygger

Glem funksjonslister. Den beste måten å lære et verktøy på er å bygge noe med det.

I denne veiledningen vil du bruke OpenCode — den åpen kildekode-baserte AI-kodingsagenten med 120K+ GitHub-stjerner — til å bygge en komplett bokmerkebehandler fra bunnen av. Appen vil ha:

• Et REST API med Express.js og TypeScript
• En SQLite-database med fulltekstsøk
• Et tag-system for organisering av bokmerker
• En enkel, men funksjonell frontend
• Unit tester

Hver OpenCode-funksjon blir introdusert i det øyeblikket du trenger den — ikke i en abstrakt seksjon for funksjoner. Til slutt vil du vite hvordan du installerer OpenCode, konfigurerer modeller, bruker Build og Plan modes, setter opp MCP-servere og oppretter custom agents — alt fordi du brukte dem til å bygge et ekte prosjekt.

Tid: ~30 minutter Forutsetninger: Node.js 18+ installert, en terminal (macOS, Linux eller WSL på Windows) Kostnad: Gratis (ved bruk av OpenCode Zen-modeller)

Fase 1: Installere OpenCode og sette opp prosjektet (5 minutter)

Installer OpenCode

Åpne terminalen din og kjør en av disse kommandoene:

# Alternativ 1: npm (anbefalt)
npm i -g opencode-ai@latest

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

# Alternativ 3: Én-linjes installasjon
curl -fsSL https://opencode.ai/install.sh | bash

Bekreft installasjonen:

opencode --version

Du bør se versjonsnummeret. Per mars 2026 er den nyeste stabile utgivelsen tilgjengelig på OpenCode GitHub repository.

Opprett prosjektkatalogen

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

Start OpenCode for første gang

opencode

Dette åpner OpenCodes TUI (Terminal User Interface) — et interaktivt grensesnitt i fullskjerm bygget med Bubble Tea. Du vil se et chat-felt nederst og et samtalepanel i hovedområdet.

Velg en modell

Ved første oppstart vil OpenCode be deg om å velge en modell. Du har tre veier:

Gratis (Zen-modeller): Skriv /models og velg en av de gratis Zen-modellene. For denne veiledningen fungerer Grok Code Fast 1 eller GLM 4.7 bra. Disse er gratis og krever ingen API-nøkkel.

Lokal (Ollama): Hvis du har Ollama installert, vil OpenCode oppdage det automatisk. Den anbefalte modellen for Ollama er glm-4.7:cloud.

Betalt (ta med egen nøkkel): Skriv /connect for å koble til din Anthropic, OpenAI eller Google API-nøkkel. Nøkler lagres lokalt i ~/.local/share/opencode/auth.json.

For denne veiledningen fungerer alle modeller. Modeller med høyere kapasitet (Claude Sonnet 4.6, GPT-5.4) vil gi bedre resultater på komplekse oppgaver, men de gratis Zen-modellene håndterer alt vi bygger her.

Fase 2: Oppsett av prosjektet med Build mode (4 minutter)

OpenCode starter i Build mode som standard. Build mode gir AI-agenten full tilgang til å opprette filer, redigere kode og kjøre kommandoer. Dette er det vi ønsker for oppsettet.

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. Opprette en tsconfig.json
2. Installere avhengigheter med npm install
3. Opprette src/index.ts med oppsett for Express-serveren
4. Oppdatere package.json med start-skript

Følg med i TUI — du vil se agenten utføre terminalkommandoer, opprette filer og forklare hva den gjør i hvert steg. Dette er ikke kodegenerering i et vakuum; OpenCode har full tilgang til filsystemet og terminalen din.

Bekreft at det fungerer

Når OpenCode er ferdig, fortell den:

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

OpenCode vil kjøre npx nodemon src/index.ts og bekrefte at serveren lytter. Du bør se utdata som Server running on http://localhost:3000.

Hva som nettopp skjedde (Funksjon: Build mode)

Build mode er OpenCodes standardagent. Den har tilgang til alle verktøy: lese/skrive filer, terminalkjøring og koderedigering. I henhold til OpenCode-dokumentasjonen, kan du se på det som en AI-parprogrammerer med full tilgang til utviklingsmiljøet ditt.

Fase 3: Opprette datamodell og database (4 minutter)

Design skjemaet

Skriv denne prompten:

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 den komplette databasemodulen. Legg merke til hvordan den håndterer FTS5 (Full-Text Search 5) oppsettet — dette er en SQLite-funksjon som vil drive søkefunksjonaliteten vår senere.

Initialiser databasen ved serveroppstart

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

Opprett opencode.json-konfigurasjon

Dette er et godt tidspunkt å introdusere prosjektkonfigurasjon. Opprett en fil ved å fortelle 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 oppretter prosjektkonfigurasjonsfilen som OpenCode leser ved oppstart. Den gir AI-en vedvarende kontekst om prosjektet ditt — kodestandarder, arkitekturbeslutninger og begrensninger — slik at du ikke trenger å gjenta dem i hver prompt.

Fase 4: Bygge REST API-endepunkter (5 minutter)

Generer ruter

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 ruter

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 utføre disse kommandoene i terminalen din og vise deg svarene. Det er her verktøyet virkelig skinner — du forlater aldri terminalen, og AI-en verifiserer sitt eget arbeid.

Fase 5: Legge til søk med FTS5 (4 minutter)

Introduser Plan mode

Før vi bygger søket, la oss bruke Plan mode for å tenke gjennom implementeringen. Bytt modus:

/plan

Nå er du i Plan mode. AI-en kan lese koden din og analysere den, men kan ikke endre noen filer. Dette er nyttig for planlegging før man gjør endringer.

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øke koden din, skrive en plan til .opencode/plans/, og forklare tilnærmingen sin uten å røre noen filer. Les planen, juster om nødvendig, og bytt deretter tilbake:

/build

Implementer søk

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øk

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

Hva som nettopp skjedde (Funksjon: Plan mode)

Plan/Build-arbeidsflyten er hvordan erfarne utviklere bruker OpenCode på komplekse oppgaver. Planlegg først, vurder tilnærmingen, og bygg deretter. Planfilene lagres i .opencode/plans/ og kan refereres til senere av Build-agenten. Dette forhindrer AI-en fra å ta store strukturelle beslutninger på sparket.

Fase 6: Implementere tag-systemet (4 minutter)

Opprett tag-endepunkter

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-flyten

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: Bygge en enkel frontend (5 minutter)

Generer frontend

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 frontenden — HTML-struktur, CSS-styling og JavaScript for API-interaksjoner — i én omgang. Fordelen med å bygge dette i terminalen med en AI-agent er at den umiddelbart kan teste om frontenden kobler seg til API-et.

Test hele stacken

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: Legge til tester med en Custom agent (5 minutter)

Opprett en egendefinert testagent

Det er her OpenCodes custom agents funksjon kommer inn. I stedet for å bruke den generiske Build-agenten for testing, vil vi opprette en spesialisert agent.

Legg dette til i 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"]
    }
  }
}

Bytt nå til testagenten:

/agent test

Generer tester

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.

Kjør testene

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

Hva som nettopp skjedde (Funksjon: Custom agents)

Custom agents lar deg opprette fokuserte personaer med spesifikke instruksjoner og verktøytilgang. Testagenten vi opprettet kan bare lese filer, skrive testfiler og kjøre terminalkommandoer — den kan ikke endre kildekoden. Denne begrensningen forhindrer det vanlige problemet der AI "fikser" kildekoden din når tester feiler, i stedet for å fikse testene.

Du kan opprette agenter for enhver spesialisert arbeidsflyt: kodegjennomgang, dokumentasjon, databasemigreringer, DevOps-skript. OpenCode agents-dokumentasjonen har flere eksempler.

Bonus: Koble til en MCP-server for utvidet funksjonalitet

Hvis du vil utvide bokmerkebehandleren din, kan du koble til eksterne verktøy via MCP (Model Context Protocol) servere.

Eksempel: Legge til en Link Preview MCP-server

Tenk deg at du vil at OpenCode automatisk skal hente metadata (tittel, beskrivelse, favicon) fra URL-er når du oppretter bokmerker. Du kan koble til en MCP-server som gjør HTTP-henting:

Legg dette til i din opencode.json:

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

Nå har OpenCode et nytt verktøy tilgjengelig: den kan hente URL-metadata som en del av arbeidsflyten sin. Når du ber den om å "legge til et bokmerke for https://example.com og fyll ut tittel og beskrivelse automatisk," vil den bruke MCP-serveren til å hente de dataene.

Remote MCP-servere

For skytjenester, bruk eksterne MCP-servere med automatisk OAuth-håndtering:

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

OpenCode oppdager 401-svar og starter OAuth-flyten automatisk hvis serveren støtter Dynamic Client Registration.

Bonus: Bruke OpenCode i CI/CD

OpenCode har en CLI mode som kjører uten TUI — perfekt for automatisering. Du kan bruke den i GitHub Actions eller en hvilken som helst CI-pipeline:

# Kjør en enkelt prompt og avslutt
opencode -p "Review the changes in the last commit for security issues" --no-tui

# Bruk en spesifikk modell
opencode -m "claude-sonnet-4-6" -p "Generate a changelog entry for this release" --no-tui

For bokmerkebehandleren vår kan du legge til et CI-steg som kjører OpenCode for å vurdere PR-er automatisk. OpenCode GitHub-integrasjonen gir en mer strømlinjeformet versjon av denne arbeidsflyten.

Den komplette prosjektstrukturen

Etter å ha fulgt denne veiledningen, bør prosjektet ditt se slik ut:

bookmark-manager/
  opencode.json          # OpenCode prosjektkonfig + custom agents + MCP
  package.json
  tsconfig.json
  src/
    index.ts             # Express server entry point
    db.ts                # SQLite databasemodul med FTS5
    routes/
      bookmarks.ts       # CRUD + søke-endepunkter
      tags.ts            # Tag-håndteringsendepunkter
  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 sesjoner

Hva du har lært

Ved å bygge et ekte prosjekt har du praktisert disse OpenCode-funksjonene:

Den største forskjellen mellom OpenCode og andre AI-kodingsverktøy er at det er helt åpen kildekode, kjører i terminalen din, og lagrer ikke koden din eller kontekstdata. Du kontrollerer modellene, dataene forblir lokale, og fellesskapet med 800+ bidragsytere sørger for rask utvikling.

For team som bruker flere AI-verktøy, fungerer OpenCode godt som et terminalbasert supplement til IDE-assistenter. Hos ZBuild bruker vi det ofte sammen med redigeringsbaserte verktøy for ulike deler av utviklingsarbeidsflyten.

Neste steg

Nå som du har en fungerende bokmerkebehandler og en solid forståelse av OpenCode, er her noen retninger du kan utforske:

1. Legg til autentisering — Bruk Build-agenten til å legge til JWT-basert autentisering med brukerkontoer
2. Distribuer til produksjon — Be OpenCode generere en Dockerfile og distribuere til Fly.io eller Railway
3. Bygg en nettleserutvidelse — Opprett en Chrome-utvidelse som legger til bokmerker via API-et
4. Utforsk flere Zen-modeller — Prøv Big Pickle, MiniMax M2.1, eller kjør en lokal modell gjennom Ollama
5. Opprett flere custom agents — En "refactor"-agent, en "docs"-agent eller en "security audit"-agent

OpenCode-dokumentasjonen og awesome-opencode repository har flere utvidelser, temaer og fellesskapskonfigurasjoner å utforske.

Kilder

• OpenCode — Offisiell dokumentasjon
• OpenCode — GitHub Repository
• OpenCode — Zen-modeller
• OpenCode — Agents-dokumentasjon
• OpenCode — MCP-servere
• OpenCode — CLI mode
• OpenCode — Konfigurasjon
• OpenCode — GitHub-integrasjon
• Ollama — OpenCode-integrasjon
• awesome-opencode — Fellesskapsressurser
• Composio — MCP med OpenCode
• Computing for Geeks — Oppsett av OpenCode AI