AI-arendusabiline võib pakkuda usutava paranduse, ilma et kontrolliks, mis koodi käivitamisel päriselt juhtub. Kui annad talle ligipääsu brauserile, vajalikule dokumentatsioonile ja projekti tegelikule ülesehitusele, saad paluda tal probleemi uurida ning paranduse tulemust kontrollida.
Siin muutub MCP kasulikuks. Veebiarenduses katavad kuus serverit mitu olulist tööetappi: Chrome DevTools, Playwright, Context7, GitHub, Figma ja Supabase. Milliseid neist kasutada, sõltub sinu igapäevasest tööst.
Uuendatud 17. oktoobril 2026.
Mis on MCP-server?
MCP ehk Model Context Protocol on avatud standard, mis ühendab AI-rakendused väliste tööriistade ja teabega. MCP-server pakub toiminguid, mida ühilduv AI-rakendus saab kasutada, näiteks dokumentatsiooni lugemiseks või brauseris toimuva uurimiseks. MCP tutvustus
Neid ühendusi nimetatakse sageli MCP-tööriistadeks. Täpsemalt võib üks server pakkuda mitut tööriista. Näiteks Chrome DevTools MCP-l on eraldi tööriistad konsooliteadete, võrgupäringute ja jõudlusandmete salvestamise jaoks. Chrome DevToolsi tööriistade loend
Kuus tööriista kiireks võrdluseks
| MCP-server | Milleks seda kasutada? |
|---|---|
| Chrome DevTools | Brauserivigade, renderdamise ja jõudluse uurimine. |
| Playwright | Vormide, navigeerimise ja terviklike kasutajateekondade kontrollimine. |
| Context7 | Kasutatavate teekide dokumentatsiooni leidmine. |
| GitHub | Repositooriumi, tööülesannete ja koodi ülevaatuste konteksti kaasamine. |
| Figma | Disaini struktuuri, muutujate ja komponentidega töötamine. |
| Supabase | Tegeliku andmebaasistruktuuri ja projekti andmetega töötamine. |
1. Chrome DevTools MCP: uuri, mis brauseris toimub
Google’i Chrome DevTools MCP annab agendile ligipääsu töötavale Chrome’i brauserile. Sellega saab uurida konsoolivigu ja võrgupäringuid, kontrollida lehe stiile, teha kuvatõmmiseid ning salvestada jõudlusjälgi. Sellest on abi, kui leht laadib aeglaselt, mõni päring ebaõnnestub või valmis vaade käitub ootamatult. Ametlik dokumentatsioon · Saadaolevad tööriistad
Kasutajaliidese arenduses on selle väärtus konkreetsed tähelepanekud. Saad paluda agendil vea esile kutsuda, selgitada, mida ta nägi, teha põhjendatud muudatuse ja korrata sama kontrolli.
Näidisülesanne:
Ava lokaalses arenduskeskkonnas tooteleht ja kutsu esile viivitus filtrite avamisel. Salvesta jõudlusjälg ning selgita enne paranduse pakkumist, milline tegevus viivitust põhjustab.
Google avalikustas serveri esimese eelversiooni 23. septembril 2025. Praeguseks kuulub server lahendusse Chrome DevTools for agents. Google’i teadaanne
Enne ja pärast parandust jõudlust mõõtes hoia testitingimused samad. Kohalik mõõtmine kirjeldab konkreetset katset ega näita automaatselt kõigi veebikülastajate kogemust.
2. Playwright MCP: kontrolli terviklikke kasutajateekondi
Microsofti Playwright MCP abil saab agent avada lehti, täita välju, vajutada nuppe ja uurida lehe olekut pärast tegevust. See kasutab lehe ligipääsetavuspuu struktureeritud tõmmiseid ning toetab Chromiumi, Firefoxi ja WebKiti põhiseid brauseriseadistusi. Ametlik repositoorium
See sobib registreerimise, otsingufiltrite, kontoseadete ja teiste mitmest sammust koosnevate tegevuste kontrollimiseks. Kirjelda ülesandes ka oodatavat käitumist, et agendil oleks konkreetne alus tulemuse hindamiseks.
Näidisülesanne:
Katseta registreerumist tühjade väljade, vigase e-posti aadressi ja korrektsete testandmetega. Kontrolli veateateid ning edukat tulemust ja too välja erinevused nõutud käitumisest.
Oluliste leidude põhjal tasub lisada püsivad regressioonitestid. Agendi edukalt läbitud kasutajateekond annab infot ühe katse kohta; salvestatud testiga saad sama käitumist kontrollida ka järgmiste muudatuste järel.
Chrome DevTools MCP või Playwright MCP?
Soovitan valida Chrome DevToolsi Chrome’i probleemide põhjalikumaks diagnoosimiseks ja Playwrighti kasutajateekondade uurimiseks eri brauserimootoritega. Nende võimalused kattuvad: mõlemaga saab lehel tegutseda ja brauserist infot koguda. Lähtu valikul konkreetsest ülesandest. Chrome’i tööriistad · Playwrighti võimalused
3. Context7: too teegi dokumentatsioon ülesande juurde
Context7 hangib AI-arendusabilisele teekide dokumentatsiooni ja koodinäiteid ning toetab versioonipõhist dokumentatsiooni. See on kasulik, kui teegi API on muutunud või agent peab enne lahenduse kirjutamist kontrollima, kuidas mõni võimalus töötab. Context7 dokumentatsioon
Vue, Nuxti, Reacti või TypeScripti projektis tasub ülesandes lähtuda paigaldatud sõltuvuste versioonidest. Palu agendil enne näite rakendamist kontrollida, millise versiooni dokumentatsiooni ta leidis.
Näidisülesanne:
Kontrolli projektis kasutatavat Nuxti versiooni. Leia Context7 abil sellele vastav dokumentatsioon andmete serveripoolse laadimise kohta ja võrdle praeguse lehe lahendust dokumentatsiooniga.
Context7 võimaldab määrata teegi ja versiooni, kuid dokumentatsiooni olemasolu ei taga iseenesest õiget tulemust. Kontrolli allikat, veendu, et projekt kompileerub, ja käivita testid. Kasutamine ja piirangud
4. GitHub MCP: anna agendile muudatuse taust
GitHubi ametlik MCP-server võimaldab lugeda repositooriume, tööülesandeid ehk issue’sid ja pull request’e ning uurida GitHub Actionsi töövoogude tulemusi. Lubatud tööriistade ja õiguste korral saab sellega ka muudatusi teha. Ametlik GitHubi MCP-server
Praktiline väärtus on muudatuse taust: nõuded, varasemad ülevaatuskommentaarid ja ebaõnnestunud kontrollid. Nii saab agent hinnata parandust koos selle eesmärgiga.
Näidisülesanne:
Loe seda tööülesannet, sellega seotud pull request’i ja ebaõnnestunud kontrolle. Selgita oodatavat käitumist ning leia väikseim muudatus, mis vea lahendaks.
Uurimiseks alusta kirjutuskaitstud ligipääsust ja vajalikest tööriistarühmadest. GitHub MCP toetab mõlemat piirangut, nii et koodi ülevaatuse saab seadistada just selleks vajalike võimalustega. Seadistamise juhend
5. Figma MCP: anna agendile disaini struktuur
Figma ametlik MCP-server annab agendile disainikonteksti, kuvatõmmised, muutujad ja komponentide info. Disainikonteksti koodiväljund kasutab vaikimisi Reacti ja Tailwindi, kuid ülesandes saab küsida ka teist raamistikku, sealhulgas Vue’d, ning suunata agenti olemasolevaid komponente kasutama. Figma tööriistad ja ülesannete näited
Sellest on abi olemasoleva disainisüsteemi rakendamisel. Anna ette õige disainivaade ja kirjelda, kust leiab projektis juba kasutatavad nupud, vormiväljad ja paigutuskomponendid.
Näidisülesanne:
Teosta see seadete vaade Vue 3-ga, kasutades meie olemasolevaid vormikomponente. Järgi disainimuutujaid ja elementide vahekaugusi ning too välja kasutusolukorrad, mille kohta disainis lahendus puudub.
Figma kaugserver toetab ka Figma sisu loomist ja muutmist. Disaini muutmine on praegu beetaversioonis, nõuab toetatud klienti ja muutmisõigust ning sõltub paketist ja kasutajalitsentsist. Väljaspool mustandeid kirjutamiseks on vaja Full-litsentsi. Disaini muutmine · Ligipääsu ülevaade
Vaata valmis kasutajaliides brauseris üle. Kontrolli, kuidas vaade eri ekraanidel kohandub ja kas seda saab kasutada klaviatuuriga.
6. Supabase MCP: ühenda kasutajaliides tegeliku andmebaasiga
Supabase’i kasutavas projektis saab selle MCP-serveriga uurida tabeleid, käivitada SQL-päringuid, töötada migratsioonidega, pärida logisid ja genereerida andmebaasiskeemi põhjal TypeScripti tüüpe. Nii saab agent lähtuda projektis päriselt olemasolevast struktuurist. Saadaolevad tööriistad · Võimaluste tutvustus
See on kasulik andmemahukate vaadete, näiteks töölaudade, kontolehtede ja haldusvormide loomisel. Skeem annab konkreetse lähtekoha väljade nimede, tüüpide ja seoste jaoks.
Näidisülesanne:
Uuri arendusprojekti klienditabeleid ja genereeri nende praegused TypeScripti tüübid. Võrdle neid selle vormiga ning too välja väljade ja tüüpide erinevused.
Piira ühendus vajaliku projektiga ja kasuta uurimiseks kirjutuskaitstud režiimi. Vaata migratsioonid arenduskeskkonnas üle enne nende rakendamist tootmiskeskkonnas. Supabase toetab projektipõhist ligipääsu, tööriistarühmade piiramist ja SQL-päringute käivitamist ainult lugemisõigusega kasutajana. Seadistamine ja ligipääs
Millistest MCP-serveritest alustada?
Igapäevaseks veebiarenduseks alustaksin Context7-st ja ühest brauseriühendusest. Nii saab agent leida vajaliku dokumentatsiooni ja uurida töötavat rakendust.
Lisa GitHub, kui sinu töö hõlmab tööülesandeid, koodi ülevaatusi ja CI tulemusi. Lisa Figma, kui teostad regulaarselt disaine. Lisa Supabase, kui rakendus seda kasutab ja ülesande jaoks on vaja andmebaasi konteksti.
Enne uue ühenduse lisamist vaata, mida sinu agent juba võimaldab. Playwrighti arendajad pakuvad ka käsureatööriista koos AI-agendi tööjuhistega (skills), mis võib nende sõnul kulutada vähem tokeneid. MCP on üks viis neid võimalusi agendile kättesaadavaks teha. Playwright CLI
Kasuta eespool viidatud ametlikke seadistusjuhendeid, sest ühenduse vorming ja toetatud võimalused sõltuvad kliendist. Seejärel anna agendile konkreetne ülesanne kontrollitava tulemusega: kutsu viga esile, näita tähelepanekuid, tee muudatus ja kontrolli tulemust.
Kõige kasulikum on seadistus, mis lahendab sinu töövoos mõne päris puudujäägi. Alusta korduvast probleemist ja lisa tööriist, mis aitab seda uurida.
Tahad AI oma veebilehel tööle panna?
Mudeli valimine on vaid üks osa toimivast lahendusest. Kui sinu ettevõte vajab klienditoe assistenti, sisutöövoogu või ühendust olemasoleva süsteemiga, aitan kavandada ja ehitada vajaliku kasutajaliidese, liidestused ning kontrollid.
Vaata AI-liidestusi veebilehtedele ja rakendustele
Seotud tööd ja näited
Näidisprojekt: AI-klienditugi
Näide vestlusrobotist, mis vastab ettevõtte enda sisu põhjal ja on ühendatud olemasolevate süsteemidega.
