Einführung

SlopCode ist ein Open-Source-Coding-Agent für AI. Es ist als terminalbasierte Schnittstelle, Desktop-App oder IDE-Erweiterung verfügbar.

SlopCode TUI with the slopcode theme

Fangen wir an.

Voraussetzungen

Um SlopCode in Ihrem Terminal verwenden zu können, benötigen Sie:

Ein moderner Terminal-Emulator, zum Beispiel:
- WezTerm, cross-platform
- Alacritty, plattformübergreifend
- Ghostty, Linux und macOS
- Kitty, Linux und macOS
API-Schlüssel für die LLM-Anbieter, die Sie verwenden möchten.

Installation

Der einfachste Weg, SlopCode zu installieren, ist über das Installationsskript.

curl -fsSL https://slopcode.dev/install | bash

Sie können es auch mit den folgenden Befehlen installieren:

Mit Node.js
- npm
- Bun
- pnpm
- Yarn
Terminal window
npm install -g slopcode
Terminal window
bun install -g slopcode
Terminal window
pnpm install -g slopcode
Terminal window
yarn global add slopcode
Homebrew unter macOS und Linux verwenden
Terminal window
```
brew install slopcode
```
Wir empfehlen die Verwendung des SlopCode-Taps für die aktuellsten Versionen. Die offizielle brew install slopcode-Formel wird vom Homebrew-Team gepflegt und seltener aktualisiert.

Verwendung von Paru unter Arch Linux

sudo pacman -S slopcode           # Arch Linux (Stable)
paru -S slopcode-bin              # Arch Linux (Latest from AUR)

Windows

Verwendung von Chocolatey
Terminal window
```
choco install slopcode
```
Scoop verwenden
Terminal window
```
scoop install slopcode
```
Mit NPM
Terminal window
```
npm install -g slopcode
```
Mit Mise
Terminal window
```
mise use -g github:grappeggia/slopcode
```

Verwendung von Docker

docker run -it --rm ghcr.io/grappeggia/slopcode

Die Unterstützung für die Installation von SlopCode unter Windows mit Bun ist derzeit in Arbeit.

Sie können die Binärdatei auch aus Releases abrufen.

Konfiguration

Mit SlopCode können Sie jeden LLM-Anbieter verwenden, indem Sie dessen API-Schlüssel konfigurieren.

Wenn Sie mit der Verwendung von LLM-Anbietern noch nicht vertraut sind, empfehlen wir die Verwendung von SlopCode Zen. Es handelt sich um eine kuratierte Liste von Modellen, die vom SlopCode Team getestet und verifiziert wurden.

Führen Sie den Befehl /connect in TUI aus, wählen Sie SlopCode aus und gehen Sie zu slopcode.dev/auth.
```
/connect
```
Melden Sie sich an, geben Sie Ihre Rechnungsdaten ein und kopieren Sie Ihren API-Schlüssel.
Fügen Sie Ihren API-Schlüssel ein.
```
┌ API key
│
│
└ enter
```

Alternativ können Sie auch einen der anderen Anbieter auswählen. Mehr erfahren.

Initialisierung

Nachdem Sie nun einen Anbieter konfiguriert haben, können Sie zu einem Projekt navigieren an dem Sie arbeiten möchten.

cd /path/to/project

Und führen Sie SlopCode aus.

slopcode

Als nächstes initialisieren Sie SlopCode für das Projekt, indem Sie den folgenden Befehl ausführen.

/init

Dadurch wird SlopCode dazu veranlasst, Ihr Projekt zu analysieren und eine AGENTS.md-Datei im Projektstammverzeichnis zu erstellen.

Dies hilft SlopCode, die Projektstruktur und die Codierungsmuster zu verstehen die verwendet werden.

Verwendung

Sie können nun SlopCode verwenden, um an Ihrem Projekt zu arbeiten. Fragen Sie ruhig nach allem!

Wenn Sie mit der Verwendung eines AI-Codierungsagenten noch nicht vertraut sind, finden Sie hier einige Beispiele, die hilfreich sein könnten.

Fragen stellen

Sie können SlopCode bitten, Ihnen die Codebasis zu erklären.

How is authentication handled in @packages/functions/src/api/index.ts

Dies ist hilfreich, wenn es einen Teil der Codebasis gibt, an dem Sie nicht gearbeitet haben.

Funktionen hinzufügen

Sie können SlopCode bitten, Ihrem Projekt neue Funktionen hinzuzufügen. Wir empfehlen jedoch, es zunächst um die Erstellung eines Plans zu bitten.

Erstellen Sie einen Plan

SlopCode verfügt über einen Plan Mode, der seine Fähigkeit, Änderungen vorzunehmen, deaktiviert Schlagen Sie stattdessen vor, wie die Funktion implementiert wird.

Wechseln Sie mit der Tabulatortaste dorthin. In der unteren rechten Ecke sehen Sie einen Indikator dafür.
```
<TAB>
```
Beschreiben wir nun, was es tun soll.
```
When a user deletes a note, we'd like to flag it as deleted in the database.
Then create a screen that shows all the recently deleted notes.
From this screen, the user can undelete a note or permanently delete it.
```
Sie möchten SlopCode genügend Details geben, um zu verstehen, was Sie wollen. Es hilft mit ihm zu sprechen, als ob Sie mit einem Junior-Entwickler in Ihrem Team sprechen würden.

Geben Sie SlopCode reichlich Kontext und Beispiele, damit es versteht, was Sie wollen.
Den Plan überarbeiten

Sobald Sie einen Plan erhalten, können Sie ihm Feedback geben oder weitere Details hinzufügen.
```
We'd like to design this new screen using a design I've used before.
[Image #1] Take a look at this image and use it as a reference.
```
Ziehen Sie Bilder per Drag-and-Drop in das Terminal, um sie zur Eingabeaufforderung hinzuzufügen.

SlopCode kann alle von Ihnen bereitgestellten Bilder scannen und zur Eingabeaufforderung hinzufügen. Du kannst Ziehen Sie dazu ein Bild per Drag & Drop in das Terminal.
Funktion erstellen

Wenn Sie mit dem Plan zufrieden sind, wechseln Sie zurück in den Build Mode indem Sie erneut die Tabulatortaste drücken.
```
<TAB>
```
Und es bitten, die Änderungen vorzunehmen.
```
Sounds good! Go ahead and make the changes.
```

Änderungen vornehmen

Für einfachere Änderungen können Sie SlopCode bitten, es direkt zu erstellen ohne den Plan vorher überprüfen zu müssen.

We need to add authentication to the /settings route. Take a look at how this is
handled in the /notes route in @packages/functions/src/notes.ts and implement
the same logic in @packages/functions/src/settings.ts

Sie möchten sicherstellen, dass Sie viele Details bereitstellen, damit SlopCode die richtigen Änderungen vornimmt.

Änderungen rückgängig machen

Nehmen wir an, Sie bitten SlopCode, einige Änderungen vorzunehmen.

Can you refactor the function in @packages/functions/src/api/index.ts?

Aber Sie erkennen, dass es nicht das ist, was Sie wollten. Sie können die Änderungen rückgängig machen mit dem Befehl /undo.

/undo

SlopCode macht nun die von Ihnen vorgenommenen Änderungen rückgängig und zeigt Ihre ursprüngliche Nachricht wieder an.

Can you refactor the function in @packages/functions/src/api/index.ts?

Von hier aus können Sie die Eingabeaufforderung anpassen und SlopCode bitten, es erneut zu versuchen.

Oder Sie können die Änderungen mit dem Befehl /redo wiederholen.

/redo

Die Gespräche, die Sie mit SlopCode führen, können mit Ihrem Team geteilt werden.

/share

Dadurch wird ein Link zur aktuellen Konversation erstellt und in Ihre Zwischenablage kopiert.

Hier ist ein Beispielgespräch mit SlopCode.

Anpassung

Und das ist es! Sie sind jetzt ein Profi im Umgang mit SlopCode.

Um es zu Ihrem eigenen zu machen, empfehlen wir ein Theme auszuwählen, Keybinds anzupassen, Code-Formatter zu konfigurieren, eigene Commands zu erstellen oder mit der SlopCode-Konfiguration zu experimentieren.