Rapid Code Generation with Cascade Write Mode
Learn how Cascade’s Write mode rapidly scaffolds full multi-file applications with safe, reviewable changes driven by natural language prompts.
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 navigateto a forecast page that fetches current weather plus a 7-day forecast from Open-Meteo. Display currenttemp/wind and a simple line chart of daily highs/lows. Cache recent searches in localStorage via ReactContext, wire basic routing with React Router, style lightly (mobile-first CSS modules), add one Jesttest for the fetch util, and include a README with npm run dev instructions.
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:
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 bandwidth.
We click “Accept” and Cascade will execute the command. Then we watch Vite scaffold the folder, then flow straight into installing React Router, chart.js, and Jest—each queued as its own terminal step.
On the left you can see the brand-new ...