Seeing the bigger picture with context

1. Seeing the bigger picture with context

In the last video, we used natural language prompts to build a simple daily journal app—and Cascade generated all the HTML, CSS, and JavaScript files we needed to make it work.

2. Seeing the bigger picture with context

In this video, we’ll take things a step further. We’ll see how Cascade gives better answers with context, and we’ll explore Command for editing and adding code.

3. Better answers with more context

Let’s say while working in the app.js file we accidentally commented out the line that defines the ‘saveBtn’ object. When we preview, saving entries no longer works. To fix this, we open Cascade and type: “My journal app isn’t showing saved entries. What’s wrong?” But instead of sending the prompt alone, we add context: in this case, the app.js file. We click the + icon, choose @, then select the file—or just type @app.js.

4. Better answers with more context

Without context, Cascade might return a generic answer. For complex projects, it’s always better to reference one or more files so Cascade can reason across them. Let’s send the request in the chat mode. Cascade analyzes the prompt and the context, and tells us: "The line of code that gets the 'Save Entry' button is commented out in app.js." It even suggests the exact fix. We can click Apply, and it updates the file automatically. Great!

5. Adding images as context

Let’s now look at how we can use different images in our daily journal app as context. We want to set this image as background for our daily journal app and match its style.

6. Adding images as context

We also want to match the font and style of this template.

7. Adding images as context

We’ll use these examples to show the two ways of referencing images in Windsurf: by file name and by direct upload.

8. Adding images as context

Since we’re adding a new feature, it’s a good idea to start a new chat. Next, we’ll add background.jpg to the project folder, then click the + icon and upload the image. In the input box we type: “I want this image @background.jpg as the background of the daily journal app. Make it fit properly and add a shadow to help separate the front elements. I'm uploading an image I want to match the daily journal app's font style to that.”

9. Adding images as context

Then we switch to Write mode and hit Submit. Cascade will analyze all the files and suggest code improvements to add the image and match the style. Clicking open diff shows the changes: green for additions, red for removals. It even suggests a terminal command, but we’ll skip that and just refresh the browser. The app now has the background image and matching font.

10. A closer look at the Command tool

Now it’s time to look at Command, a tool that generates new or edits existing code via natural language inputs, directly in the editor window.

11. A closer look at the Command tool

If we highlight a section of code and press ⌘+I on Mac or Ctrl+I on Windows, it will invoke the command. Say we type something like: “Change these style settings to a different one.” After selecting the LLM model of our choice, we submit the request. We’ll see a diff view, with updated code lines appearing in green. We can review, accept, or reject the changes. Another way to interact with our code is by selecting a code block and clicking Chat. This sends the selected code as a reference to the Cascade panel as part of context for the queries.

12. Let's practice!

Let's practice!

Create Your Free Account

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