windsurf/README.md

44 lines
1.8 KiB
Markdown
Raw Permalink Normal View History

2024-11-20 23:27:41 +00:00
# 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`.