Super-searching with web & doc tools

1. Super-searching with web & doc tools

Hi! In this video, we’ll explore three powerful features built into Windsurf: Autocomplete, Supercomplete, and Super-Searching with Web and Doc tools.

2. Autocomplete vs. supercomplete

Let’s start with Autocomplete and Supercomplete, Windsurf’s built-in AI coding assistants. Autocomplete behaves just like we’d expect from any modern code editor—it suggests completions as we type, such as closing tags, variable names, or function calls. We can simply press Tab to accept the suggestion. Supercomplete, on the other hand, takes things a step further. It’s AI-powered and understands our intent, not just our syntax.

3. Supercomplete in practice

For example, let’s type this comment in the index.html file of our Daily Journal app: "Add a greeting message that changes based on the time of day", and press Tab. Supercomplete immediately writes the full code needed to make that happen—automatically generating logic to detect the time and display the appropriate greeting. This isn’t just a shortcut—it’s an incredibly helpful tool for beginners or anyone working quickly. We describe what we want in plain English, and Supercomplete turns it into working code.

4. Adding weather to our app

Now, let’s take things one step further. Suppose we want to add the current weather for a city like New York to our journal app. We’ll use Cascade’s web and doc search tools to help with this.

5. Adding weather to our app

First, we’ll make use of Web Search to integrate the OpenWeatherAPI. We also want to style the weather section using TailwindCSS, so we’ll use Doc Search as well.

6. Adding weather to our app

Here’s the full prompt we’ll give to Cascade: “I'm adding a weather feature to my daily journal app.” @web: Search for OpenWeatherAPI implementation in vanilla JavaScript for New York daily weather, including API setup, fetch requests, and error handling. @docs: Search TailwindCSS documentation for styling a weather widget with cards, responsive layouts, weather condition colors, and smooth animations. “Please help me integrate both—the OpenWeatherAPI functionality and beautiful Tailwind styling—into my existing HTML/CSS/JS journal app.” We’ll send this prompt in Write Mode. Cascade will now intelligently search the web and Tailwind documentation. It reads the content like a human would—pulling out the relevant details and generating the code needed to: Fetch weather data from OpenWeatherAPI; Handle any potential errors; Display temperature, weather condition, and icon; Style the widget using Tailwind with responsive layouts and animations.

7. Adding weather to our app

We can then review the suggestions. Cascade will walk us through changes to files like index.html, styles.css, and a new weather.js file. We'll click Accept on the changes it recommends. Finally, to activate the weather feature, there’s one last step Cascade is suggesting: Visit the OpenWeatherMap website via the link provided by Cascade. Sign up for a free account and retrieve your API key from the confirmation email. Open the weather.js file and replace the placeholder 'YOUR_API_KEY' with our actual key. We’ll paste our key here. We'll paste the key now for testing, but API keys shouldn't be hardcoded. Once that’s done, if we open index.html in the browser, we’ll see the current weather in New York displayed, with live temperature, condition, and animations powered by Tailwind with the help of web and docs search in Windsurf.

8. Let's practice!

Let’s practice some Windsurf search!

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.