# 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`.