--- title: "Cursor vs Copilot - AI w codziennej pracy" description: "Zobacz jak narzędzia AI mogą wspomóc rozwiązań client-side w codziennej pracy" publishDate: "2024-11-14T20:00:00.000Z" image: "~/assets/images/blog/thumbnails/aitooling.png" canonical: "https://opanuj.ai/blog/cursor-vs-copilot-ai-w-codziennej-pracy/" excerpt: "Modele językowe, usługi SaaS oraz edytory kodu oparte o AI wchodzą do mainstreamu." category: "Felieton" tags: ["openai","gpt-4o","claudesonnet","cursor","copilot"] author: "Przemek Smyrdek" type: "post" language: "pl" --- ## Narzędzia AI dla nowoczesnego frontend developera Współczesny frontend development nieustannie ewoluuje, a wraz z nim rośnie znaczenie narzędzi wspomagających programistów w ich codziennych zadaniach. Generatywna sztuczna inteligencja (Gen AI) stała się jednym z kluczowych filarów tej transformacji, wpływając na produktywność, sposób pisania kodu oraz podejście do rozwiązywania problemów. W tym wpisie przyjrzymy się temu, jakie możliwości oferują narzędzia AI, takie jak Copilot czy Cursor, i jakie mają znaczenie w kontekście nowoczesnego programowania. ## Kim jest "nowoczesny front-end developer"? W kontekście szybko zmieniających się technologii wizja "kompletnego front-end developera" stała się bardziej wymagająca niż kiedykolwiek. To nie tylko osoba, która sprawnie korzysta z frameworków i bibliotek, ale także rozumie szerszy kontekst swojej pracy. Kluczowe kompetencje obejmują: - **Znajomość narzędzi i technologii**: Pisanie wysokiej jakości kodu oraz efektywne korzystanie z frameworków i bibliotek. - **Rozumienie środowiska przeglądarek**: Uwzględnianie ich ograniczeń i optymalizacja aplikacji. - **Doświadczenie użytkownika (UX)**: Projektowanie aplikacji z myślą o potrzebach użytkownika końcowego. - **Produktywność**: Efektywne wykorzystanie narzędzi AI w celu automatyzacji powtarzalnych zadań, konsultacji z wirtualnym asystentem oraz przekraczania własnych limitów wiedzy. Aby zostać "nowoczesnym" front-end developerem nie wystarczą już tylko klasyczne umiejętności kodowania, ale również świadome korzystanie z narzędzi, które zwiększają produktywność i usprawniają procesy wokół nas. ## Jak AI wpływa na produktywność programistów? Mówi się, że AI odgrywa kluczową rolę w podnoszeniu produktywności poprzez automatyzację powtarzalnych zadań, generowanie kodu, tworzenie testów jednostkowych, czy dokumentacji. Pytanie brzmi, czy mamy na to jakiekolwiek dowody i czy AI faktycznie potrafi programować? ### Dane z benchmarków Aby odpowiedzieć na to pytanie, przyjrzyjmy się popularnym benchmarkom, które sprawdzają umiejętności LLMów w programowaniu. Zaledwie 3 lata temu skuteczność modelu GPT-3 w domenie programowania wołała o pomstę do nieba. InstructGPT od OpenAI był jednym z pierwszych sygnałów tego, że współpraca z AI faktycznie może mieć sens. Wciąż jednak daleko było do tego, by model generował kod w pełni funkcjonalny. Dzisiaj wszystko wygląda inaczej. Flagowe modele AI, takie jak Claude 3.5 Sonnet czy GPT-4o, osiągają imponujące wyniki w testach takich jak [HumanEval](https://paperswithcode.com/sota/code-generation-on-humaneval) (93,7% poprawnych odpowiedzi przy rozwiązywaniu zadań w Pythonie) czy [McEval](https://mceval.github.io/) (średnio 65% w kontekście technologii frontendowych takich jak HTML, TypeScript czy JavaScript). Przyszłość to większy nacisk na tzw. rozwiązania agentowe, a oceniać to będzie benchmark o nazwie [SWE-Bench](https://www.swebench.com/). Na dzisiaj AI radzi sobie z ok. połową zawartych w nim zadań, ale już wkrótce liczba ta pójdzie w górę. Wzrost skuteczności modeli językowych w popularnych benchmarkach wskazuje na to, że AI nie tylko "rozumie" kod, ale w najbliższych miesiącach co raz częściej będzie wspierać inżynierów w bardziej złożonych zadaniach, takich jak debugowanie czy optymalizacja wąskich gardeł wydajnościowych. ## Różnice między modelami AI Współpraca z AI wymaga od programistów świadomego wyboru narzędzi i ciągłej praktyki, która pozwoli im zrozumieć ich ograniczenia. Poniżej przedstawiamy modele, które obecnie można uznać za najlepsze w swoim segmencie, także w kontekście frontendu. ### Claude 3.5 Sonnet (Anthropic) Lider w benchmarkach programistycznych, szczególnie w Pythonie i zadaniach związanych z testami jednostkowymi. Model ten cieszy się wysoką popularnością dzięki swojej dokładności i wszechstronności, a także wsparciu dla wielu języków (tych ludzkich). Jakościowy partner nowoczesnego frontend developera. ### GPT-4o (OpenAI) Uniwersalne rozwiązanie, które sprawdza się w szerokim spektrum zadań, od generowania kodu po optymalizację istniejących projektów. Mimo nieco niższej skuteczności w benchmarkach frontendowych, oferuje elastyczność i dostępność. W kontekście programowania, zdecydowanie warta uwagi alternatywa do modelu Claude 3.5 Sonnet. ### o1-mini oraz o1-preview (OpenAI) To nowa rodzina modeli, która charakteryzuje się jeszcze lepszą jakością odpowiedzi i bardziej złożonym wnioskowaniem. Niestety, pierwsza generacja tych rozwiązań to czas interakcji czasami dochodzący do jeden lub dwóch minut, co w kontekście codziennej pracy programisty może być bardziej niż irytujące. Wciąż, jeśli masz problem, który możesz dokładnie opisać, a następnie poczekać kilkadziesiąt sekund na odpowiedź, warto z tymi modelami eksperymentować. ### Tańsze alternatywy (np. Qwen2.5-Coder) Modele takie jak Qwen2.5-Coder czy Deep Seek V2.5 oferują konkurencyjne umiejętności programowania w niższej cenie, co czyni je interesującą opcją dla użytkowników z mniejszym budżetem. W ich przypadku musimy jednak ograniczyć się do komunikacji w języku angielskim, co dla wielu początkujących programistów może być minusem. ## Wrappery modeli AI W świecie generatywnej sztucznej inteligencji popularność zyskują również narzędzia takie jak v0 i Bolt, które kierowane są do osób chcących szybko prototypować aplikacje i komponenty interfejsu użytkownika. Są to narzędzia typu low-code/no-code, które obiecują uproszczenie pracy z tworzeniem UI, a nawet całych aplikacji webowych. Poniżej przyjrzymy się szczegółom ich funkcjonalności oraz przypadkom użycia. ### v0: Tworzenie interfejsów użytkownika [v0](https://v0.dev/), rozwijane przez firmę Vercel, koncentruje się na automatyzacji tworzenia frontendowych komponentów i interfejsów użytkownika. Narzędzie wykorzystuje modele językowe do przekształcania zapytań w języku naturalnym w interaktywne elementy aplikacji (_Blocks_). Główne cechy: - Szybkie prototypowanie: Możliwość tworzenia podstawowych komponentów bez kodowania. - Interaktywny sandbox: Środowisko, które pozwala testować generowane komponenty w czasie rzeczywistym. - Wsparcie dla popularnych frameworków: Narzędzie jest głęboko zintegrowane z ekosystemem Vercel, wspierając technologie takie jak React, Next.js i Svelte. - Darmowy plan: Umożliwia wymianę ograniczonej liczby wiadomości z modelem bez rozliczania za ilość tokenów, co jest ciekawą alternatywą w porównaniu do standardowych modeli billingowych. Zalety: - Idealne do szybkiej wizualizacji pomysłów, szczególnie w sytuacjach, gdy brakuje designera. - Umożliwia iteracyjne podejście do projektowania interfejsów. Wady: - Brak pełnego systemu plików ogranicza możliwość tworzenia większych projektów. - Rozmowy są wykorzystywane do trenowania modeli, chyba że korzystamy z droższej wersji Enterprise. - Ograniczenie do ekosystemu React i Next.js może być problematyczne dla użytkowników Angulara czy mniej popularnych frameworków takich jak Lit czy Solid. Przykładowe zastosowanie: Tworzenie prototypów interfejsu użytkownika dla nowej strony internetowej lub aplikacji, które można później rozwijać na własną rękę. ### Bolt: Full-stackowe prototypy całych aplikacji [Bolt](https://bolt.new/), opracowany przez StackBlitz, idzie krok dalej niż v0, umożliwiając tworzenie pełnoprawnych aplikacji full-stackowych. Narzędzie integruje frontend z backendem, oferując środowisko bardziej przypominające tradycyjne IDE. Główne cechy: - Tworzenie aplikacji full stack: Obsługuje zarówno warstwę frontendową, jak i backendową, pozwalając na komunikację pomiędzy warstwami. - Interaktywny edytor kodu: Zintegrowany system plików, możliwość instalowania zależności oraz przeprowadzania natychmiastowego deploymentu na platformy takie jak Netlify. - Dostępność open source: Kod źródłowy Bolta jest otwarty, co pozwala użytkownikom na podgląd i modyfikację implementacji. - Lokalny hosting: Możliwość pracy z własnym backendem LLMów oraz pełnej kontroli nad środowiskiem pracy. Zalety: - Elastyczność dzięki integracji backendu i frontendu. - Możliwość pracy w pełni lokalnie, co zwiększa bezpieczeństwo. - Dostęp do struktury plików oraz funkcjonalności podobnych do edytora VS Code. Wady: - Wyższa bariera wejścia w porównaniu do v0, co sprawia, że jest bardziej skierowany do technicznych użytkowników. - Wersja darmowa ma ograniczenia w liczbie wymienianych tokenów. Przykładowe zastosowanie: Prototypowanie małych aplikacji full-stack, które można natychmiast wdrożyć lub prezentować klientowi. ### Kiedy korzystać z v0 lub Bolta? - v0: Dla zespołów lub osób potrzebujących szybko przygotować wizualizację interfejsu lub komponentów, bez potrzeby wdrażania pełnej funkcjonalności aplikacji. - Bolt: Dla programistów i zespołów tworzących kompleksowe prototypy aplikacji, które wymagają backendu i frontendowej integracji. Oba narzędzia pokazują, że opakowanie surowego modelu językowego w dedykowany interfejs i niestandardowe prompty może dać początek niejednemu startupowi lub projektowi, na który wcześniej nie było czasu lub pieniędzy. ## Integracje z workflow programisty, czyli Cursor vs. Copilot Tym, na co liczy największa grupa pasjonatów AI, jest ścisła integracja modeli językowych ze środowiskami programistycznymi. W tej kategorii liderami są Cursor i Copilot, które porównamy poniżej. ### Cursor Cursor to fork edytora Visual Studio Code z funkcjami współpracy z AI. Cechuje się: - Obsługą wielu modeli, w tym przez usługę OpenRouter omawianą na naszym [kanale YouTube](https://youtu.be/IGFk8IuKdbU). - Możliwością podłączenia własnych kluczy API, co pozwala na większą kontrolę nad wydatkami. - Znakomitymi autorskimi rozwiązaniami takimi jak Cursor Tab i Cursor Composer, dzięki którym edycja kodu staje się jeszcze szybsza. ### Copilot Copilot, jako plugin, integruje się bezpośrednio z popularnymi edytorami kodu pokroju VS Code i rozwiązań JetBrains. Jego główne cechy to: - Łatwość instalacji i konfiguracji (rozwiązanie plug-and-play). - Wsparcie dla funkcji takich jak rules for AI, które pozwalają na precyzyjne definiowanie zasad generowania i testowania kodu. - Integracje z modelami OpenAI, Google oraz Anthropic w ramach jednego abonamentu (10$ / miesiąc). ### Co wybrać? Wybór pomiędzy Cursorem a Copilotem w dużej mierze sprowadza się do filozofii pracy. Cursor to rozwiązanie, za którym stoi mały startup z Doliny Krzemowej. Wdrażają oni swoje pomysły w szalonym tempie, ale część z nich nie jest w pełni stabilna od momentu premiery. Pracując z Cursorem masz gwarancję bycia "na krawędzi" tego, co oferuje AI w codziennej pracy programisty, ale czasami może to być nieco frustrujące. Copilot to z kolei bardziej wyważone rozwiązanie, ale o innowacjach względem konkurencji raczej nie ma mowy. Chociaż integracja Copilota z VS Code przebiega bezproblemowo, to w kontekście oferowanych możliwości nie spodziewajmy się przeskoku nad tym, co dzisiaj oferuje Cursor. Po ostatniej aktualizacji, rywalizacja stała się bardziej wyrównana, ale Cursor nadal oferuje nieco więcej możliwości, a Copilot co najwyżej naśladuje wybrane pomysły. Przede wszystkim jednak w Copilocie znajdziecie na dzisiaj modele dwóch firm (OpenAI i Anthropic, z modelami Google zapowiedzianymi w najbliższych miesiącach), a Cursor to już dzisiaj dostęp do ponad 200 modeli z OpenRoutera. ## AI wchodzi do mainstreamu programowania Przedstawione w tym artykule rozwiązania pokazują, że już wkrótce współpraca programisty z AI będzie tym samym co korzystanie z systemu kontroli wersji lub przeprowadzanie Code Review. Warto już teraz obserwować rozwój opisywanych modeli i narzędzi aby budować nawyki, które przygotują nas na epokę regularnego delegowania zadań do AI. --- Tekst powstał w oparciu o Webinar Przeprogramowanych ([link](https://www.youtube.com/live/qCKFRZW9zHY?si=ZW4IW-ApLZx_Pr50)) - korekty wprowadziliśmy z wykorzystaniem ChataGPT, Cursora oraz modelu Claude 3.5 Sonnet.