Running your first AI queries
1. Running your first AI queries
Hello! In this video, we’ll explore Windsurf’s interface in more detail and run our first AI-powered queries. Let’s begin!2. A closer look at the Cascade panel
Let’s take a closer look at the Cascade panel. This is the input box—where we type prompts in plain English. Below it are two modes: The Write mode – which is great for generating or editing code directly in our files The Chat mode – Ideal for asking questions, debugging, or getting suggestions and explanations Next is the LLM dropdown to select a model. Windsurf supports many cutting-edge models and keeps adding more, so there’s always flexibility.3. A closer look at the Cascade panel
To the right, we have the Plan Mode toggle, which enables Cascade to maintain a persistent plan for complex tasks. Clicking the plus icon lets us add more context—by referencing files, triggering workflows, or uploading images. We’ll return to these later.4. A closer look at the Cascade panel
At the top bar we have: The dropdown arrow that shows past conversations; The plus icon to start new chats; The history icon with logs of previous conversations with the Cascade agent; The plugin icon to manage plugins; A customization icon for rules, memory, and workflows, which we'll come back to later; Three dots for more options; Cascade also allows setting up MCP servers, previewing apps, or deploying them using these icons. Hovering over shows what each one does.5. Let's now run queries in a real example!
Let’s now build a daily journal app where users write notes and see entries.6. Building an app with Cascade
We start by opening a new project with the open folder button. In the Cascade input box, we’ll type: “Create an index.html file for a daily journal app. It should have a title, a textarea for writing entries, a button to save them, and a section to show saved entries. Use a separate styles.css file for basic styling.” Since we want files to be created, we select Write mode, pick a model, and send.7. Building an app with Cascade
Clicking open diff shows what it created: the HTML boilerplate, and a body element. We can accept changes one by one or all at once: for now let’s accept what it suggested. Similarly, Cascade created a style.css file with the relevant code to create our daily journal app. Now, we want to view the app, so in the input box we’ll ask: “How do I preview this journal app in the browser?” Because we’re asking a question and expecting an answer—not generating code—we switch to Chat mode. Cascade explains how to open index.html in the browser. Once opened, we see the journal app created from a single prompt.8. Building an app with Cascade
Currently the Save Entry button doesn’t work. Cascade tells us we need an app.js file, and even proposes the necessary JavaScript code for us. Clicking apply moves the code into our project, and we can accept changes directly in Cascade. Refreshing index.html, the Save Entry button now works. We have a fully functional journal app—built with a single prompt. Impressive!9. Let's practice!
Time to practice now.Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.