44 lines
1.8 KiB
Markdown
44 lines
1.8 KiB
Markdown
|
# 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`.
|