Preskoči na glavni sadržaj

Konačno rešenje za udobno korišćenje Claude Code-a u IDEA-i, veoma glatko.

Chenmo Wang ErAIClaude CodeIntelliJ IDEACC GUI2352 reči8 minuta

Ranije je jedan čitalac u komentarima preporučio IntelliJ IDEA dodatak koji se zove CC GUI.

Omogućava udobno korišćenje Claude Code-a u IDEA-i.

Pomislio sam, da li bih u CC GUI mogao da konfigurišem API ključ za DeepSeek V4, pa da ga udobno koristim.

Sudeći po onome što sam ranije objavio, korisnika idea-e je i dalje veoma mnogo, posebno u back-end razvoju, ne može se bez IntelliJ IDEA-e, pregled koda i debagovanje su i dalje zgodni.

Zato danas hajde da to probamo na praksi, korak po korak.

Adresa dodatka: https://plugins.jetbrains.com/plugin/29342-cc-gui-claude-or-codex-

Podržane funkcije su takođe veoma brojne, kao što su analiza slika, Skill komande, MCP serveri itd.

01,Kako se instalira i konfiguriše?

Instalacija nema prag.

U IDEA-i pritisnite Cmd+Shift+A da prikažete pretragu, unesite Plugins da uđete na tržište dodataka, pretražite "CC GUI" i videćete rezultat. Ja sam ga već instalirao.

Nakon instalacije ne treba ni da restartujete IDE. U desnoj bočnoj traci pojavi se ikona "CC GUI", klikom otvarate operativni panel.

Prilikom prvog otvaranja iskočiće podsetnik da prvo instalirate Claude Code SDK, što je osnovna zavisnost da bi Agent radio. Pratite vođenje, gotovo za pola minuta.

Kada je SDK na mestu, sledeće je konfiguracija modela. Otvorite interfejs za podešavanje provajdera:

Podržano je i direktno čitanje lokalnog postojećeg settings.json radi autentifikacije.

Drugim rečima, ako vam je Claude Code već uspešno radio, dovoljno je da pokazete putanju konfiguracije. Sa domaćim Coding Plan-om (GLM-5.1, Kimi 2.6 i sl.) takođe radi, ne morate obavezno da budete prijavljeni na Anthropic nalog.

Pored toga preko settings.json, podržano je i dodavanje provajdera.

Kliknite na [+ Dodaj], izaberite DeepSeek.

Listajte nadole, unesite deepseek-v4-pro u Sonnet i Opus, a deepseek-v4-flash u haiku.

Zatim kliknite na [Potvrdi dodavanje] i gotovo je.

U suštini, to vam prepiše datoteku setting.json.

Nakon konfiguracije, u statističkom panelu možete videti potrošnju tokena, koliko je potrošeno u svakom krugu razgovora i koliko ukupno — sve na jednom mestu.

MCP Agentu može da dodaje razne spoljne alate.

Pre svega preporučujem Chrome Devtools MCP — kada ga dodate, Agent može direktno da upravlja pretraživačem i radi automatizovano testiranje i debagovanje front-end stranica. Posebno za one bagove koji se moraju prijaviti da bi se reproducirali, ili probleme koji zahtevaju posebno okruženje pretraživača, sa njim je mnogo lakše.

Postoji i idea MCP, koji Claude Code-u omogućava da uspostavi vezu sa samom IntelliJ IDEA-om.

Pored toga, MCP vezan za git komitove vredi instalirati, automatski piše commit poruku, bez brige.

Ovo sam ranije radio pomoću ugrađenog Copilota u GitHub Desktop-u.

Zatim treba pomenuti Skill — to može da se shvati kao paket proširenja sposobnosti za Claude Code, dodavanjem različitih Skill-ova Agent-u otključavate odgovarajuće specijalizovane sposobnosti u određenoj oblasti.

Lično smatram da su dva obavezna: web-access i frontend-design.

web-access služi da uspostavi kanal ka pretraživaču, posebno je zgodan za pristup stranicama koje zahtevaju akreditive za prijavu ili scenarije gde treba simulirati ponašanje stvarnog korisnika.

frontend-design je generator front-end stranica, ubacite opis zahteva i dobijete HTML/CSS, ukupni osećaj dizajna znatno je bolji nego što sam očekivao, barem je mnogo brže nego pisati iz početka.

CC GUI je na GitHub-u već prikupio 3.1k zvezdica, a zajednica je veoma aktivna. Autor i brzo iterira, skoro svake nedelje izbacuje novu verziju, brzo popravlja bagove i dodaje funkcije.

https://github.com/zhukunpenglinyutong/idea-claude-code-gui/blob/main/README.zh-CN.md

02,Praksa 1: Optimizacija funkcije statistike čitanja članaka

Stvari su instalirane, pređimo odmah na posao. Prvi scenario uzimamo iz stvarnog posla paicoding-a.

paicoding je open source zajednica koju smo mi sami napravili.

Tutorijal za open source projekat PaiAgent biće sinhronizovan i na njoj.

Trenutna logika ažuriranja broja čitanja nalazi se u ArticleReadService.java, svaki put kada čitalac pogleda članak, direktno se šalje jedan SQL u bazu. Nameravam da to zamenim rešenjem u kojem Redis prvo primi, a zatim se vremenski sinhronizuje nazad u bazu, a izmene će prelaziti preko više datoteka: Service, Controller i vremenski zadatak.

U dijaloški prozor CC GUI unet sam: "Pomozi mi da optimizujem funkciju statistike čitanja članaka na projektu paicoding, prebaci je na Redis keš rešenje, prvo akumuliraj Redis brojač, a zatim ga vremenski sinhronizuj u bazu podataka".

Prva stvar koju je Agent uradio bila je da pređe preko postojeće strukture koda i uz to proveri zavisnosti projekta, potvrdivši da su konfiguracije vezane za Redis već odavno na mestu.

Locirao je usko grlo, a zatim dao kompletnu zamisao prerade.

Prvo se dira CountServiceImpl.incrArticleReadCount(), izbacuje se kod koji direktno ide u bazu i ostavlja samo logika akumulacije Redis brojača:

Zatim se dodaje vremenski zadatak sinhronizacije, koji na svakih 5 minuta iz Redis-a prenosi broj čitanja u bazu.

Treći korak je logika grupnog ažuriranja.

Poslednji korak, dodaju se jedinični testovi.

Rešenje je u redu, kliknuo sam na potvrdu i pustio Agent-a da radi.

Tok celog procesa ja sam samo na ključnim mestima donosio odluke, dok je Agent sve ostalo preuzeo — kako konkretno pisati kod, kako kreirati datoteke i kako povezati metode.

Pažljivo sam pregledao generisano Redis keš rešenje i u nekoliko detalja mislim da je zaista lepo urađeno:

Prvo, koristi Redis-ov incr za atomarno uvećanje, tako da pod opterećenjem neće doći do mešanja brojača.

@Override
public void incrArticleReadCount(Long authorUserId, Long articleId) {
    // Uklonjeno: articleDao.incrReadCount(articleId);
    // Ažurira samo Redis brojač
    RedisClient.pipelineAction()
            .add(CountConstants.ARTICLE_STATISTIC_INFO + articleId, CountConstants.READ_COUNT,
                    (connection, key, value) -> connection.hIncrBy(key, value, 1))
            .add(CountConstants.USER_STATISTIC_INFO + authorUserId, CountConstants.READ_COUNT,
                    (connection, key, value) -> connection.hIncrBy(key, value, 1))
            .execute();
}

Drugo, ključevi imaju vreme isteka, tako da brojači nepopularnih članaka ne ostaju zauvek u memoriji. Takođe, vremenska sinhronizacija radi u grupnom režimu, odjednom osvežava više zapisa, čime se smanjuje opterećenje veza sa bazom.

/**
 * Izvršava se na svakih 5 minuta, sinhronizuje broj čitanja članaka iz Redis-a u bazu
 */
@Scheduled(cron = "0 */5 * * * ?")
public void syncArticleReadCountToDb() {
    Long start = System.currentTimeMillis();
    log.info("Počinje sinhronizacija broja čitanja članaka u bazu");

    // Skenira sve kljuučeve statistike članaka
    Set<String> keys = scanKeys(CountConstants.ARTICLE_STATISTIC_INFO + "*");

    int batchSize = 100;
    int synced = 0;

    for (String key : keys) {
        try {
            // Izdvaja articleId
            Long articleId = Long.parseLong(key.replace(CountConstants.ARTICLE_STATISTIC_INFO, ""));

            // Uzima broj čitanja iz Redis-a
            Integer readCount = RedisClient.hGet(key, CountConstants.READ_COUNT, Integer.class);
            if (readCount != null && readCount > 0) {
                // Grupno ažurira bazu
                batchUpdateReadCount(articleId, readCount);
                synced++;

                if (synced % batchSize == 0) {
                    log.info("Sinhronizovan broj čitanja za {} članaka", synced);
                }
            }
        } catch (Exception e) {
            log.error("Sinhhronizacija broja čitanja nije uspela, ključ: {}", key, e);
        }
    }

    log.info("Sinhhronizacija broja čitanja završena, ukupno sinhronizovano {} članaka, vreme: {}ms", synced, System.currentTimeMillis() - start);
}

Agent je mislio na sve umesto mene.

Nakon izmena, neka odmah da probamo, proći će kroz Chrome Devtools MCP kroz test proces u pretraživaču.

03,Praksa 2: Refaktorisanje straničenja u sistemu komentara

Drugi slučaj je takođe iz paicoding-a, ovaj put se uzima straničenje komentara pod nož.

Efekat nakon izmene podseća na sekciju komentara zvaničnih WeChat naloga, smatram da je rezultat ipak prilično dobar.

Ako ima više od 1 odgovora, postoji funkcija proširivanja.

Nakon proširivanja podržava i markdown, korisničko iskustvo je po mom mišljenju veoma dobro.

U CommentReadService.java raniji pristup bio je sve-odjednom — prilikom pretraživanja komentara članka, komentare prvog nivoa i odgovore ispod njih izvlačio je sve odjednom. Sa malo podataka je u redu, ali čim komentara bude više, to mnogo troši mrežni saobraćaj, jer sam dodao precrtane komentare, a LLM odgovara mnogo toga.

Ako jedan popularan članak ima 100 komentara, a ispod svakog još 10 odgovora, odjednom se preuzima 1000 zapisa, a front-end renderovanje će jako zapinjati.

Moja zamisao je lenjo učitavanje: pri otvaranju stranice prvo prikazati samo komentare prvog nivoa, a kada korisnik ručno klikne na "pogledaj odgovore", tek tada asinhrono povući sadržaj drugog nivoa. Tako se ubrzava prvi prikaz, a iskustvo je tečnije.

Ova izmena zahteva diranje i front-a i back-a.

Back-end treba da se razdvoji logika pretraživanja i da se otvori novi interfejs specijalno za listu odgovora; front-end treba da doda događaje interakcije i prelazne animacije učitavanja. Ranije bih ja morao sa obe strane da koordiniram format interfejsa i mučio se pola dana.

Sada u CC GUI jednostavno kažem: "Pomozi mi da refaktorišem sistem komentara na projektu paicoding, prebaci ga na odvojeno učitavanje komentara prvog nivoa i odgovora drugog nivoa. Prvo pretraži komentare prvog nivoa uz straničenje, a klikom na proširi asinhrono učitaj odgovore".

Agent je prvo prešao preko povezanog koda.

Nakon pregleda, dao je kompletnu zamisao prerade:

Gledanje Agent-a kako menja back-end kod u IDEA-i ima jednu prirodnu prednost: gde izmeni, tu i vi možete da pratite i blagovremeno pregledate.

To ne mogu Agent-i u terminalu ili na Webu.

Konkretni koraci izvršenja su sledeći:

  1. Izmeni TopCommentDTO, dodaj polja childCommentCount (ukupan broj podkomentara) i hasMoreChild (da li ima još odgovora)
  2. U CommentReadService dodaj metodu getSubComments(Long topCommentId, PageParam page)
  3. CommentRestController otvara novi interfejs /comment/api/subcomments
  4. U front-end šablon dodaj logiku klika za proširenje i asinhronog učitavanja

Ovaj put obim posla je očigledno veći, ukupno je razbijeno na 9 podzadataka. I lista datoteka koje treba dirati jasna je:

ModulDatotekaOperacija
paicoding-apiTopCommentDTO.javaDodaj polja
paicoding-apiSubCommentListVO.javaNova
paicoding-serviceCommentReadService.javaDodaj metod interfejsa
paicoding-serviceCommentReadServiceImpl.javaIzmena + novi metodi
paicoding-serviceCommentDao.javaDodaj metod
paicoding-webCommentRestController.javaDodaj interfejs
paicoding-uicomment-item.htmlIzmeni šablon

Nakon završetka, pogledajmo stvarni efekat.

Prilično nabolje.

05,Princip rada CC GUI-a

Pošto smo ga iskoristili, pričajmo o principu i razjasnimo kako CC GUI zapravo uvodi Claude Code u IDEA-u.

Možda je prva reakcija nekih: da li je to samo terminal umotan u IDEA-u, u koji se kuca claude komanda?

Sigurno nije.

CC GUI uopšte ne poziva Claude Code CLI (to jest onu claude komandu koju kucate u terminalu), već direktno učitava Claude Agent SDK (@anthropic-ai/claude-agent-sdk) koji je zvanično objavio Anthropic.

Zato vas prilikom prvog otvaranja CC GUI-a traži da instalirate "Claude Code SDK". Ovaj SDK se instalira u direktorijum ~/.codemoss/dependencies/claude-sdk/node_modules/.

Čitava arhitektura komunikacije podeljena je u tri sloja, nacrtaću sliku pa će vam biti jasno:

Jezgro je srednji sloj daemon.js.

Nakon što se CC GUI pokrene, u pozadini spawnuje Node.js podproces koji pokreće skriptu daemon.js. Ovaj proces ostaje u pozadini, ne diže novi proces za svaki razgovor.

Pri pokretanju daemon.js unapred učita Claude Agent SDK u memoriju. Prednost je što se SDK inicijalizacija dešava samo jednom, a svaki sledeći zahtev ga direktno koristi, čime se štedi 2~5 sekundi hladnog starta. Zato se u CC GUI oseća da poruke idu brzo.

Komunikacija između Java strane (dodatak za IDEA-u) i daemon.js ide preko NDJSON protokola (Newline-Delimited JSON), pojednostavljeno — preko stdin/stdout cevi podprocesa razmenjuju JSON poruke, pri čemu svaka poruka zauzima jedan red.

Zahtev koji pošalje Java strana izgleda ovako:

{"id":"req-001","method":"claude.send","params":{"prompt":"Pomozi mi da optimizujem statistiku čitanja..."}}

Nakon što daemon.js obradi, strimovanjem upisuje odgovore u stdout:

{"id":"req-001","line":"[CONTENT_DELTA] \"Prvo da analiziram postojeći kod...\""}
{"id":"req-001","line":"[CONTENT_DELTA] \"Predlažem prebacivanje na Redis keš rešenje...\""}

Svaki odgovor nosi ID zahteva, tako da Java strana tačno može da usmeri odgovor u odgovarajući prozor razgovora. CC GUI podržava paralelno slanje više zahteva, što je omogućeno upravo ovim ID mehanizmom označavanja.

A šta je onda sa settings.json?

CC GUI direktno čita ~/.claude/settings.json, što je konfiguraciona datoteka Claude Code CLI-ja. Drugim rečima, ako ste ranije u terminalu konfigurisali Claude Code (bilo zvanični nalog ili API treće strane), CC GUI može da ga iskoristi bez ponovne konfiguracije.

To objašnjava i zašto u CC GUI podešavanju provajdera, nakon klika na "dodaj", u suštini samo prepiše settings.json.

Konfiguracija je deljena — CLI i dodatak koriste istu datoteku.

Isto važi i za MCP i Skills. daemon.js iz settings.json čita konfiguraciju MCP servera i prilikom izvršenja zahteva SDK-u prosleđuje listu dostupnih MCP alata. Zato Chrome Devtools MCP konfigurisan u CC GUI-u i onaj u terminalu Claude Code koriste isti skup.

I još jedan mali detalj: daemon.js na svakih 15 sekundi pošalje signal provere života, a uz to na svakih 10 sekundi proverava nadređeni proces (to jest IDEA-u). Ako se IDEA zatvori, daemon će sam da izađe, neće postati zombi proces koji zauzima resurse. Obrnuto, ako daemon neočekivano padne, Java strana ga automatski ponovo pokreće, najviše 3 puta.

04,ending

Suštinska vrednost dobrog alata je da naporno pretvori u prijatno.

Claude Code i Codex su sami po sebi veoma moćni, ali prirodno rade u terminalu.

Ono što CC GUI radi,

jeste da tu moć iz komandne linije preseli u IDE,

i pretvori je u prirodan deo svakodnevnog toka kodiranja.

[Dobar alat je produžetak ruke, a ne zamena za nju.]

Kombinacija CC GUI + Claude Code je za mene trenutno najglatkiji način razvoja back-end-a u IntelliJ IDEA-i.

Ovde moram da pohvalim — Claude Code je veoma otvoren, podržava i zvanični način ovlašćenja i način sa API ključem, tako da možemo konfigurisati razne modele, uključujući GLM-5.1, Kimi 2.6 i DeepSeek V4.

Vidimo se u sledećem~