Cursor – VS Code + AI
Posted on 04.09.2024 by Topi Santakivi
Cursor on AI-avusteinen IDE (Integrated Development Environment, integroitu kehitysympäristö), joka mahdollistaa koodin kirjoittamisen kielimallia hyödyntämällä. Se pohjautuu laajasti käytettyyn Visual Studio Codeen, mutta tarjoaa ominaisuuksia, joita kilpailijoilla (esim. Github Copilot) ei ole. Kielimalleista saatavilla on OpenAI:n eri GPT-versiot sekä Anthropicin Claude. Saatavilla oleva kielimallikaista riippuu käytössä olevasta tilauksesta (Hobby, Pro, Business). Lisäksi kielimalliksi voi oman API-keyn kanssa valita esimerkiksi Googlen tai Azure OpenAI Servicen tarjoamia vaihtoehtoja.
Cursorin ominaisuudet
Cursorin perusominaisuus on koodin ennustaminen ja ehdotusten tarjoaminen koodia kirjoitettaessa. Se voi ehdottaa myös usean rivin samanaikaista editointia (esim. asioiden uudelleennimeäminen).
Cursorissa on integroitu chat-ikkuna, johon voi liittää yksittäisiä tiedostoja tai kokonaisia projekteja ja esittää kysymyksiä koodista. Chat tarjoaa muutosehdotuksia, jotka voi katselmoida ja hyväksyä suoraan. Se toimii myös apuna bugien selvittämisessä ja mahdollistaa verkkohakujen tekemisen suoraan chatin kautta.
Cmd-K (Windowsissa Ctrl+K) on ominaisuus, jota esimerkiksi Github Copilotista ei löydy. Cmd-K -näppäinyhdistelmällä voi avata dialogin missä päin koodia tahansa ja antaa kehotteen, jonka jälkeen kielimalli joko kirjoittaa uutta koodia tai muokkaa olemassa olevaa. Cmd-K toimii myös Cursorin komentokehotteessa.

Kokemukset Cursorista
Koodin ennustaminen Cursorissa toimii ajoittain vaikuttavan tarkasti. Kun ehdotettu koodinpätkä on usean rivin mittainen ja mukailee olemassaolevan koodin tyyliä, saattaa tuntua siltä, että AI ”lukee ajatuksia”.
Automaattisten ehdotusten kääntöpuoli on, että jos ennustus ei sovi siihen, mitä on rakentamassa ja pohtimassa, jatkuvat koodiehdotukset alkavat ärsyttää. Tämän vuoksi esimerkiksi itselläni koodin ennustaminen on pois päältä.
Chat toimii usein hyvin, etenkin kun on kyse pienehköistä muutoksista. Siitä on ollut apua ongelmanratkaisussa, ja se on auttanut tekemään myös laajempia muutoksia.
Chatin kanssa pitää kuitenkin olla tarkkana, koska kontekstin laajentuessa kasvaa myös sen mahdollisuus, että AI lähtee tangentille ja ehdottaa jotain epäolennaista. Tämän vuoksi on tärkeää noudattaa perinteistä sääntöä: ymmärrä mitä jokainen versionhallintaan lisäämäsi koodirivi tekee ja miksi se on siellä. AI:n ratkaisut ovat välillä tarpeettoman monimutkaisia, vaikka yksinkertaisempikin ratkaisu riittäisi (ja olisi ylläpidettävämpi).
Eniten käyttämäni ominaisuus on Cmd-K. Se mahdollistaa yksityiskohtaisten asioiden koodaamisen tarkasti. Koska siinä on kyse useimmiten yksittäisestä funktiosta tai enintään tiedostosta, on helppo antaa ohjeet, joilla kielimalli osaa tuottaa juuri sitä, mitä haetaan.
Hyödyllisin Cmd-K on ollut silloin, kun pitää kirjoittaa moduulin, luokan, tai funktion perusrakenne, tai tehdä ei-triviaalia koodia sellaisilla kirjastoilla, joita ei ole itse paljoa käyttänyt. Kielimalli arvaa oikean metodin noin 80-90% ajasta oikein, ja valmiista koodista on helpompi tarkistaa, että se tekee, mitä oli tarkoituskin. Tämä tapahtuu murto-osassa siitä ajasta, joka aiemmin meni pelkkään dokumentaation etsimiseen, lukemiseen ja soveltamiseen.
Composer
Cursoriin on hiljattain lisätty myös Composer-ominaisuus. Sitä voisi kuvata Cmd-K:n laajennokseksi koko projektin tasolle. Composerilla on mahdollista luoda pelkällä promptaamisella isompia kokonaisuuksia, joissa luodaan useita tiedostoja tai editoidaan/refaktoroidaan olemassaolevia.
Oikean ongelman ratkaisua Composerilla

Minun tarvitsi hiljaittain kirjoittaa NextJS:n päälle tehty ratkaisu uusiksi perinteisemmällä NodeJS + React -kombolla. Kyseesä oli prototyyppi botista, joka juttelee kielimallille, hyödyntää tietokantaa datalähteenä, sekä toteuttaa OAuth-kirjautumisen Azurea vasten, käyttöliittymänä keskustelunäkymä ja muutama custom-komponentti erilaisten vastausten näyttämiseen.
Valmiin projektitemplaten ja manuaalisen koodaamisen sijaan päätin kokeilla, miten pitkälle homma onnistuisi Composerilla (mukaanlukien frontend-komponentit, jotka olisi voinut pitkälti kopioida NextJS-versiosta).
Tarve oli seuraavalle teknologiapinolle:
- Frontend React + Vite, backend NodeJS
- Kokonainen frontend-projekti ja erillinen backend-projekti + tarvittavat proxy-asetukset, joilla ajaa fronttia yhdessä portissa, backendia toisessa ja reititys näiden välillä
- Kielenä Typescript
- OAuth Azurea vasten
- Custom-komponentit
- Tietokantaintegraatio
- Azure OpenAI Service -integraatio
Lähdin liikkeelle kirjoittamalla pitkän tekstin Composeriin, mukana yllä oleva lista ja lisää yksityiskohtia. Kielimalli loi onnistuneesti kaksi npm-pohjaista projektia ja niihin kooditiedostoja sekä osan tarvittavista konfiguraatiotiedostoista. Ei kuitenkaan kaikkea. Osa kooditiedostoista puuttui, eikä esimerkiksi Typescriptin tarvitsemaa tsconfig.jsonia ollut missään.
Asiaan oli helppo ratkaisu. Koska Composerille voi antaa myös lisäohjeita, muutaman kerran iteroimalla tuli jo perusrunko kasaan. Tämä onnistui pyytämällä mm. ”you forgot to create Typescript config files. Please add that and other possibly missing ones” ja ”module X is not implemented, add that and other missing files too”.
Tämän jälkeen käynnistysyrityksiin. Riippuvuuksista puuttui osa, ja osasta oli väärät versiot, mutta muutamalla tarkentavalla kysymyksellä kaikki saatiin paikalleen. OAuth -autentikoinnin kanssa iteroidessa meni pisin aika, mutta se johtui siitä, että käyttäjä oli valinnut kirjaston, joka ei ollut käyttötapaukseen parhaiten soveltuva. Sen tajuttuani ja vaihdettuani kirjastoa homma lähti toimimaan nopeasti. Lopuksi vielä custom-komponentit Reactilla, jotka syntyivät prompteilla ja pienellä hiomisella (alla esimerkki yhden komponentin luomisesta).
Kokemukset Composerista
Lopulta koko harjoitukseen kului aikaa kolmisen tuntia ja koneella hyrräsi NodeJS + React -kombo toimivalla OAuth-kirjautumisella ja muine tarvittavine ominaisuuksineen. Samanlaista projektin perustamista + ensimmäisten ominaisuuksien toteutusta on tullut tehtyä käsin monta kertaa menneisyydessä, ja se on useimmiten ollut vähintään 3-5 päivän homma.
Ajallisesti säästö on siis selvää. Entä laadullisesti? Se riippuu käyttäjästä. AI noudattaa saamiaan ohjeita kirjaimellisesti, ja jos käyttäjä esimerkiksi pyytää käyttämään Reactin versiota 19 (josta oli kirjoitushetkellä vain Release Candidate -versio saatavilla), niin sitähän käytetään ja homman huomaa, kun asennus epäonnistuu. Tällaisista virheistä toki pääsee yli iteroimalla. Niitä ei voi kuitenkaan kokonaan välttää, koska harvemmin ensimmäisellä kerralla tietää täysin, mitä haluaa rakentaa.
Jos on huolimaton, ei katselmoi tarjottua koodia ja vain painelee hyväksymisnappia, AI lähtee myös herkästi laukalle ja luo koodia, joka ei todellakaan tee sitä, mitä pitäisi. Tämän huomaa varsinkin, kun kielimallin konteksti tulee täyteen ja se alkaa ’unohtaa’ asioita keskustelun alkupäästä. Pariin kertaan näin kävi, osittain piti muutoksia korjata käsinkin, ja osa korjautui itsestään, kun pyysi tarkemmin mitä tarkoitti.
Kokonaisarviona kokemus Composerista on kuitenkin positiivinen.
Yhteenveto
Tuottavuus. Mahdollisuudet säästää aikaa ja parantaa tuottavuutta ovat selvästi olemassa.
Laatu. Tuotetun koodin laatu riippuu käytetystä promptista. Jos kirjoitat: ’rakenna minulle NodeJS-palvelin’, saat jonkinlaisen palvelimen, mutta jos pyydät: ’Rakenna minulle NodeJS 20.17.0 -versiota käyttävä palvelin, joka käyttää Expressiä, body-parseria ja toteuttaa API-endpointit X, Y, Z, käyttää kirjastoja A, B, C ja D, sekä toteuttaa moduulit I, J ja K’, saat luultavasti lähempänä maalia olevan tuotoksen. AI:n tuottama koodi ei myöskään usein ole tuotantovalmista, vaan paljon yleisempää on se, että 80% tarvittavasta koodista tulee AI:lta ja asiantuntija lisää ja muokkaa siihen loput päälle.
Ymmärrä koodi, josta olet vastuussa. Vaikket kirjottaisi käsin kaikkea koodia, ymmärrä kaikki versionhallintaan menevä koodi. AI:lla ei ole kaikkea sitä kontekstia ja tietoa, joka sinulla tarvittavasta projektista ja sen riippuvuuksista on. Tästä voi seurata koodia, joka tekee osittain asioita, joita rakennettavassa sovelluksessa ei pitäisi tapahtua, joten huolellinen katselmointi on erittäin tärkeässä roolissa.
Soveltuvuus. Edellä olevaan liittyy myös se, mihin Cursor ja Composer soveltuu. Mitä monimutkaisempi ympäristö on kyseessä, ja mitä enemmän on ulkoisia riippuvuuksia ja hiljaista tietoa, sitä vaikeampi on tuottaa hyödyllistä koodia. Toisaalta mikäli tarvittavat riippuvuudet saa kuvattua AI:lle riittävällä tarkkuudella, onnistumisen todennäköisyys kasvaa selvästi. Lisäksi jokaisesta projektista löytyy aina asioita, jotka voi kuvata riittävän tarkasti.
Tietosuoja. Ennen kuin käytät näitä työkaluja, ota selvää voiko ympäristössäsi ja yrityksessäsi niitä käyttää. Cursorista saa päälle ’privacy moden’, jolloin Cursor itse ei koskaan käytä käyttäjän syötteitä tai ympäristön tietoja kielimallien kouluttamiseen.
Cursor käyttää taustalla OpenAI:n GPT-malleja sekä Anthropicin Claudea. Kumpikaan näistä yrityksistä ei käytä rajapintojen kautta tulevia kutsuja kielimallien kouluttamiseen, mutta tietoja saatetaan säilyttää tekoäly-yhtiöiden palvelimilla 30 päivän ajan auditointitarkoituksiin (esim. väärinkäytösten selvittäminen). Cursorin Business-versiossa käytössä on sekä OpenAI:lta että Anthropicilta ns. zero data retention -policy, eli mitään rajapintojen läpi kulkevaa dataa ei säilytetä näiden palveimilla.
Cursoria on hypetetty viime aikoina paljon. Vuoden 2024 alusta asti sitä käyttäneenä voin todeta, että vaikka todellisuus on hieman monimutkaisempi kuin kiiltävät esimerkit antavat ymmärtää, ei hype ole täysin tuulesta temmattua.