> ## 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

> Visualize seu app web localmente no IDE Windsurf ou no navegador, com seleção de elementos, captura de erros e integração direta com o Cascade para iteração rápida.

O Windsurf Previews permite visualizar a implantação local do seu app no IDE ou no navegador (otimizado para Google Chrome, Arc e navegadores baseados em Chromium), com listeners, possibilitando iterar rapidamente ao enviar elementos e erros de volta ao Cascade como contexto.

<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" />

O Windsurf Previews é aberto via chamada de ferramenta; basta pedir ao Cascade para fazer o preview do seu site para começar. Como alternativa, você também pode clicar no ícone da Web na barra de ferramentas do Cascade para propagar automaticamente o prompt em linguagem natural e entrar no proxy.

<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">
  # Enviar elementos para o Cascade
</div>

Na Pré-visualização, você pode selecionar e enviar elementos/componentes e erros diretamente para o Cascade. Basta clicar no botão "Send element" no canto inferior direito e, em seguida, selecionar o elemento que deseja enviar.

O elemento selecionado será inserido no seu prompt atual do Cascade como uma `@ menção`. Você pode adicionar quantos elementos quiser no prompt.

<div id="in-ide-preview">
  # Preview no IDE
</div>

O Windsurf pode abrir um Preview como uma nova aba no seu editor. É uma visualização web simples que permite ver o app web ao lado do painel do Cascade.

Como esses Previews são hospedados localmente, você também pode abri-los no navegador do sistema, com todos os listeners e a capacidade de selecionar e enviar elementos e erros de console para o Cascade.

<Warning>Os listeners e a capacidade de enviar elementos e erros são otimizados para o Google Chrome, o Arc e navegadores baseados no Chromium.</Warning>

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

Você pode desativar o Windsurf Previews em Windsurf - Settings. Isso impedirá que o Cascade faça essa chamada de ferramenta.
