Erstellen Sie einen Full-Stack Bookmark Manager mit OpenCode in 30 Minuten (Schritt-für-Schritt)

Was wir bauen

Vergessen Sie Funktionslisten. Der beste Weg, ein Tool zu erlernen, besteht darin, etwas damit zu bauen.

In diesem Tutorial verwenden Sie OpenCode — den Open-Source AI coding agent mit über 120K GitHub-Sternen — um einen kompletten Bookmark-Manager von Grund auf zu bauen. Die App wird folgendes haben:

• Eine REST API mit Express.js und TypeScript
• Eine SQLite-Datenbank mit Full-Text Search
• Ein Tag-System zur Organisation von Lesezeichen
• Ein einfaches, aber funktionales Frontend
• Unit-Tests

Jede OpenCode-Funktion wird genau dann eingeführt, wenn Sie sie benötigen — nicht in einem abstrakten Funktionsabschnitt. Am Ende werden Sie wissen, wie Sie OpenCode installieren, Modelle konfigurieren, Build- und Plan-Modi verwenden, MCP-Server einrichten und benutzerdefinierte Agenten erstellen — und das alles, weil Sie sie zum Bau eines echten Projekts verwendet haben.

Zeit: ~30 Minuten Voraussetzungen: Node.js 18+ installiert, ein Terminal (macOS, Linux oder WSL unter Windows) Kosten: Kostenlos (unter Verwendung von OpenCode Zen-Modellen)

Phase 1: Installation von OpenCode und Einrichten des Projekts (5 Minuten)

OpenCode installieren

Öffnen Sie Ihr Terminal und führen Sie einen dieser Befehle aus:

# Option 1: npm (empfohlen)
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

Überprüfen Sie die Installation:

opencode --version

Sie sollten die Versionsnummer sehen. Seit März 2026 ist das neueste stabile Release im OpenCode GitHub repository verfügbar.

Projektverzeichnis erstellen

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

OpenCode zum ersten Mal starten

opencode

Dies öffnet das TUI (Terminal User Interface) von OpenCode — eine interaktive Vollbild-Oberfläche, die mit Bubble Tea erstellt wurde. Sie sehen unten eine Chat-Eingabe und im Hauptbereich ein Konversationsfenster.

Ein Modell wählen

Beim ersten Start fordert OpenCode Sie auf, ein Modell auszuwählen. Sie haben drei Möglichkeiten:

Kostenlos (Zen-Modelle): Geben Sie /models ein und wählen Sie eines der kostenlosen Zen-Modelle. Für dieses Tutorial eignen sich Grok Code Fast 1 oder GLM 4.7 gut. Diese sind kostenlos und erfordern keinen API-Key.

Lokal (Ollama): Wenn Sie Ollama installiert haben, erkennt OpenCode dies automatisch. Das empfohlene Modell für Ollama ist glm-4.7:cloud.

Bezahlt (eigener Key): Geben Sie /connect ein, um Ihren Anthropic, OpenAI oder Google API-Key zu verknüpfen. Keys werden lokal in ~/.local/share/opencode/auth.json gespeichert.

Für dieses Tutorial funktioniert jedes Modell. Leistungsstärkere Modelle (Claude Sonnet 4.6, GPT-5.4) liefern bei komplexen Aufgaben bessere Ergebnisse, aber die kostenlosen Zen-Modelle bewältigen alles, was wir hier bauen.

Phase 2: Das Projekt-Gerüst mit dem Build-Modus erstellen (4 Minuten)

OpenCode startet standardmäßig im Build-Modus. Der Build-Modus gibt dem AI-Agenten vollen Zugriff, um Dateien zu erstellen, Code zu bearbeiten und Befehle auszuführen. Das ist genau das, was wir für das Grundgerüst benötigen.

Ihr erster Prompt

Geben Sie dies in den OpenCode-Chat ein:

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 wird:

1. Eine tsconfig.json erstellen
2. Abhängigkeiten mit npm install installieren
3. src/index.ts mit dem Express-Server-Setup erstellen
4. Die package.json mit Start-Scripts aktualisieren

Beobachten Sie das TUI — Sie werden sehen, wie der Agent Terminalbefehle ausführt, Dateien erstellt und bei jedem Schritt erklärt, was er tut. Dies ist keine Code-Generierung im luftleeren Raum; OpenCode hat vollen Zugriff auf Ihr Dateisystem und Terminal.

Überprüfen, ob es funktioniert

Sobald OpenCode fertig ist, sagen Sie ihm:

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

OpenCode wird npx nodemon src/index.ts ausführen und bestätigen, dass der Server zuhört. Sie sollten eine Ausgabe wie Server running on http://localhost:3000 sehen.

Was gerade passiert ist (Feature: Build-Modus)

Der Build-Modus ist der Standard-Agent von OpenCode. Er hat Zugriff auf alle Werkzeuge: Lesen/Schreiben von Dateien, Terminal-Ausführung und Code-Bearbeitung. Laut der OpenCode-Dokumentation können Sie ihn sich wie einen KI-Pair-Programmierer mit vollem Zugriff auf Ihre Entwicklungsumgebung vorstellen.

Phase 3: Erstellen des Datenmodells und der Datenbank (4 Minuten)

Entwurf des Schemas

Geben Sie diesen Prompt ein:

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 wird das vollständige Datenbankmodul generieren. Achten Sie darauf, wie es das FTS5-Setup (Full-Text Search 5) handhabt — dies ist eine SQLite-Funktion, die später unsere Suchfunktionalität antreiben wird.

Datenbank beim Serverstart initialisieren

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

Erstellen der opencode.json-Konfiguration

Dies ist ein guter Moment, um die Projektkonfiguration einzuführen. Erstellen Sie eine Datei, indem Sie OpenCode anweisen:

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

Dies erstellt die Projektkonfigurationsdatei, die OpenCode beim Start liest. Sie gibt der KI einen dauerhaften Kontext über Ihr Projekt — Coding-Standards, Architekturentscheidungen und Einschränkungen —, sodass Sie diese nicht in jedem Prompt wiederholen müssen.

Phase 4: Erstellen der REST-API-Endpunkte (5 Minuten)

Routen generieren

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 }

Routen registrieren

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

Testen mit 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 wird diese Befehle in Ihrem Terminal ausführen und Ihnen die Antworten zeigen. Hier glänzt das Tool — Sie verlassen nie das Terminal, und die KI verifiziert ihre eigene Arbeit.

Phase 5: Suche mit FTS5 hinzufügen (4 Minuten)

Einführung des Plan-Modus

Bevor wir die Suche bauen, nutzen wir den Plan-Modus, um die Implementierung zu durchdenken. Wechseln Sie den Modus:

/plan

Jetzt befinden Sie sich im Plan-Modus. Die KI kann Ihren Code lesen und analysieren, aber keine Dateien ändern. Dies ist nützlich für die Planung vor der Durchführung von Änderungen.

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 wird Ihren Code untersuchen, einen Plan nach .opencode/plans/ schreiben und seinen Ansatz erklären, ohne Dateien zu berühren. Lesen Sie den Plan, passen Sie ihn bei Bedarf an und wechseln Sie dann zurück:

/build

Suche implementieren

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.

Suche testen

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

Was gerade passiert ist (Feature: Plan-Modus)

Der Plan/Build-Workflow ist die Art und Weise, wie erfahrene Entwickler OpenCode bei komplexen Aufgaben einsetzen. Zuerst planen, den Ansatz überprüfen und dann bauen. Die Plandateien werden unter .opencode/plans/ gespeichert und können später referenziert werden durch den Build-Agenten. Dies verhindert, dass die KI spontan große strukturelle Entscheidungen trifft.

Phase 6: Implementierung des Tag-Systems (4 Minuten)

Tag-Endpunkte erstellen

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.

Tag-Ablauf testen

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.

Phase 7: Erstellen eines einfachen Frontends (5 Minuten)

Frontend generieren

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 wird das komplette Frontend — HTML-Struktur, CSS-Styling und JavaScript für API-Interaktionen — in einem Durchgang generieren. Der Vorteil, dies im Terminal mit einem KI-Agenten zu bauen, besteht darin, dass er sofort testen kann, ob das Frontend eine Verbindung zur API herstellt.

Den Full-Stack testen

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.

Phase 8: Tests mit einem benutzerdefinierten Agenten hinzufügen (5 Minuten)

Einen benutzerdefinierten Test-Agenten erstellen

Hier kommt das Feature der benutzerdefinierten Agenten von OpenCode ins Spiel. Anstatt den generischen Build-Agenten für Tests zu verwenden, erstellen wir einen spezialisierten.

Fügen Sie dies zu Ihrer opencode.json hinzu:

{
  "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"]
    }
  }
}

Wechseln Sie nun zum Test-Agenten:

/agent test

Tests generieren

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.

Tests ausführen

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

Was gerade passiert ist (Feature: Benutzerdefinierte Agenten)

Benutzerdefinierte Agenten ermöglichen es Ihnen, fokussierte Personas mit spezifischen Anweisungen und Werkzeugzugriffen zu erstellen. Der von uns erstellte Test-Agent kann nur Dateien lesen, Testdateien schreiben und Terminalbefehle ausführen — er kann den Quellcode nicht ändern. Diese Einschränkung verhindert das häufige Problem, dass die KI Ihren Quellcode "korrigiert", wenn Tests fehlschlagen, anstatt die Tests zu korrigieren.

Sie können Agenten für jeden spezialisierten Workflow erstellen: Code-Review, Dokumentation, Datenbank-Migrationen, DevOps-Skripte. Die OpenCode Agenten-Dokumentation enthält weitere Beispiele.

Bonus: Anbindung eines MCP-Servers für erweiterte Funktionalität

Wenn Sie Ihren Bookmark-Manager erweitern möchten, können Sie externe Tools über MCP (Model Context Protocol) Server anbinden.

Beispiel: Hinzufügen eines Link-Preview-MCP-Servers

Stellen Sie sich vor, OpenCode soll beim Erstellen von Lesezeichen automatisch Metadaten (Titel, Beschreibung, Favicon) von URLs abrufen. Sie können einen MCP-Server anbinden, der HTTP-Abrufe durchführt:

Fügen Sie dies zu Ihrer opencode.json hinzu:

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

Nun hat OpenCode ein neues Werkzeug zur Verfügung: Es kann URL-Metadaten als Teil seines Workflows abrufen. Wenn Sie es bitten, "ein Lesezeichen für https://example.com hinzuzufügen und Titel und Beschreibung automatisch auszufüllen", wird es den MCP-Server verwenden, um diese Daten abzurufen.

Remote-MCP-Server

Verwenden Sie für Cloud-Dienste Remote-MCP-Server mit automatischer OAuth-Verarbeitung:

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

OpenCode erkennt 401-Antworten und leitet den OAuth-Flow automatisch ein, sofern der Server Dynamic Client Registration unterstützt.

Bonus: Verwendung von OpenCode in CI/CD

OpenCode verfügt über einen CLI-Modus, der ohne TUI läuft — perfekt für die Automatisierung. Sie können ihn in GitHub Actions oder jeder CI-Pipeline verwenden:

# Einen einzelnen Prompt ausführen und beenden
opencode -p "Review the changes in the last commit for security issues" --no-tui

# Ein spezifisches Modell verwenden
opencode -m "claude-sonnet-4-6" -p "Generate a changelog entry for this release" --no-tui

Für unseren Bookmark-Manager könnten Sie einen CI-Schritt hinzufügen, der OpenCode ausführt, um PRs automatisch zu prüfen. Die OpenCode GitHub Integration bietet eine optimierte Version dieses Workflows.

Die vollständige Projektstruktur

Nachdem Sie diesem Tutorial gefolgt sind, sollte Ihr Projekt wie folgt aussehen:

bookmark-manager/
  opencode.json          # OpenCode Projekt-Konfig + benutzerdefinierte Agenten + MCP
  package.json
  tsconfig.json
  src/
    index.ts             # Express-Server Einstiegspunkt
    db.ts                # SQLite Datenbankmodul mit FTS5
    routes/
      bookmarks.ts       # CRUD + Such-Endpunkte
      tags.ts            # Tag-Management Endpunkte
  public/
    index.html           # Single-Page Frontend
  tests/
    bookmarks.test.ts    # API Test-Suite
  data/
    bookmarks.db         # SQLite Datenbank (gitignored)
  .opencode/
    plans/               # Pläne aus Plan-Modus-Sitzungen

Was Sie gelernt haben

Durch den Bau eines echten Projekts haben Sie diese OpenCode-Funktionen kennengelernt:

Der Hauptunterschied zwischen OpenCode und anderen KI-Codierungstools besteht darin, dass es vollständig Open Source ist, in Ihrem Terminal läuft und Ihre Code- oder Kontextdaten nicht speichert. Sie kontrollieren die Modelle, die Daten bleiben lokal, und die Community von über 800 Mitwirkenden sorgt für eine schnelle Weiterentwicklung.

Für Teams, die mehrere KI-Tools verwenden, eignet sich OpenCode hervorragend als terminalbasierte Ergänzung zu IDE-Assistenten. Bei ZBuild verwenden wir es oft neben Editor-basierten Tools für verschiedene Teile des Entwicklungs-Workflows.

Nächste Schritte

Da Sie nun einen funktionierenden Bookmark-Manager und ein solides Verständnis von OpenCode haben, sind hier einige Richtungen zum Erkunden:

1. Authentifizierung hinzufügen — Verwenden Sie den Build-Agenten, um JWT-basierte Authentifizierung mit Benutzerkonten hinzuzufügen.
2. In Produktion gehen — Bitten Sie OpenCode, ein Dockerfile zu generieren und die App auf Fly.io oder Railway bereitzustellen.
3. Browser-Erweiterung bauen — Erstellen Sie eine Chrome-Erweiterung, die Lesezeichen über die API hinzufügt.
4. Mehr Zen-Modelle erkunden — Probieren Sie Big Pickle, MiniMax M2.1 aus oder lassen Sie ein lokales Modell über Ollama laufen.
5. Mehr benutzerdefinierte Agenten erstellen — Einen "Refactor"-Agenten, einen "Docs"-Agenten oder einen "Security Audit"-Agenten.

Die OpenCode-Dokumentation und das awesome-opencode Repository bieten weitere Plugins, Themes und Community-Konfigurationen zum Entdecken.

Quellen

• OpenCode — Offizielle Dokumentation
• OpenCode — GitHub Repository
• OpenCode — Zen Modelle
• OpenCode — Agenten Dokumentation
• OpenCode — MCP Server
• OpenCode — CLI Modus
• OpenCode — Konfiguration
• OpenCode — GitHub Integration
• Ollama — OpenCode Integration
• awesome-opencode — Community Ressourcen
• Composio — MCP mit OpenCode
• Computing for Geeks — Setup OpenCode AI