Sestavte Full-Stack správce záložek s OpenCode za 30 minut (krok za krokem)

Co stavíme

Zapomeňte na seznamy funkcí. Nejlepší způsob, jak se naučit nástroj, je něco v něm postavit.

V tomto tutoriálu budete používat OpenCode — open-source AI coding agent se 120K+ GitHub hvězdami — k vytvoření kompletního správce záložek od nuly. Aplikace bude mít:

• REST API s Express.js a TypeScript
• SQLite databázi s full-text search
• Systém štítků pro organizaci záložek
• Jednoduchý, ale funkční frontend
• Unit tests

Každá funkce OpenCode bude představena přesně ve chvíli, kdy ji budete potřebovat — nikoliv v abstraktní sekci funkcí. Na konci budete vědět, jak nainstalovat OpenCode, konfigurovat modely, používat Build a Plan mody, nastavit MCP servery a vytvářet custom agents — a to vše proto, že jste je použili k vybudování skutečného projektu.

Čas: ~30 minut Předpoklady: Nainstalovaný Node.js 18+, terminál (macOS, Linux nebo WSL ve Windows) Cena: Zdarma (s použitím OpenCode Zen modelů)

Fáze 1: Instalace OpenCode a nastavení projektu (5 minut)

Instalace OpenCode

Otevřete terminál a spusťte jeden z těchto příkazů:

# Možnost 1: npm (doporučeno)
npm i -g opencode-ai@latest

# Možnost 2: Homebrew (macOS/Linux)
brew install sst/tap/opencode

# Možnost 3: Jednořádkový instalátor
curl -fsSL https://opencode.ai/install.sh | bash

Ověřte instalaci:

opencode --version

Měli byste vidět číslo verze. K březnu 2026 je nejnovější stabilní verze dostupná na OpenCode GitHub repository.

Vytvoření adresáře projektu

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

První spuštění OpenCode

opencode

Tím se otevře TUI (Terminal User Interface) OpenCode — celoobrazovkové interaktivní rozhraní postavené na Bubble Tea. Ve spodní části uvidíte vstup pro chat a v hlavní oblasti panel konverzace.

Výběr modelu

Při prvním spuštění vás OpenCode požádá o výběr modelu. Máte tři cesty:

Zdarma (Zen modely): Napište /models a vyberte jeden z free Zen models. Pro tento tutoriál dobře fungují Grok Code Fast 1 nebo GLM 4.7. Jsou zdarma a nevyžadují žádný API key.

Lokálně (Ollama): Pokud máte nainstalovanou Ollama, OpenCode ji automaticky detekuje. Doporučený model pro Ollama je glm-4.7:cloud.

Placené (vlastní klíč): Napište /connect pro propojení vašeho Anthropic, OpenAI nebo Google API key. Klíče jsou uloženy lokálně v ~/.local/share/opencode/auth.json.

Pro tento tutoriál funguje jakýkoliv model. Výkonnější modely (Claude Sonnet 4.6, GPT-5.4) budou produkovat lepší výsledky u složitých úkolů, ale bezplatné Zen modely zvládnou vše, co zde stavíme.

Fáze 2: Scaffolding projektu pomocí Build modu (4 minuty)

OpenCode se ve výchozím nastavení spouští v Build mode. Build mode dává AI agentovi plný přístup k vytváření souborů, úpravám kódu a spouštění příkazů. To je přesně to, co chceme pro scaffolding.

Váš první prompt

Napište toto do chatu OpenCode:

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

1. Vytvoření tsconfig.json
2. Instalaci závislostí pomocí npm install
3. Vytvoření src/index.ts s nastavením Express serveru
4. Aktualizaci package.json o spouštěcí skripty

Sledujte TUI — uvidíte, jak agent provádí terminálové příkazy, vytváří soubory a vysvětluje, co v každém kroku dělá. Nejedná se o generování kódu ve vakuu; OpenCode má plný přístup k vašemu filesystemu a terminálu.

Ověření funkčnosti

Jakmile OpenCode skončí, řekněte mu:

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

OpenCode spustí npx nodemon src/index.ts a potvrdí, že server naslouchá. Měli byste vidět výstup jako Server running on http://localhost:3000.

Co se právě stalo (Funkce: Build mode)

Build mode je výchozí agent OpenCode. Má přístup ke všem nástrojům: čtení/zápis souborů, provádění v terminálu a úprava kódu. Podle OpenCode dokumentace o něm můžete přemýšlet jako o AI párovém programátorovi s plným přístupem k vašemu vývojovému prostředí.

Fáze 3: Vytvoření datového modelu a databáze (4 minuty)

Návrh schématu

Zadejte tento 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 vygeneruje kompletní databázový modul. Všimněte si, jak si poradí s nastavením FTS5 (Full-Text Search 5) — to je funkce SQLite, která později pohání naše vyhledávání.

Inicializace databáze při startu serveru

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

Vytvoření konfigurace opencode.json

Toto je vhodná chvíle pro představení konfigurace projektu. Vytvořte soubor tím, že řeknete 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."

Tím se vytvoří konfigurační soubor projektu, který OpenCode čte při spuštění. Dává AI trvalý kontext o vašem projektu — standardy kódování, architektonická rozhodnutí a omezení — takže je nemusíte opakovat v každém promptu.

Fáze 4: Tvorba REST API endpointů (5 minut)

Generování rout

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 }

Registrace rout

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

Testování pomocí 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 tyto příkazy provede ve vašem terminálu a ukáže vám odpovědi. Právě zde nástroj září — nikdy neopustíte terminál a AI si ověřuje vlastní práci.

Fáze 5: Přidání vyhledávání pomocí FTS5 (4 minuty)

Představení Plan modu

Než začneme stavět vyhledávání, použijme Plan mode k promyšlení implementace. Přepněte mody:

/plan

Nyní jste v Plan mode. AI může číst váš kód a analyzovat jej, ale nemůže měnit žádné soubory. To je užitečné pro plánování před prováděním změn.

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 prozkoumá váš kód, zapíše plán do .opencode/plans/ a vysvětlí svůj přístup, aniž by se dotkl souborů. Přečtěte si plán, v případě potřeby jej upravte a poté se přepněte zpět:

/build

Implementace vyhledávání

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.

Testování vyhledávání

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

Co se právě stalo (Funkce: Plan mode)

Workflow Plan/Build je způsob, jakým zkušení vývojáři používají OpenCode u složitých úkolů. Nejdříve plánujte, zkontrolujte přístup a pak stavte. Soubory plánů se ukládají do .opencode/plans/ a mohou být později referovány build agentem. To zabraňuje AI dělat velká strukturální rozhodnutí za běhu.

Fáze 6: Implementace systému štítků (4 minuty)

Tvorba endpointů pro štítky

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.

Testování toku štítků

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.

Fáze 7: Tvorba jednoduchého frontendu (5 minut)

Generování frontendu

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 vygeneruje kompletní frontend — strukturu HTML, stylování CSS a JavaScript pro interakci s API — v jednom kroku. Výhodou stavění v terminálu s AI agentem je, že může okamžitě otestovat, zda se frontend připojuje k API.

Testování celého stacku

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.

Fáze 8: Přidání testů pomocí custom agent (5 minut)

Vytvoření vlastního testovacího agenta

Zde přichází na řadu funkce custom agents OpenCode. Místo použití obecného Build agenta pro testování si vytvoříme specializovaného.

Přidejte toto do vašeho 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"]
    }
  }
}

Nyní se přepněte na testovacího agenta:

/agent test

Generování testů

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.

Spuštění testů

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

Co se právě stalo (Funkce: Custom Agents)

Custom agents vám umožňují vytvářet zaměřené persony se specifickými instrukcemi a přístupem k nástrojům. Testovací agent, kterého jsme vytvořili, může pouze číst soubory, zapisovat testovací soubory a spouštět terminálové příkazy — nemůže upravovat zdrojový kód. Toto omezení zabraňuje běžnému problému, kdy AI "opravuje" váš zdrojový kód, když testy selžou, místo aby opravila testy.

Agenty můžete vytvořit pro jakýkoliv specializovaný workflow: code review, dokumentaci, databázové migrace, DevOps skripty. OpenCode dokumentace agentů obsahuje více příkladů.

Bonus: Připojení MCP serveru pro rozšířené funkce

Pokud chcete svého správce záložek rozšířit, můžete připojit externí nástroje přes MCP (Model Context Protocol) servery.

Příklad: Přidání Link Preview MCP serveru

Představte si, že chcete, aby OpenCode při vytváření záložek automaticky stahoval metadata (titulek, popis, favicon) z URL. Můžete připojit MCP server, který provádí HTTP stahování:

Přidejte toto do vašeho opencode.json:

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

Nyní má OpenCode k dispozici nový nástroj: může v rámci svého workflow stahovat metadata URL. Když ho požádáte, aby "přidal záložku pro https://example.com a automaticky vyplnil titulek a popis," použije k získání těchto dat MCP server.

Vzdálené MCP servery

Pro cloudové služby použijte vzdálené MCP servery s automatickým zpracováním OAuth:

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

OpenCode detekuje odpovědi 401 a automaticky zahájí OAuth tok, pokud server podporuje Dynamic Client Registration.

Bonus: Použití OpenCode v CI/CD

OpenCode má CLI mode, který běží bez TUI — ideální pro automatizaci. Můžete jej použít v GitHub Actions nebo jakékoliv CI pipeline:

# Spustit jeden prompt a skončit
opencode -p "Review the changes in the last commit for security issues" --no-tui

# Použít konkrétní model
opencode -m "claude-sonnet-4-6" -p "Generate a changelog entry for this release" --no-tui

Pro našeho správce záložek byste mohli přidat CI krok, který automaticky spouští OpenCode pro revizi PR. OpenCode GitHub integrace poskytuje efektivnější verzi tohoto workflow.

Kompletní struktura projektu

Po absolvování tohoto tutoriálu by váš projekt měl vypadat takto:

bookmark-manager/
  opencode.json          # OpenCode konfigurace projektu + custom agents + MCP
  package.json
  tsconfig.json
  src/
    index.ts             # Vstupní bod Express serveru
    db.ts                # Modul SQLite databáze s FTS5
    routes/
      bookmarks.ts       # CRUD + search endpointy
      tags.ts            # Endpointy pro správu štítků
  public/
    index.html           # Single-page frontend
  tests/
    bookmarks.test.ts    # API testovací suite
  data/
    bookmarks.db         # SQLite databáze (v gitignore)
  .opencode/
    plans/               # Plány ze sezení v Plan mode

Co jste se naučili

Budováním skutečného projektu jste si procvičili tyto schopnosti OpenCode:

Klíčový rozdíl mezi OpenCode a ostatními AI nástroji pro kódování je ten, že je zcela open source, běží ve vašem terminálu a neukládá váš kód ani kontextová data. Vy ovládáte modely, data zůstávají lokálně a komunita více než 800 přispěvatelů zajišťuje jeho rychlý vývoj.

Pro týmy používající více AI nástrojů funguje OpenCode skvěle jako terminálový doplněk k IDE asistentům. V ZBuild jej často používáme vedle nástrojů v editoru pro různé části vývojového workflow.

Další kroky

Nyní, když máte funkčního správce záložek a solidní znalosti OpenCode, zde jsou některé směry, které můžete prozkoumat:

1. Přidání autentizace — Použijte Build agenta k přidání JWT-based auth s uživatelskými účty
2. Nasazení do produkce — Požádejte OpenCode o vygenerování Dockerfile a nasazení na Fly.io nebo Railway
3. Vytvoření prohlížečového rozšíření — Vytvořte Chrome extension, které přidává záložky přes API
4. Prozkoumání dalších Zen modelů — Vyzkoušejte Big Pickle, MiniMax M2.1 nebo spusťte lokální model přes Ollama
5. Vytvoření více custom agents — Agent pro "refaktor", "dokumentaci" nebo "bezpečnostní audit"

OpenCode dokumentace a awesome-opencode repository obsahují další pluginy, témata a komunitní konfigurace k prozkoumání.

Zdroje

• OpenCode — Oficiální dokumentace
• OpenCode — GitHub Repository
• OpenCode — Zen modely
• OpenCode — Dokumentace agentů
• OpenCode — MCP servery
• OpenCode — CLI mode
• OpenCode — Konfigurace
• OpenCode — GitHub integrace
• Ollama — Integrace OpenCode
• awesome-opencode — Komunitní zdroje
• Composio — MCP s OpenCode
• Computing for Geeks — Setup OpenCode AI