Alati¶

Pregled alata koje koristimo u AI-assisted development workflowu.

Claude Code¶

Claude Code je Anthropic-ov CLI alat za interaktivni rad sa Claude AI modelima direktno iz terminala.

Osnovno korištenje:

# Pokretanje interaktivne sesije
claude

# Jednokratno pitanje
claude "Objasni mi šta radi ova funkcija"

# Rad na specifičnom fajlu
claude "Dodaj validaciju u auth.ts"

Ključne mogućnosti:

Čitanje i editovanje fajlova u projektu
Pokretanje komandi u terminalu
Git operacije (commit, branch, PR)
Web pretraga i dohvaćanje dokumentacije
Rad sa MCP serverima za eksterne integracije

Claude Code Router (CCR)¶

CCR je lokalni proxy koji stoji između Claude Code-a i AI providera. Radi na vašem računaru i routira zahtjeve prema konfiguriranim pravilima.

Šta radi CCR:

Routing — prosljeđivanje zahtjeva na različite modele prema pravilima
Multi-provider — korištenje više providera (Anthropic, Open Router) kroz jedan interface
Model aliasi — definisanje custom aliasa za modele
Cost optimizacija — routing jeftinijih zadataka na jeftinije modele

# Instalacija
npm install -g @musistudio/claude-code-router

# Pokretanje servera
ccr start

# Interaktivna sesija
ccr code

Detalji konfiguracije: Quick Start

Open Router¶

Open Router je cloud API agregator koji omogućava pristup modelima različitih provajdera kroz jedan API.

Prednosti:

Pristup modelima koji nisu dostupni direktno (Kimi, GLM, Grok, itd.)
Unified API — isti format poziva za sve modele
Pay-per-use — plaćate samo ono što koristite
Fallback opcije — ako jedan model nije dostupan, automatski prebacuje na drugi

Korištenje sa CCR:

Open Router se konfiguriše kao provider u CCR config-u:

{
  "Providers": [
    {
      "name": "kimi-coding",
      "api_base_url": "https://api.kimi.com/coding/v1/messages",
      "api_key": "${KIMI_API_KEY}",
      "models": ["kimi-k2.5", "k2p5"],
      "transformer": { "use": ["Anthropic"] }
    }
  ]
}

Detaljnije o modelima: Modeli

CCR vs Open Router — Koja je razlika?¶

	Claude Code Router (CCR)	Open Router
Tip	Lokalni proxy (na vašem računaru)	Cloud servis (openrouter.ai)
Funkcija	Routira zahtjeve prema pravilima	Pruža pristup 300+ modela
Gdje radi	`localhost`	Internet
Odnos	Koristi Open Router kao jednog od provajdera	Nezavisan servis
Košta	Besplatan (open source)	Pay-per-use za API pozive

Ukratko: CCR je vaš lokalni dispečer koji odlučuje koji model će se pozvati za koji zadatak. Open Router je jedan od izvora modela koje CCR može koristiti — pored direktnog Anthropic API-ja.

┌─────────────┐     ┌──────────┐     ┌──────────────┐
│ Claude Code  │────▶│   CCR    │────▶│   Anthropic   │
│   (vi)       │     │ (proxy)  │     └──────────────┘
└─────────────┘     │          │     ┌──────────────┐
                     │          │────▶│ Open Router   │──▶ Kimi, GLM, Grok...
                     └──────────┘     └──────────────┘

Browser Automation¶

Claude Code može kontrolisati Chrome browser za testiranje i interakciju sa web stranicama.

Kako radi¶

AI koristi Chrome extension za:

Otvaranje stranica
Screenshot → analiza sadržaja
Klik na elemente
Čekanje na učitavanje
Ponovni screenshot → provjera rezultata

Praktični savjet¶

Ručno testiranje je brže

Browser automation je spor ali precizan — AI radi screenshot, analizira, klika, čeka, ponavlja. Za brzo testiranje, ručno kliknite sami. Browser automation koristite za:

Repetitivne testove koje AI treba ponoviti mnogo puta
Dokumentovanje koraka (snimanje GIF-ova)
Verifikaciju UI-a kad AI ne može drugačije provjeriti

Playwright alternativa¶

Za headless testiranje (bez otvorenog browsera), koristite Playwright:

# AI može pokrenuti Playwright testove direktno
npx playwright test

Prednosti Playwrighta:

Brži od browser automation-a
Radi headless (bez GUI-ja)
Pogodan za CI/CD pipeline

CLAUDE.md — Per-folder konfiguracija¶

Svaki folder u projektu može imati svoj CLAUDE.md fajl. Claude Code ga automatski čita kad radi u tom folderu.

Struktura¶

project/
├── CLAUDE.md              # Globalna pravila za cijeli projekat
├── frontend/
│   └── CLAUDE.md          # Pravila specifična za frontend
├── backend/
│   └── CLAUDE.md          # Pravila specifična za backend
└── shared/
    └── CLAUDE.md          # Pravila za shared module

Primjer sadržaja¶

# Frontend CLAUDE.md

- Koristimo Tailwind CSS za styling
- Sve komponente moraju imati TypeScript tipove
- Testovi u __tests__/ folderu pored komponente
- Koristi `useQuery` za data fetching, nikad `fetch` direktno

Korisno za¶

Multi-repo projekte — svaki repo ima svoja pravila
Module sa specifičnim konvencijama — backend vs frontend
Timove — različiti timovi mogu imati različita pravila
Tehnologije — specifične instrukcije za biblioteke

Team-wide CLAUDE.md

Commitujte CLAUDE.md u repo — svi članovi tima dobijaju ista pravila. AI se ponaša konzistentno za cijeli tim.

Context7¶

Context7 je MCP server za dohvaćanje up-to-date dokumentacije direktno u Claude Code sesiju.

Kako radi:

Resolve library ID — pronalazi tačan identifikator biblioteke
Query docs — dohvaća relevantnu dokumentaciju sa code snippetima

Primjer korištenja u Claude Code:

"Koristi Context7 da dohvatiš dokumentaciju za Next.js App Router"

Claude Code će automatski pozvati Context7 MCP alate i dobiti najnoviju dokumentaciju sa primjerima koda.

Zašto koristimo Context7:

Dokumentacija je uvijek ažurna (ne zavisi od training cutoff-a)
Code snippeti su provjereni i funkcionalni
Smanjuje hallucination pri radu sa bibliotekama

MCP Serveri¶

Model Context Protocol (MCP) serveri proširuju mogućnosti Claude Code-a sa eksternim integracijama.

Jira integracija¶

Omogućava rad sa Jira tiketima direktno iz Claude Code-a:

Pretraga i čitanje tiketa
Kreiranje novih tiketa
Ažuriranje statusa i komentara
Batch operacije

Bitbucket integracija¶

Rad sa Bitbucket repozitorijima:

Kloniranje repozitorija
API pozivi (GET, POST, PUT, DELETE)
Upravljanje pull requestima

Konfiguracija MCP servera¶

MCP serveri se konfiguriraju u Claude Code settings fajlu:

{
  "mcpServers": {
    "jira": {
      "command": "...",
      "args": ["..."],
      "env": {
        "JIRA_URL": "https://your-instance.atlassian.net",
        "JIRA_EMAIL": "your@email.com",
        "JIRA_API_TOKEN": "..."
      }
    }
  }
}

Sigurnost

API tokene čuvajte u environment varijablama ili secret manageru. Ne upisujte ih direktno u config fajlove koji se commituju.