windsurf/README.md

Windsurf Code Editor AI Demo

Project setup and implementation credits to Jason Zhou

1. Project setup

npx shadcn@latest init -d

Yes to create package.json and then give the project a name like 'converter'

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.