Inspector
Inspector · Coding
Inspector ist ein visueller Frontend-Editor für Entwickler, die React-, Next.js- oder Vite-Apps mit KI-Coding-Agenten bauen. Er verbindet sich mit dem Agenten, den Sie ohnehin nutzen, sodass Sie nicht mehr eine Textänderung beschreiben und darauf warten müssen, dass der Agent errät, welche Datei er anfassen soll. Stattdessen zeigen Sie einfach auf das Element auf dem Bildschirm. Einen Text bearbeiten, ein Layout nachjustieren oder eine Komponente austauschen, all das läuft über eine visuelle Oberfläche, die Ihre Änderungen direkt in die lokale Codebasis auf Ihrem Rechner schreibt. Kein Kopieren und Einfügen, kein Suchen in Dateien per Hand.
Über Inspector
Was ist Inspector
Inspector ist ein visueller Frontend-Editor für das Zeitalter des KI-gestützten Codierens. React-, Next.js- und Vite-Projekte werden zunehmend von Agenten wie Claude Code, Cursor oder Codex geschrieben, und der Engpass hat sich verschoben, denn der schwierige Teil ist nicht mehr das Erzeugen einer Komponente. Es ist die Frage, dem Agenten genau zu sagen, welches Element zu ändern ist und wo dieses Element lebt. Inspector schließt diesen Kreis. Er legt eine visuelle Ebene über Ihre laufende App. Jetzt können Sie React mit KI bearbeiten, indem Sie auf eine Überschrift klicken oder eine Karte ziehen, und daraus wird eine präzise Änderung an Ihren lokalen Quelldateien.
Das Tool ist um eine einfache Idee gebaut. Ihre Hände gehören an die Oberfläche, nicht an den Dateibaum. Sie bearbeiten Text direkt im Feld. Sie verschieben Elemente. Und Sie lassen den Agenten erneut auf die Änderung laufen, ohne die Seite zu verlassen, die Sie gerade ansehen. Alles geschieht direkt auf Ihrer lokalen Codebasis, daher erreicht nichts einen entfernten Server, bevor Sie entscheiden, es auszuliefern.
Die wichtigsten Grenzen sollte man früh nennen. Inspector richtet sich nur an React-, Next.js- und Vite-Projekte. Ein Vue- oder Svelte-Team wird nicht viel damit anfangen. Außerdem setzt er voraus, dass Sie bereits einen Coding-Agenten mit eigenem Abo nutzen. Inspector verbindet sich mit diesem Agenten und ersetzt ihn nicht. Noch kein Agent? Dann richten Sie den zuerst ein.
Erste Schritte
- Installieren Sie Inspector und öffnen Sie Ihr Projekt, damit das Framework und der Dev-Server erkannt werden.
- Verbinden Sie den Coding-Agenten, den Sie schon nutzen, ob Claude Code, Cursor oder Codex.
- Starten Sie Ihren Dev-Server und öffnen Sie die App in der Inspector-Ansicht.
- Klicken Sie ein beliebiges Element an, um seinen Text zu ändern, oder ziehen Sie es, um Position und Layout zu verändern.
- Prüfen Sie den Diff, den Inspector erzeugt, und lassen Sie den Agenten die Änderung in Ihrer Codebasis festschreiben.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Inspector.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler in React- oder Next.js-Teams
- Entwickler, die schon für Claude Code, Cursor oder Codex zahlen
- Einzelentwickler, die Oberflächen schnell ausliefern
Aufgaben
- UI-Texte über eine ganze Seite neu schreiben
- Layout und Abstände nachjustieren
- Die Struktur einer Komponente durchlaufen
Szenarien
- Eine Landingpage am Abend vor einer Demo polieren
- Die Ausgabe des Agenten in einem echten Projekt prüfen
- Sich in eine von einem Agenten aufgebaute Codebasis einarbeiten
Wichtigste Funktionen
Visuelle Bearbeitung von Text und Elementen
Inspector lässt Sie ein Element auf der Seite auswählen und an Ort und Stelle ändern. Bearbeiten Sie eine Überschrift. Korrigieren Sie ein Button-Label. Verschieben Sie eine Karte an eine neue Stelle. Das Tool ordnet jede Aktion der Quelle zu. Der Punkt ist Geschwindigkeit bei dem Kleinkram, der früher einen kompletten Prompt-und-Warten-Durchlauf mit Ihrem Agenten verlangte.
Agentenunabhängige Anbindung
Inspector läuft mit Claude Code, Cursor und Codex, statt Sie an einen Anbieter zu binden. Er hängt sich an den Agenten, den Sie ohnehin bezahlen. So behalten Sie Ihr bestehendes Abo und Ihren Arbeitsablauf. Als Frontend-Tool für Claude Code, als visueller Cursor-Editor oder als Begleiter für Codex passt er sich an das an, was Sie nutzen. Diese Flexibilität zählt in Teams, in denen verschiedene Entwickler verschiedene Agenten am selben Repository nutzen.
Direkte Änderungen an der lokalen Codebasis
Jede Änderung landet in Ihren lokalen Dateien, nicht in einer gehosteten Sandbox des Editors. Ihr Projektaufbau, Ihre Abhängigkeiten und Ihre Versionshistorie bleiben unangetastet. Sie bewegen sich nicht. Die visuelle Ebene sitzt über Ihrer echten App und tauscht sie nie gegen eine eingeschränkte Online-Kopie.
Unterstützung für React, Next.js und Vite
Das Tool ist auf den modernen React-Stack abgestimmt. Es kommt mit komponentenbasierten Oberflächen zurecht, erkennt die Konventionen des Frameworks und folgt der Struktur, die diese Build-Tools in einem typischen Projekt erzeugen. Läuft Ihre App auf einem dieser Frameworks, versteht Inspector von Anfang an, was er vor sich hat.
Diff-Prüfung vor dem Festschreiben
Inspector zeigt Ihnen, was er gleich ändert, damit Sie zustimmen oder ablehnen können. Sie sehen die Quelländerungen, die der Agent erzeugt hat. Dann entscheiden Sie, ob sie zu Ihrer Absicht passen. Dieser Prüfschritt verhindert, dass ein schneller visueller Ablauf still und leise Änderungen einführt, die Sie nicht wollten.
Integrierte Dev-Server-Vorschau
Sie arbeiten in dem Tool an Ihrem laufenden Dev-Server, daher ist das, was Sie bearbeiten, genau das, was der Browser vor Ihnen rendert. Keine veralteten Screenshots und kein Raten, wie eine Änderung aussehen wird. Vorschau und Code bleiben während des Durchlaufens synchron.
Vor- und Nachteile
Vorteile
- Beschleunigt kleine Text- und Layoutkorrekturen, die sonst einen kompletten Agenten-Prompt bräuchten.
- Läuft mit dem Agenten, den Sie schon nutzen, statt ein neues Abo zu erzwingen.
- Bearbeitet Ihr echtes lokales Projekt, daher bleiben Ihre Werkzeuge und die Git-Historie intakt.
- Die visuelle Ebene macht es leichter, zu erkennen und zu beheben, was ein Agent falsch gemacht hat.
- Fokussiert auf React, Next.js und Vite, daher kennt er die Konventionen dieses Stacks.
Nachteile
- Unterstützt nur React, Next.js und Vite, daher bekommen Vue-, Svelte- oder Angular-Teams nichts davon.
- Er verbindet sich mit einem Coding-Agenten, enthält aber keinen, daher brauchen Sie zuerst Claude Code, Cursor oder Codex am Laufen.
- Die Plattformunterstützung beschränkt sich auf macOS, was Windows- und Linux-Entwickler vorerst außen vor lässt.
- Er kann nicht von Grund auf entwerfen; er bearbeitet Oberflächen, die Ihr Agent bereits erzeugt hat.
Häufige Fragen
Es ist ein visueller Frontend-Editor, der sich mit Ihrem KI-Coding-Agenten verbindet. Sie zeigen auf ein Element in Ihrer laufenden App, ändern Text oder Position nach Wunsch, und Inspector macht daraus Änderungen an Ihrem lokalen React-, Next.js- oder Vite-Code. Er ersetzt den Schritt, es in einem Prompt zu beschreiben, durch einen direkten Klick.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Inspector.
Alternativen zu Inspector
Base Code
Base44 (Wix) · Coding · ProduktivitätBase Code ist eine geteilte Cloud-Entwicklungsumgebung von Base44. Das Team beschreibt Änderungen an einem bestehenden GitHub-Repository im Chat, prüft sie in der Vorschau und reicht sie als Pull Request ein.
Google EmbeddingGemma 2
Google DeepMind · Schreiben · Bilder · CodingGoogle EmbeddingGemma 2 ist ein offenes Modell mit 740 Millionen Parametern, das Text, Code, Bilder, Audio und Videobilder in Vektoren eines gemeinsamen 768-dimensionalen Raums umwandelt und auf Handys und Notebooks läuft.
GitGlow
GitGlow · Coding · ProduktivitätGitGlow ist ein Git-Client für den Desktop, der Ihren Code und die Änderungen Ihrer KI-Agenten in einer Review bündelt, damit Sie vor dem Ausliefern sehen, was die Maschine verlässt.