Bygg en Full-Stack bokmärkeshanterare med OpenCode på 30 minuter (steg-för-steg)

Vad vi bygger

Glöm funktionslistor. Det bästa sättet att lära sig ett verktyg är att bygga något med det.

I den här guiden kommer du att använda OpenCode — den open-source AI-kodningsagenten med 120K+ GitHub-stjärnor — för att bygga en komplett bokmärkshanterare från grunden. Appen kommer att ha:

• Ett REST API med Express.js och TypeScript
• En SQLite-databas med full-text search
• Ett taggsystem för att organisera bokmärken
• En enkel men funktionell frontend
• Unit tests

Varje OpenCode-funktion introduceras precis när du behöver den — inte i en abstrakt funktionsdel. I slutet kommer du att veta hur man installerar OpenCode, konfigurerar modeller, använder Build och Plan-lägen, ställer in MCP-servrar och skapar anpassade agenter — allt för att du använde dem för att bygga ett riktigt projekt.

Tid: ~30 minuter Förutsättningar: Node.js 18+ installerat, en terminal (macOS, Linux eller WSL på Windows) Kostnad: Gratis (med OpenCode Zen-modeller)

Fas 1: Installera OpenCode och konfigurera projektet (5 minuter)

Installera OpenCode

Öppna din terminal och kör ett av dessa kommandon:

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

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

# Alternativ 3: Enrads-installerare
curl -fsSL https://opencode.ai/install.sh | bash

Verifiera installationen:

opencode --version

Du bör se versionsnumret. Från och med March 2026 är den senaste stabila utgåvan tillgänglig på OpenCode GitHub repository.

Skapa projektkatalogen

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

Starta OpenCode för första gången

opencode

Detta öppnar OpenCode's TUI (Terminal User Interface) — ett interaktivt gränssnitt i helskärm byggt med Bubble Tea. Du kommer att se en chatt-input längst ner och en konversationsruta i huvudområdet.

Välj en modell

Vid första start kommer OpenCode be dig välja en modell. Du har tre vägar:

Gratis (Zen-modeller): Skriv /models och välj en av de gratis Zen-modellerna. För denna guide fungerar Grok Code Fast 1 eller GLM 4.7 bra. Dessa är gratis och kräver ingen API-nyckel.

Lokalt (Ollama): Om du har Ollama installerat kommer OpenCode att upptäcka det automatiskt. Den rekommenderade modellen för Ollama är glm-4.7:cloud.

Betald (ta med din egen nyckel): Skriv /connect för att länka din Anthropic, OpenAI eller Google API-nyckel. Nycklar lagras lokalt i ~/.local/share/opencode/auth.json.

För denna guide fungerar vilken modell som helst. Modeller med högre kapacitet (Claude Sonnet 4.6, GPT-5.4) ger bättre resultat på komplexa uppgifter, men de gratis Zen-modellerna hanterar allt vi bygger här.

Fas 2: Skapa projektstrukturen med Build-läge (4 minuter)

OpenCode startar i Build mode som standard. Build mode ger AI-agenten full åtkomst till att skapa filer, redigera kod och köra kommandon. Detta är vad vi vill ha för projektstrukturen.

Din första prompt

Skriv detta 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 kommer att:

1. Skapa en tsconfig.json
2. Installera dependencies med npm install
3. Skapa src/index.ts med Express server-inställningar
4. Uppdatera package.json med startskript

Titta på TUI — du kommer se agenten köra terminalkommandon, skapa filer och förklara vad den gör vid varje steg. Detta är inte kodgenerering i ett vakuum; OpenCode har full åtkomst till ditt filsystem och din terminal.

Verifiera att det fungerar

När OpenCode är klar, säg till den:

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

OpenCode kommer att köra npx nodemon src/index.ts och bekräfta att servern lyssnar. Du bör se utdata som Server running on http://localhost:3000.

Vad hände precis (Funktion: Build Mode)

Build mode är OpenCode's standardagent. Den har åtkomst till alla verktyg: fil-läsning/skrivning, terminalexekvering och kodredigering. Enligt OpenCode-dokumentationen kan du se den som en AI-parprogrammerare med full åtkomst till din utvecklingsmiljö.

Fas 3: Skapa datamodellen och databasen (4 minuter)

Designa schemat

Skriv denna 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 kommer att generera den fullständiga databasmodulen. Var uppmärksam på hur den hanterar FTS5 (Full-Text Search 5)-inställningen — detta är en SQLite-funktion som kommer att driva vår sökfunktion senare.

Initiera databasen vid serverstart

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

Skapa opencode.json konfigurationen

Detta är ett bra tillfälle att introducera projektkonfiguration. Skapa en fil genom att säga till 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."

Detta skapar projektkonfigurationsfilen som OpenCode läser vid start. Den ger AI:n bestående kontext om ditt projekt — kodstandarder, arkitekturbeslut och begränsningar — så att du inte behöver upprepa dem i varje prompt.

Fas 4: Bygga REST API-slutpunkter (5 minuter)

Generera rutter

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 }

Registrera rutter

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

Testa 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 kommer att köra dessa kommandon i din terminal och visa dig svaren. Det är här verktyget glänser — du lämnar aldrig terminalen, och AI:n verifierar sitt eget arbete.

Fas 5: Lägga till sökning med FTS5 (4 minuter)

Introducera Plan Mode

Innan vi bygger sökning, låt oss använda Plan mode för att tänka igenom implementeringen. Byt läge:

/plan

Nu är du i Plan mode. AI:n kan läsa din kod och analysera den men kan inte ändra några filer. Detta är användbart för att planera innan man gör ändringar.

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 kommer att granska din kod, skriva en plan i .opencode/plans/ och förklara sin strategi utan att röra några filer. Läs planen, justera vid behov, och byt sedan tillbaka:

/build

Implementera sökning

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.

Testa sökning

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

Vad hände precis (Funktion: Plan Mode)

Plan/Build-arbetsflödet är hur erfarna utvecklare använder OpenCode för komplexa uppgifter. Planera först, granska strategin, bygg sedan. Planfilerna sparas i .opencode/plans/ och kan refereras senare av Build-agenten. Detta förhindrar att AI:n fattar stora strukturella beslut i farten.

Fas 6: Implementera taggsystemet (4 minuter)

Skapa tagg-slutpunkter

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.

Testa tagg-flödet

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.

Fas 7: Bygga en enkel frontend (5 minuter)

Generera 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 kommer att generera den kompletta frontenden — HTML-struktur, CSS-styling och JavaScript för API-interaktioner — i ett svep. Fördelen med att bygga detta i terminalen med en AI-agent är att den omedelbart kan testa om frontenden ansluter till API:et.

Testa hela 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.

Fas 8: Lägga till tester med en anpassad agent (5 minuter)

Skapa en anpassad testagent

Det är här OpenCode's funktion för custom agents kommer in. Istället för att använda den generiska Build-agenten för testning kommer vi att skapa en specialiserad sådan.

Lägg till detta 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"]
    }
  }
}

Byt nu till testagenten:

/agent test

Generera 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.

Kör testerna

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

Vad hände precis (Funktion: Custom Agents)

Custom agents låter dig skapa fokuserade personligheter med specifika instruktioner och verktygsåtkomst. Testagenten vi skapade kan bara läsa filer, skriva testfiler och köra terminalkommandon — den kan inte ändra källkoden. Denna begränsning förhindrar det vanliga problemet att AI "lagar" din källkod när tester misslyckas istället för att laga testerna.

Du kan skapa agenter för vilket specialiserat arbetsflöde som helst: kodgranskning, dokumentation, databasmigreeringar, DevOps-skript. OpenCode agents dokumentation har fler exempel.

Bonus: Ansluta en MCP-server för utökad funktionalitet

Om du vill utöka din bokmärkshanterare kan du ansluta externa verktyg via MCP (Model Context Protocol) servrar.

Exempel: Lägga till en Link Preview MCP-server

Tänk dig att du vill att OpenCode automatiskt ska hämta metadata (titel, beskrivning, favicon) från URL:er när du skapar bokmärken. Du kan ansluta en MCP-server som gör HTTP-fetching:

Lägg till detta i din opencode.json:

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

Nu har OpenCode ett nytt verktyg tillgängligt: det kan hämta URL-metadata som en del av sitt arbetsflöde. När du ber den att "add a bookmark for https://example.com and auto-fill the title and description" kommer den att använda MCP-servern för att hämta den datan.

Remote MCP-servrar

För molntjänster, använd fjärrstyrda MCP-servrar med automatisk OAuth-hantering:

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

OpenCode upptäcker 401-svar och initierar OAuth-flödet automatiskt om servern stöder Dynamic Client Registration.

Bonus: Använda OpenCode i CI/CD

OpenCode har ett CLI mode som körs utan TUI — perfekt för automatisering. Du kan använda det i GitHub Actions eller vilken CI-pipeline som helst:

# Kör en enskild prompt och avsluta
opencode -p "Review the changes in the last commit for security issues" --no-tui

# Använd en specifik modell
opencode -m "claude-sonnet-4-6" -p "Generate a changelog entry for this release" --no-tui

För vår bokmärkshanterare kan du lägga till ett CI-steg som kör OpenCode för att granska PR:er automatiskt. OpenCode GitHub integrationen erbjuder en mer strömlinjeformad version av detta arbetsflöde.

Den kompletta projektstrukturen

Efter att ha följt denna guide bör ditt projekt se ut så här:

bookmark-manager/
  opencode.json          # OpenCode projektkonfig + custom agents + MCP
  package.json
  tsconfig.json
  src/
    index.ts             # Express server entry point
    db.ts                # SQLite databasmodul med FTS5
    routes/
      bookmarks.ts       # CRUD + search slutpunkter
      tags.ts            # Tagg-hanteringsslutpunkter
  public/
    index.html           # Single-page frontend
  tests/
    bookmarks.test.ts    # API test-svit
  data/
    bookmarks.db         # SQLite databas (gitignored)
  .opencode/
    plans/               # Planer från Plan mode-sessioner

Vad du har lärt dig

Genom att bygga ett riktigt projekt har du övat på dessa OpenCode-förmågor:

Den största skillnaden mellan OpenCode och andra AI-kodningsverktyg är att det är helt open source, körs i din terminal och inte lagrar din kod eller kontextdata. Du kontrollerar modellerna, datan stannar lokalt, och gemenskapen med 800+ bidragsgivare gör att det utvecklas snabbt.

För team som använder flera AI-verktyg fungerar OpenCode bra som det terminalbaserade komplementet till IDE-assistenter. På ZBuild använder vi det ofta tillsammans med editor-baserade verktyg för olika delar av utvecklingsflödet.

Nästa steg

Nu när du har en fungerande bokmärkshanterare och en solid förståelse för OpenCode, här är några riktningar att utforska:

1. Lägg till autentisering — Använd Build-agenten för att lägga till JWT-baserad auth med användarkonton
2. Driftsätt i produktion — Be OpenCode generera en Dockerfile och driftsätta till Fly.io eller Railway
3. Bygg ett webbläsartillägg — Skapa ett Chrome-tillägg som lägger till bokmärken via API:et
4. Utforska fler Zen-modeller — Try Big Pickle, MiniMax M2.1, eller kör en lokal modell via Ollama
5. Skapa fler anpassade agenter — En "refactor"-agent, en "docs"-agent eller en "security audit"-agent

OpenCode dokumentationen och awesome-opencode repository har fler plugins, teman och gemenskapskonfigurationer att utforska.

Källor

• 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