# Windsurf Code Editor AI Demo [Project setup and implementation](https://www.youtube.com/watch?v=824Fyh146_w) credits to [Jason Zhou](https://x.com/jasonzhou1993) ## 1. Project setup ```bash npx shadcn@latest init -d ``` Yes to create package.json and then give the project a name like 'converter' ```bash cd converter npx shadcn@latest add input select card label button ``` Next, create a directory called `instructions` in the `converter` folder, and create the `instructions.md` file in said directory. This file will give `Cascade` instructions and guidelines on how to generate code for this project. ## 2. Project implementation This section will outline the prompts, given to `Cascade`. Beginning with: ``` I want to build a next.js app for users to upload PDF files of bank statements or invoices, and we will extract data to convert them into excel files; Implementation strictly based on @instructions.md ; I've setup the next.js project already in 'converter' folder, now let's build ## 1. File Upload & Schema Definition ``` It will occasionally ask you for approval to run terminal commands, such as `npm install package-name`. In order to see that the basic functionalities are there, run the project with the following command: `npm run dev` Once the project is running, you can navigate to the URL `http://localhost:3000` in your browser to see the app running. If everything is satisfactory, proceed to give prompts one at a time to `Cascade` to generate code for the rest of the steps. Example: ``` Let's do ## 2. Text Extraction ``` You may need to fix errors and issues along the way by prompting `Cascade` to fix them. The biggest struggles seem to be with the implementation of the `OpenAI` API, as `Cascade` needs to be reminded to follow the provided docs on using the `gpt-4o` model and `zod`.