> ## Documentation Index
> Fetch the complete documentation index at: https://docs.windsurf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Windsurf-Previews

> Zeigen Sie Ihre Web-App lokal in der Windsurf IDE oder im Browser in der Vorschau an – mit Elementauswahl, Fehlererfassung und direkter Integration mit Cascade für schnelle Iterationen.

Windsurf Previews ermöglichen es Ihnen, die lokale Bereitstellung Ihrer App entweder in der IDE oder im Browser (optimiert für Google Chrome, Arc und auf Chromium basierende Browser) mit Listenern anzuzeigen, sodass Sie schnell iterieren können, indem Sie Elemente und Fehler einfach als Kontext zurück an Cascade senden.

<video autoPlay muted loop playsInline className="w-full aspect-video" src="https://mintcdn.com/codeium/bVGscI7v3lPUsThV/assets/windsurf/previews/browser-preview-demo.mp4?fit=max&auto=format&n=bVGscI7v3lPUsThV&q=85&s=b3befa08affd8c5c10a84ae9259d0f15" data-path="assets/windsurf/previews/browser-preview-demo.mp4" />

Windsurf Previews werden über einen Tool-Call geöffnet. Bitten Sie Cascade einfach, Ihre Site zu previewen, um zu starten. Alternativ können Sie auch auf das Web-Icon in der Cascade-Toolbar klicken, um die natürlichsprachige Eingabeaufforderung automatisch an den Proxy zu übergeben.

<Frame style={{ border: 'none', background: 'none' }}>
  <img src="https://mintcdn.com/codeium/bVGscI7v3lPUsThV/assets/windsurf/previews/website-tools-icon.png?fit=max&auto=format&n=bVGscI7v3lPUsThV&q=85&s=6a607c6a7beaafe915760d80a78c8da6" width="392" height="216" data-path="assets/windsurf/previews/website-tools-icon.png" />
</Frame>

<div id="send-elements-to-cascade">
  # Elemente an Cascade senden
</div>

In der Vorschau können Sie Elemente/Komponenten und Fehler direkt an Cascade senden. Klicken Sie einfach unten rechts auf die Schaltfläche „Element senden“ und wählen Sie anschließend das Element aus, das Sie senden möchten.

Das ausgewählte Element wird als `@ mention` in Ihren aktuellen Cascade-Prompt eingefügt. Sie können im Prompt beliebig viele Elemente hinzufügen.

<div id="in-ide-preview">
  # Vorschau im IDE
</div>

Windsurf kann eine Vorschau als neuen Tab in Ihrem Editor öffnen. Dies ist eine einfache Webansicht, mit der Sie eine Web-App neben Ihrem Cascade-Panel anzeigen können.

Da diese Vorschauen lokal gehostet werden, können Sie sie auch in Ihrem Systembrowser öffnen – inklusive aller Listener sowie der Möglichkeit, Elemente auszuwählen und Elemente sowie Konsolenfehler an Cascade zu senden.

<Warning>Die Listener und die Funktionen zum Senden von Elementen und Fehlern sind für Google Chrome, Arc und Chromium-basierte Browser optimiert.</Warning>

<div id="how-to-disable">
  # Deaktivieren
</div>

Sie können Windsurf Previews über die Windsurf-Einstellungen deaktivieren. Dadurch wird verhindert, dass Cascade diesen Toolaufruf ausführt.