Preskoči na glavni sadržaj

Bez petljanja oko komandne linije! CC GUI čini Claude Code u IDEA-u odmah upotrebljivim

Chenmo Wang ErAIClaude CodeIntelliJ IDEACC GUI1633 reči5 minuta

U komentarima glavnog naloga video sam preporuku druga za CC GUI — dodatak za IntelliJ IDEA koji je prošao zvaničnu JetBrains potvrdu, pa sam morao da vas prvo povedem na brzi probni krug i naiđemo na zamke.

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

Najnovija verzija je 0.3.2.

01. Instalacija i konfiguracija

Kako instalirati?

Vrlo jednostavno.

Otvorite IntelliJ IDEA, uđite u tržište dodataka (prečica Cmd+Shift+A, a zatim unesite Plugins), pretražite "CC GUI" — ovde ćete videti dva dodatka sa potpuno istim ikonama, ali različitim autorima.

Izaberite onaj sa najviše preuzimanja za instalaciju — već ima preko 20 hiljada preuzimanja.

Nakon instalacije nije potrebno restartovati IDE. Na desnoj alatnoj traci pojaviće se opcija "CC GUI" — kliknite na nju da otvorite panel.

Pri prvom korišćenju podsetiće nas da instaliramo Claude Code SDK — kliknite da odete na instalaciju. Ovaj SDK je osnova za rad Agent-a, instalira se za oko 20 sekundi.

Nakon instalacije, potrebno je konfigurisati provajdera modela. Kliknite na podešavanja provajdera:

Ovde možete direktno koristiti lokalni settings.json za autorizaciju. Ako ste ranije konfigurisali Claude Code, samo unesite putanju do konfiguracionog fajla. Tako, ako koristite domaće Coding Plan pakete, kao što su GLM-5, Kimi 2.5 i slični, možete ih koristiti direktno, bez prijave na zvanični Claude nalog.

Nakon konfiguracije, na panelu za statistiku možete videti potrošnju token-a, uključujući broj token-a po zahtevu i ukupnu potrošnju.

Na MCP panelu možete dodati MCP alate — to je istaknuta funkcija CC GUI-ja. MCP omogućava Agent-u da poziva spoljašnje alate i proširi granice sposobnosti.

Toplo preporučujem instalaciju Chrome Devtools MCP-a, koji omogućava Agent-u da direktno pozove Chrome pregledač i pomogne nam u front-end testiranju i debagovanju. Za neke bagove koji se reprodukuju samo u stanju prijavljenog naloga, ili za probleme koji zahtevaju određeno okruženje pregledača, ovo je super zgodno.

idea je dodatak koji sam preporučio na glavnom nalogu — omogućava Claude Code-u da se poveže sa IntelliJ IDEA.

Zatim tu je alatka za git commit, koja nam može pomoći u generisanju commit poruka.

Ja ranije stalno koristim Copilot sa GitHub desktop verzijom.

Sledi panel Skills, na koji treba obratiti pažnju. Skills je paket proširenja za Claude Code, ekvivalentan dodatku, koji Agentu omogućava da završi zadatke u određenim oblastima.

Od Must-have Skill-ova koje preporučujem su dva: web-access i frontend-design.

web-access nam pomaže da povežemo pregledač — kada su nam potrebne stranice koje zahtevaju dozvolu za prijavu ili kada treba simulirati korisničke operacije, ovaj Skill je veoma zgodan.

frontend-design nam pomaže u dizajnu front-end stranica — može da generiše HTML/CSS kod na osnovu opisa, a ukupni stil dizajna je po mom mišljenju prilično dobar, mnogo manje posla nego pisati od nule.

Ovaj dodatak već ima 2.2k star-a na GitHub-u, povratne informacije zajednice su vrlo dobre. Autor često ažurira, uglavnom sa novom verzijom svake nedelje, a popravke bagova i iteracije funkcija su pravovremene.

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

02. Praktični slučaj 1: Optimizacija funkcije statistike čitanja članaka

Nakon konfiguracije, prelazimo na praksu. Prvi slučaj je zasnovan na stvarnom kodu projekta PaiCoding.

PaiCoding je otvorena platforma tehničke zajednice, sa ključnim modulima kao što su članci, komentari i korisnici.

Relevantni kod se nalazi u ArticleReadService.java, gde se logika ažuriranja broja čitanja direktno obrađuje u bazi. Želim to da promenim u Redis keš + rešenje sa vremenski pokrenutom sinhronizacijom, što obuhvata izmene u više fajlova, uključujući sloj Service, sloj Controller i vremenske zadatke.

U CC GUI-ju kažem: "Pomozi mi da optimizujem funkciju statistike čitanja članaka u projektu PaiCoding, prebaci je na Redis keš rešenje — prvo akumuliraj Redis brojač, a zatim vremenski sinhronizuj u bazu".

Agent je prvo analizirao postojeću strukturu koda, a zatim pregledao zavisnosti projekta i potvrdio da Redis konfiguracija već postoji.

Otkriva problem i daje plan optimizacije.

Prvi korak, izmena CountServiceImpl.incrArticleReadCount(), uklanjanje direktnih operacija nad bazom, uz zadržavanje samo ažuriranja Redis brojača:

Drugi korak, dodavanje vremenski pokrenutog zadatka sinhronizacije — novog zadatka koji svakih 5 minuta sinhronizuje Redis brojač čitanja u bazu.

Treći korak, priprema za paketno ažuriranje.

Četvrti korak, jedinični testovi.

Nakon što potvrdim plan, ovlastim Agent-a da krene sa izvršenjem.

Tokom celog procesa samo potvrđujem ključne korake, dok je konkretno pisanje koda, kreiranje fajlova i metoda pozivanja Agent obradio za mene.

Konkretno, Redis keš rešenje koje je Agent generisao ima nekoliko istaknutih tačaka:

Prvo, koristi Redis-ovu komandu incr za atomsko akumuliranje, izbegavajući trke pri istovremenom pristupu.

@Override
public void incrArticleReadCount(Long authorUserId, Long articleId) {
    // Uklonjeno: articleDao.incrReadCount(articleId);
    // Samo ažurira 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, postavljeno je vreme isteka ključeva, čime se sprečava da hladni podaci zauvek zauzimaju memoriju. Treće, pri sinhronizaciji se koristi paketno ažuriranje, što smanjuje broj veza sa bazom.

/**
 * Izvršava se 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("Započinjem sinhronizaciju broja čitanja članaka u bazu");

    // Skeniranje svih ključeva statistike članaka
    Set<String> keys = scanKeys(CountConstants.ARTICLE_STATISTIC_INFO + "*");

    int batchSize = 100;
    int synced = 0;

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

            // Preuzimanje broja čitanja iz Redis-a
            Integer readCount = RedisClient.hGet(key, CountConstants.READ_COUNT, Integer.class);
            if (readCount != null && readCount > 0) {
                // Paketno ažuriranje baze
                batchUpdateReadCount(articleId, readCount);
                synced++;

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

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

Te detalje bih i sam možda propustio, ali ih je Agent sve uzeo u obzir.

Po završetku, neka ga direktno testira za nas — pozvaće Chrome Devtools MCP za testiranje.

03. Praktični slučaj 2: Refaktorisanje paginacionog upita sistema komentara

Drugi slučaj je i dalje zasnovan na projektu PaiCoding — refaktorisanje funkcije paginacionog upita sistema komentara.

Modul komentara PaiCoding-a nalazi se u CommentReadService.java, a trenutna implementacija ima problem: prilikom upita komentara članka, odjednom se izvlače i komentari prvog nivoa i odgovori drugog nivoa, što pri velikoj količini podataka postaje sporo. Na primer, članak sa 100 komentara, pri čemu svaki komentar ima 10 odgovora, zahteva čitanje 1000 zapisa — stranica se učitava veoma sporo.

Želim da pređem na rešenje odloženog učitavanja: prvo izdvojiti komentare prvog nivoa, a kada korisnik klikne "proširi odgovore", asinhrono učitati komentare drugog nivoa. Tako se prvi ekran učitava brzo, što korisniku prija.

Ali ovo refaktorisanje obuhvata i back-end i front-end izmene. Back-end mora promeniti logiku upita i dodati novi interfejs specijalno za odgovore; front-end mora promeniti interakciju i dodati događaj klika i animaciju učitavanja. Ranije bih za ovakvo refaktorisanje morao posebno da menjam front-end i back-end, usklađujem format interfejsa — dosta vremena.

Sada u CC GUI-ju jednostavno kažem: "Pomozi mi da refaktorišem sistem komentara projekta PaiCoding, tako da se komentari prvog nivoa i odgovori drugog nivoa učitavaju odvojeno. Prvo izdvoji paginaciju komentara prvog nivoa, a klikom na proširi asinhrono učitaj odgovore".

Agent je prvo analizirao postojeći kod.

Agent je dao plan refaktorisanja:

Pisanje koda u IntelliJ IDEA-i, posebno za back-end kod, je prednost jer u svakom trenutku možete pregledati.

To drugi alati ne mogu da zamene.

Evo i plana implementacije.

  1. Izmena TopCommentDTO - dodati childCommentCount (ukupan broj podkomentara) i hasMoreChild (da li ima više podkomentara)
  2. Izmena CommentReadService - nova metoda getSubComments(Long topCommentId, PageParam page)
  3. Izmena CommentRestController - novi interfejs /comment/api/subcomments
  4. Izmena front-enda - asinhrono učitavanje podkomentara pri kliku na proširi

Ovaj zadatak je obimniji, ukupno 9 zadataka. Lista fajlova koje treba izmeniti je takođe jasna na prvi pogled.

ModulFajlOperacija
paicoding-apiTopCommentDTO.javaDodavanje polja
paicoding-apiSubCommentListVO.javaKreiranje
paicoding-serviceCommentReadService.javaDodavanje metode interfejsa
paicoding-serviceCommentReadServiceImpl.javaIzmena+nova metoda
paicoding-serviceCommentDao.javaDodavanje metode
paicoding-webCommentRestController.javaDodavanje interfejsa
paicoding-uicomment-item.htmlIzmena šablona

Kada završi, da pogledamo stvarni efekat.

Ukupan efekat je prilično dobar.

04. ending

Vrednost alata je u tome da složene stvari učini jednostavnim.

Claude Code je sam po sebi moćan alat, ali se nalazi u terminalu. CC GUI gradi most koji omogućava sposobnostima Claude Code-a da neprimetno uđu u IDE i postanu deo našeg toka rada.

[Alat je produžetak ruke, a ne zamena za ruku.]

Kao programeri, treba da održimo otvoren stav, da prihvatimo ove nove alate i pronađemo tok rada koji nam najviše odgovara. Ne treba se držati starih pravila, ali ne treba ni slepo pratiti trendove, već prema stvarnim potrebama izabrati kombinaciju koja najviše povećava efikasnost.

CC GUI + Claude Code je kombinacija koju sam za sada pronašao kao dobru.

Vidimo se u sledećem.