Erste Schritte mit Cursor AI: Wie du eigene Programme ohne Coding-Erfahrung erstellst

Moin und willkommen zu einem neuen Snip! Ich weiß ja nicht, wie es dir geht, aber mit den ganzen Entwicklungen in den letzten Wochen und Monaten glaube ich, dass wir immer mehr Tools uns auch selber bauen werden, weil das Coding oder das Programmieren mit KI immer einfacher wird. Und da ist in den letzten Wochen einiges passiert. Wir hatten vor kurzem auch einen Snip zum GPT Engineer, der da schon einen sehr guten Start gebracht hat. Ich will das Ganze aber jetzt noch mal mit dir ein bisschen weiterdenken und will dir heute eine sehr spannende Softwarelösung dafür vorstellen, und zwar Cursor. Cursor ist quasi das KI-Entwicklungstool, was gerade am Markt ist und was gerade in aller Munde ist, mit dem nicht nur Entwickler und Entwicklerinnen schon wesentlich schneller sind, sondern auch Leute, die noch gar keinen Zugang zum Thema Entwickeln und Coden hatten, eigene Sachen umsetzen können, und das Ganze nur mit natürlicher Sprache. Und in diesem Video will ich dir einmal zeigen, wie du mit Cursor startest, gebe dir auch schon mal ein, zwei Beispiele, will dir aber vor allen Dingen auch den Zugang geben, wie du mit dem Tool loslegst. Da wird es auch bei snipKI noch einige weitere Videos zu geben, um das Ganze noch weiter aufzubauen und hier auch noch komplexere Sachen zu machen. Aber ich glaube, der Start ist schon mal sehr essenziell, deswegen hier wirklich das Grundlagending, um schon mal mit Cursor zu starten, mit ein paar Details dazu und ersten Ideen, wie du damit loslegen kannst. So, wir springen direkt mal rein, und zwar nicht in Cursor direkt, sondern auf die Webseite. Und hier auf dieser Webseite, der Titel ist eigentlich auch schon Programm: „The AI Code Editor“, und genauso ist es auch. Das heißt, du siehst hier ganz verschiedene Möglichkeiten, wie du Cursor nutzen kannst, einige Beispiele, einige Stimmen. Was hier aber spannend ist: A, du musst natürlich herunterladen, das heißt, es ist eine Desktop-App, und die gibt es aktuell auch erstmal nur für den Mac, soweit ich weiß. Und dann geht es Richtung Pricing. Und zwar ist es gerade – wir gucken mal gerade hier: Ach, es gibt es auch für Windows und für Linux. Das heißt, hier gibt es das nicht nur für Mac, sondern das war gerade der Shortcut dafür. Aber du musst herunterladen. Und du siehst, hier gibt es verschiedene Preispakete. Und hier vorweg: Wenn du damit startest, kannst du das Free-Paket auswählen. Hier hast du auch erstmal viele Möglichkeiten, das Ganze auszunutzen und auch damit zu coden. Und du hast eine zweiwöchige Pro-Trial. Das heißt, du kannst zwei Wochen ohne Angabe deiner Kreditkarte das Pro-Paket hier testen im Wert von 20 Dollar pro Monat und damit schon einiges umsetzen. Du siehst aber, du hast 2000 Completions, 50 Slow Premium Requests, also hier quasi Anfragen an das KI-Modell, was wir uns gleich mal anschauen werden. So, wenn du es runtergeladen hast und installiert hast, Cursor, dann sieht das Ganze dann so aus. Erstmal relativ langweilig. Das heißt, du startest hier erstmal mit einem Ordner, den du öffnest, und da muss auch eigentlich gar nichts drin sein. Und vorweg: Du hast hier oben die Möglichkeit, alle möglichen Sachen zu durchsuchen, also zum Beispiel auch die Einstellungen bzw. hier heißt es glaube ich „Settings“. Du hast hier Tasks auszuführen, du hast aber hier oben rechts – und da gehen wir jetzt auch mal rein – erstmal die Cursor-Settings. Und hier hast du Rules for AI, da kommen wir auch in einem späteren Video noch mal rein. Das heißt, du kannst hier grundlegende Programmier-Rules auch noch mal definieren. Du hast verschiedene Modelle, die du ansteuern kannst. Das heißt, nicht nur Claude 3.5 Sonnet kann hier benutzt werden, sondern auch andere Modelle, und du kannst dir auch deine eigenen Keys hinzufügen. Das Ganze macht dann Sinn, wenn du nicht die Pro-Version hast, sondern hier quasi auf deine eigenen Keys noch mal zurückgreifen willst. Also viele Möglichkeiten hier, verschiedene KI-Modelle zum Coding zu benutzen. Und je nachdem, wie sich das Ganze entwickelt, wird das Ganze wahrscheinlich auch noch mal hier angereichert, es kommen noch mal mehrere Modelle hinzu. Was ganz wichtig ist, sind die Features. Und zwar, wenn du in die Features gehst, hast du hier den Composer. Und da musst du drauf achten, dass der enabled ist. Das heißt, hier schau einfach mal in den Settings – also hier oben rechts auf das kleine Zahnrad gehen, die Features –, und einmal beim Composer schauen: Ist das Ding enabled? Weil das ist das Ding, was quasi der Dreh- und Angelpunkt ist, um das Ganze hinzuzufügen. Hier sind noch weitere Funktionen: Du kannst hier den Chat entsprechend noch mal anpassen, du kannst hier auch eigene Coding-Dokumente hinzufügen, das werden wir in einem späteren Video noch mal angehen. Das heißt, du kannst auch hier Dokumentationen von APIs beispielsweise mit hinzufügen. Aber wichtig ist hier vor allem im ersten Schritt, das Ding hier auf enabled zu stellen. Zweite wichtige Einstellung ist im Beta-Bereich. Und da hast du hier den Long Context Chat Beta. Und zwar wird hier in der Regel das Claude-Modell benutzt. Claude hat ja aktuell in der normalen, also in der kostenlosen und in der Pro-Version, ein 200.000-Token-Kontextfenster, und mit dieser Einstellung nutzt du das Fenster dann auch entsprechend aus. Das heißt, je mehr Kontext du auch dann mitgegeben hast, desto mehr Möglichkeiten hast du dann auch, das Ganze zu nutzen. Also grundsätzlich kannst du hier extrem viele Sachen machen. Es ist ein vollwertiger Code-Editor, das heißt, wenn du einen Zugang zum Entwickeln hast, bist du wahrscheinlich hier schon sehr gut mit aufgebracht. Du kannst hier Dateien und Ordner erstellen. Aber für den ersten Schritt wollen wir das Ganze einfach mal mit der KI machen. Das heißt, wir gehen mal hier aus den Settings raus, klicken hier auf das X, und sind jetzt erstmal hier in dem leeren Ding. So, und jetzt drücken wir quasi Command + Shift + I, das wird bei dem Windows-Rechner wahrscheinlich Strg + Shift + I sein, und dann geht hier nämlich der Composer auf, der große. Das heißt, hier hast du jetzt einen KI-Chat, und der sieht vielleicht auch ein bisschen einfacher gehalten aus, ist aber sehr mächtig, mit dem du jetzt alles Mögliche erstellen kannst. Und das aber auch durch natürliche Sprache. Das heißt, ein ganz, ganz einfaches Beispiel: Wir wollen einfach mal einen Rechner erstellen, also einen Taschenrechner im Internet. Und dafür tippen wir hier einfach ein in natürlicher Sprache – ich bevorzuge hier auch immer Englisch, weil das Modell dann einfach noch straighter zu dem Ergebnis kommt – und sagen jetzt hier einfach, wir möchten einen Taschenrechner erstellen: „Create a calculator“, und sagen jetzt hier beispielsweise, dass wir das Ganze aber in JavaScript, also in JavaScript, in HTML und CSS wollen: „Create a calculator HTML, JavaScript and CSS“. Also hier hat es natürlich Vorteile, wenn du ein bisschen dich auskennst im Bereich Programmieren. Wenn du aber auch ganz einfach startest, ist es auch gar kein Problem. Du wirst schnell merken, was funktioniert und was auch nicht funktioniert. Das ist ganz, ganz einfach. Aber wir starten einfach mal hier, um dir auch mal zu zeigen, wie dann dieser Composer funktioniert. Und du siehst, ich habe es hier abgeschickt. Und das Spannende ist hier, anders als bei Claude beispielsweise, wo natürlich auch Programmiertext erstellt wird und gerendert wird, siehst du hier im linken Bereich: Hier werden Dateien erstellt. Das heißt, wir haben hier eine index-Datei, wir haben eine styles-Datei und eine script-Datei, die jetzt hier erstellt wird. Und hier im rechten Bereich hast du dann deinen Chat, und hier unten kannst du auch noch entsprechend weiterschreiben. Und hier wird dir entsprechend der Composer sagen, was er so getan hat, was für Funktionen hier sinnvoll sind, was für Dateien er erstellt hat. Und dann hast du hier unten die Möglichkeit, diese Änderungen zu akzeptieren oder auch zu rejecten, also abzulehnen. Und hier hast du mehrere Möglichkeiten. Du kannst zum Beispiel sagen: „Ich möchte alle Sachen saven“, das heißt, du speicherst die Dateien, oder direkt alle accepten. Der Unterschied und der Vorteil ist hier: Wenn du etwas acceptest, dann ist das erstmal quasi so alles niedergeschrieben. Wenn du auf „Save all“ gehst, kannst du jetzt alles testen und dann auch noch mal auf „Reject all“ gehen, also noch mal rückgängig machen. In diesem einfachen Beispiel brauchen wir das erstmal nicht, deswegen gehen wir hier auf „Accept all“. Machen wir hier den Composer zu und können ihn auch hier über Command + I oder Strg + I noch mal in klein aufrufen und sehen jetzt hier links: Es sind Dateien erstellt worden. Und wenn wir uns die Dateien jetzt einfach mal anschauen im Browser, also die index-Datei – ich habe die jetzt hier einfach mal auf meinem Fenster hier reingezogen, also hier haben wir die Dateien, die erstellt worden sind –, dann haben wir hier wahrscheinlich einen funktionierenden Taschenrechner. Hat sehr, sehr gut funktioniert! Aber hier ist es wirklich nur der Anfang von Cursor. Du kannst hier noch viel, viel mehr machen. Ich zeige dir noch ein anderes kleines Beispiel, um noch mal zu zeigen, wie man da auch noch mal interaktiv werden kann. Dafür lösche ich einfach mal die Dateien hier, das spielt jetzt erstmal keine Rolle, starte hier wieder auf null, gehe hier auf „Reset Composer“, gehe wieder in meinen großen Composer rein und erzähle hier jetzt einfach: Ja, ich möchte eine To-do-Listen-App erstellen. Und kann hier auch noch mal weiterreden. Das heißt, ich starte jetzt einfach mal: „Create a simple to-do list app where the user can add a task, rename and delete it. Use HTML, JavaScript and CSS.“ Also hier dasselbe Spiel. Tipp von mir: Starte mit dem Prototyp immer mit wenigen Funktionen, weil wenn du zu viele Wünsche und Funktionen reinpackst, dann kann das Ding sich auch mal verlaufen. Das heißt, starte hier mit einem Prototyp ganz einfach. Wenn du Funktionen und Features im Hinterkopf hast, füge sie lieber später hinzu. Das machen wir jetzt auch mal. Und auch hier drücken wir auf Start, warten kurz, und entsprechend legt Cursor schon wieder los, sagt hier, es wird schon eine index.html hinzugefügt, eine style.css-Datei, um das Ganze zu designen, und eine script-Datei, um das Ganze natürlich auch funktional auszustatten. So, und auch hier haben wir die Möglichkeit, alles zu akzeptieren. Das machen wir jetzt einfach mal und aktualisieren wir einfach mal hier, weil es auf derselben Datei ist. Ja, wunderbar! Wir haben jetzt hier einen Task, den wir hinzufügen: Funktioniert. Können das Ding renamen – wollen wir mal gucken –, funktioniert auch. Kannst auch löschen. Und kann jetzt hier meine Einkaufsliste: Einkaufen, Milch, Eis, Bier. So, und habe jetzt hier in wenigen Sekunden eine eigene To-do-App gebaut. Und das Schöne ist, wir springen jetzt noch mal kurz zurück in Cursor: Wir können hier weiterarbeiten. Das heißt, wir haben jetzt hier natürlich einen Draft und können hier aber neue Features hinzufügen. Beispielsweise können wir sagen: „Ich möchte jetzt einen Dark Mode haben: Add a toggle so the user can switch to dark mode.“ Das heißt, ich kann hier auch nach und nach neue Features hinzufügen, und Cursor wird hier den Quellcode, den er hat, hier editieren. Du siehst es hier auch an dem kleinen drehenden Kreis, was hier bearbeitet wird, und wird halt die Dateien, die es dann im Verzeichnis hat, erkennen, als Kontext nutzen und damit weiterarbeiten. Und wir gucken mal, was das Ganze ausspuckt. Wir akzeptieren das Ganze, springen noch mal in unsere Datei rein und haben hier einen Dark Mode! Und das Skript funktioniert weiter. Und von hier aus können wir natürlich beliebig weitergehen. Wir können hier Inhalte hinzufügen, wir können hier das Ganze noch mal kategorisieren, clustern. Also, wir können hier wahrscheinlich auch sogar – das probiere ich mal – ein Drag-and-Drop-Feature vielleicht hinzufügen: Sagen einfach mal „Add a drag-and-drop feature so the user can change the order of the tasks.“ Also hier versuche ich das Ganze noch interaktiver zu machen. Und das ist, wie gesagt, nur der Anfang. Wir werden sehen, dass wir mit Cursor auch APIs verbinden können, eigene Chatbots bauen, Bildgeneratoren bauen können. Alles das innerhalb von wirklich Minuten und einen ersten fertigen Prototyp, mit dem man dann auch weiterarbeiten kann. Und du siehst, ich habe jetzt hier für diese Sachen, die jetzt keine Rocket Science sind, aber trotzdem ein gewisses Coding-Verständnis benötigt, innerhalb von Minuten was umgesetzt, ohne einmal den Quelltext anzupassen. Wir probieren das Ganze hier mal auch mit unserem letzten Beispiel. Wir sagen „Accept all“, aktualisieren den Spaß hier und sagen einfach mal: Einkaufen, Bier, Fußball, snipKI. So, und jetzt haben wir hier – wir sehen schon hier so neue Funktionen, und boah, ja, hätte ich nicht gedacht! Manchmal verrennt sich das Ding, baut mal Sachen nicht richtig, da muss man noch mal ein bisschen schimpfen. Aber du siehst hier: Ich kann hier alles entsprechend so rumschieben, wie ich mir das so vorstelle. Fußball können wir jetzt mal nach oben, snipKI kommt noch hier noch mal nach oben. Hier sieht man so, es wird leicht ausgegraut, da müsste ich noch mal rangehen, warum das denn so ist, finde ich noch ein bisschen komisch, kann man noch ein bisschen verbessern. Aber beim ersten Prototyp muss man sagen: schon krass! Ja, und diese Dateien hast du dann hier in deinen Ordnern, mit denen du dann arbeiten kannst. Und die kannst du dann beispielsweise auf deiner Webseite hosten, aber auch noch woanders. Da gibt es verschiedene Möglichkeiten, das Ganze dann ins Web zu packen. Und wenn du diese Webseite, die du jetzt gebaut hast, auch noch schnell ins Internet bekommen möchtest und nicht nur auf deinem Rechner, auch dafür gibt es verschiedene Tools, die du nutzen kannst. Eins davon ist zum Beispiel dieses hier von Netlify: Netlify Drop. Und hier steht auch schon: „Drag and drop, it's online.“ Und was du hier machen kannst: Du kannst einfach den Ordner oder eine ZIP-Datei, je nachdem wie du es machen möchtest, hier reinziehen. Das machen wir jetzt einfach mal. Und du siehst, innerhalb von wenigen Sekunden ist die Webseite live. Es gibt ein Passwort zum Schutz. Wenn wir mal draufklicken, Passwort hier einfach mal kurz eingeben, und siehe da: Wir haben unseren – unsere kleine To-do-Liste! Und die ist jetzt online im Internet über eine kleine Webseite. Das heißt, hier auch die Möglichkeit, das Ganze nicht nur auf dem Rechner zu machen, sondern auch zu hosten. Und das war jetzt ein wirklich sehr, sehr einfacher Schritt, um mit Cursor AI zu starten. Du hast gesehen, was für Accounts es gibt. Am Anfang, wie gesagt, starte mit der kostenlosen Version, du hast eh zwei Tage die – zwei Wochen die Pro-Version, nutz das auf jeden Fall aus. Und du hast gesehen, wie der Composer innerhalb von Sekunden mit einfachen Textangaben erste Programme baut. Und hier wird es, wie gesagt, noch andere Videos geben, aber probier einfach mal Sachen aus, probier auch quasi das noch mal, vielleicht Sachen aus dem Internet, Dokumentationen hinzuzufügen. Hier kann man sehr, sehr viel machen. Manche Sachen funktionieren, manche erzeugen halt manchmal Fehler, aber hier lohnt es sich, wenn du Spaß hast und Ideen für Projekte, sich mit Cursor zu beschäftigen und das Ganze dann damit auszuprobieren. Und dabei wünsche ich dir ganz viel Spaß und wir sehen uns beim nächsten Snip! Ciao!