1.8 KiB
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
.