Introducing Cascade: Your Coding Agent

You’ve now used Cascade to handle small tasks like renaming classes, refactoring files, or recalling functions from your codebase. That was a glimpse of Cascade’s basic functionality. This section will look more closely at how it works under the hood.

Cascade operates in two main modes: Write mode and Chat mode (sometimes called Read mode). While both use the same underlying model, they’re optimized for different workflows. Knowing when to switch between them is key to working efficiently.

We’ll start by explaining how each mode works. Then, we’ll explore two powerful features: Web Search, which brings in real-time external knowledge, and App Deploys, which simplifies shipping your application.

By the end of this section, you’ll be able to move smoothly between continuing your work and asking Cascade for help with issues, like understanding a React hook error, without needing to provide excessive context. You’ll also know how and when to use Cascade to deploy code directly from your environment.

What is Windsurf’s “Write” mode?

Write mode is Cascade with a screwdriver in hand. Whatever instruction you hand over becomes an action plan: create files, edit sections, run tests, even stage commits. You’ll see a diff preview first, then click “Accept All” or “Reject All.” For example, we give the following prompt to Cascade in Write mode:

In Write mode, Cascade won’t just propose code blocks; it creates the Pagination.ts file with the required logic:

There are a few things to notice here:

• All Write mode edits appear in a diff viewer—you always have veto power.

• You can scope Write mode to one file, a folder, or the entire repo with the prompt. As we didn’t specify anything regarding that, it created the file at the root of our current directory.

• We had a single file here, but if you enter a broad instruction (“modernize our styling to CSS Modules”), be prepared for a multi-file diff; Cascade doesn’t shy away from big jobs.

What is Windsurf’s “Chat” mode?

Chat mode is the default panel that opens with Cascade. Here, Cascade behaves like a deeply informed mentor: you ask questions, and it answers with annotated code snippets, links, or step-by-step logic. By design, Chat mode doesn’t auto-apply changes—think “consultant” rather than “contractor.”

But Chat mode can still write code. If it proposes a fix you like, click “Apply,” and the snippet drops directly at your cursor. That safeguard is great for beginners: you learn by reading before committing. Seasoned devs often jump to Write mode for bulk work, then hop back to Chat mode for discussion. For example, we change the logic of the code, intentionally introducing an error in the Pagination.ts file.

The second line should be totalItems / pageSize instead. Now, let’s see what Cascade in Chat mode does if we ask it, “Can you check if the logic of all the functions in the Pagination.ts file is correct? I made some changes and might have introduced some errors. If there are any errors, do tell me about them with proper reasoning.”

Because we’re in Chat mode, Cascade does not touch the file unless we press the apply button shown in the second slide—it merely offers the fix and waits for our action. We can see in the third slide that if we actually apply the suggested fix, Cascade flips into a one-off write action, shows us a mini-diff, and—after our approval—patches the file. We review, decide if it makes sense, and only then make changes. No context copy-paste, no tab swamp.

When you click “Apply,” Cascade temporarily switches into Write mode behind the scenes, just for that one operation. This subtle transition ensures the change follows the same safeguards: you see a diff, can approve or reject, and nothing happens automatically. It’s an intentional handoff from “advisor” to “executor.”

What else can Cascade do?

Cascade offers several other features, but we will focus on two of the most important ones that fit the scope of our course: Web Search and Deploy.

What does the web search tool do?

Even a perfectly indexed codebase can’t tell you “what changed in React 19” or “how Netlify handles HTTP 2 push.” That’s why Windsurf ships a built-in browser for Cascade, lightweight, focused, and credit-savvy. If your question clearly needs fresh info—e.g. "

“What’s new in the latest version of React?”

Cascade fires a web query in the background, skims trustworthy sources (MDN, official blogs, changelogs), chunks the results, and distils what matters. Credits only burn on text, it actually feeds the model, no random HTML bloat. However, sometimes you want to force a fetch yourself rather than the model figuring out when to use the tool.

There are two ways to do it:

• @web: Cascade googles, grabs relevant material, and summarises the consensus.

• @docs:: Cascade limits search to curated doc selected; great for deep dives where random blogs are noise.

As shown in the image above, there are around 100 curated docs that we can select from here. But what if the documentation that you need to parse isn’t here? No worries! Paste any URL—Documentation, Medium, GitHub Gist, RFC, whatever, into Chat mode, and Cascade reads it like a human: breaks long pages into logical sections, indexes them temporarily, and answers you with citations. Perfect for quickly digesting a 20-page spec without leaving the IDE!

For example, when we give it a blog, and asks Cascade to implement something after reading, this is what the response might look like:

Also, there’s no need to worry about the wastage of your tokens here because web crawling can balloon token usage. Windsurf throttles aggressively: only top-rank snippets feed the model, and there’s a cap per request. Result: you get real-time facts without a credit hangover.

How does deployment work in Windsurf?

You built the feature, the tests pass, and the client says, “Can I see it?” Traditional flow: push to Git, fiddle with Netlify dash, wait for DNS. New flow: deploy with Cascade.

“App Deploys” for Windsurf is currently in beta but it lets Cascade call a Netlify deployment behind the scenes:

1. To deploy your application, simply ask Cascade something like: “Can you please deploy this application on Netlify?"

2. Cascade zips the build, hits Netlify’s API, and returns a public URL.

3. You share the link in Slack, done.

The first time you will do that, it will take you to Netlify login/sign up screen so you can link it with your Windsurf account. After that it will be easier than ever to deploy.

Need to redeploy? Use the same command and URL. Want ownership? After deploying, you’ll receive a claim URL. By following this link, you can claim the project on your personal provider account, giving you:

• Full control over the deployment

• Access to provider-specific features

• Ability to modify the domain name

• Direct access to logs and build information

We can deploy a basic vanilla JS app like the Todo list from earlier. Watching a live URL pop out in thirty seconds is a morale booster—and a strong reminder that Cascade isn’t just code suggestion; it’s pipeline glue.

Test your understanding

Suppose you are working on a new feature for a client dashboard and you are using Windsurf. You are really happy with how Cascade handles both suggestions and changes. Over the course of the day, you interacts with Cascade in a variety of ways:

• Ask Cascade in Chat Mode to check the logic of a newly written component. Cascade highlights a bug and offers a fix. You clicking “Apply” inserts it.

• You type @web What’s the latest recommendation for JWT expiration strategy?, and Cascade summarizes results from MDN and a blog post.

• After finishing the component, you tell Cascade: “Please deploy this app to Netlify so the client can preview it.” A few moments later, you receive a live preview link.

• Finally, you instruct Cascade to refactor the entire file to convert it from a class component to a functional component with hooks.

Now here's the question for you: Which of these interactions actually triggered “Write Mode,” and which didn’t? You can go ahead and answer in the widget below.

What’s next?

We’ve just level-cleared the essentials: Write mode for hands-on coding, Chat mode for safe, explanatory guidance, real-time context that lets you say “continue,” built-in web search when the local repo isn’t enough, and one-sentence Netlify deploys for instant bragging rights. That toolkit is all you need to stop micromanaging your AI and start delegating like a pro.

Next, we will see how we can create applications and test if everything works as intended before deploying!