Search⌘ K
AI Features
Home
Courses
Getting Started with Windsurf AI

Rapid Code Generation with Cascade Write Mode

Explore how to use Cascade Write mode in Windsurf AI to rapidly generate a complete multi-file React project from a single prompt. Understand how Cascade manages project scaffolding, dependencies, routing, and testing while maintaining full user oversight. Learn to leverage the Running Preview and context capture features to refine UI issues and debug efficiently, enhancing your development workflow with AI-assisted automation.

We'll cover the following...

In this lesson, we move beyond isolated file examples and apply Cascade to a real project: a weather app built in React with Vite and TypeScript. You’ll generate a multi-file project with a single prompt, including routing, context providers, fetch utilities, and a chart component. The goal isn’t to showcase React itself, but to see how Cascade handles complex file structures, imports, and side effects without requiring detailed step-by-step guidance.

How to create a React app with Cascade

We’ll begin by pasting a single paragraph prompt with Write mode activated. 

Create a React-TS app called “EdWeather” with Vite. It needs a search page (input a city name) and,
on submit, should call Open-Meteo’s free geocoding endpoint to grab latitude/longitude, then navigate
to a forecast page that fetches current weather plus a 7-day forecast from Open-Meteo. Display current
temp/wind and a simple line chart of daily highs/lows. Cache recent searches in localStorage via React
Context, wire basic routing with React Router, style lightly (mobile-first CSS modules), add one Jest
test for the fetch util, and include a README with npm run dev instructions.
Prompt given to Windsurf with Write mode activated

Cascade will scaffold the entire project, wire the Open-Meteo API calls, hook up React Router, and even sprinkle in a unit test. It will give us something like this:

Cascade proposes terminal commands for risky operations
Cascade proposes terminal commands for risky operations

We can see that Cascade digested our “EdWeather” paragraph and instantly broke the job into concrete steps. The first step you see in the chat pane is “create a new Vite project with React + TypeScript.” Because that requires running a CLI command, Cascade surfaces it as a “Suggested terminal command” instead of firing it off blindly. This safeguard matters: spinning up commands in the terminal actually touches your filesystem, pulls packages, and can take time, so Windsurf makes sure you, the human, stay in charge of anything that could change your environment or eat ...