From Excel to Windsurf, 2 of 2

Watch out for the waves

We'll put it all together.

Let's remember... the graphic I'm interested in is in a Claude Artifact, how do I connect one thing to the other? Well, I can't, Claude doesn't connect to the outside world today (recently ChatGPT does, with Canvas and that way) , but it wasn't my idea to connect this Artifact to the outside world either.

In the sheet I have created a tab that gives me a rough match of all the movements, banking, Amazon and PayPal (which I have in separate tabs) unified (bullshit formula that GPT has cracked) and I create another tab with a Pivot Table that groups first by month and then by category.

The Pivot Table is visually very understandable, but to use it as a source of master data for my chart, it is not at all the best idea. What idea do I have?

Use it as master data for my chart. I don't want to make a Google Apps Script that has to go through hundreds of rows when I already have the groupings I want done "for free" right there.

Let's go back to Google App Script, GPT makes me a script that reads the pivot table and assembles a JSON with an array with all the data filled in (the pivot table doesn't have all of it filled in) .

Back to Claude, I grab the Artifact code and prepare a React project to run locally. I'm taking a couple of detours, because GPT still uses old React syntax by default and such.

Nothing that can't be fixed with a little prompting and telling him to use Vite and a more modern structure. I haven't checked it, but I think Claude has it better here, and it would be good if they did a fine tuning of GPT to "forget" the old React that is so strong in "the memory", from the time when you either used React or were an outcast.

I already have the graphics working locally, but with a crappy static .tsv file.

Let's start surfing.

And now we'll leave GPT aside for a while, because we're going to get serious about development, I'll give the IDE Trial a try: Codeium's Windsurf , which is very fashionable while Cursor's, for some reason, are working much worse.

I already had the React project ready, but with static data, it's time to connect to Google Sheets.

You can imagine that using Google Sheets via API as a database is not the most common thing and because of this, I think, LLMs do not develop very well. However, I liked the way Cascade, the Windsurf Agent, approaches it.

I asked him to connect to the endpoint that Google Sheets gave me to connect to and he easily understood what the goal was, he just hacked a backend in pure NodeJS, to act as a proxy to make calls to Google Sheets, with all the OAuth stuff. Quite impressive, to be honest.

And the thing almost works, yes... almost, because OAuth, you know... not working the first time is one of the specifications of the standard xD

Basically, connecting to the Sheet is a configuration move:

1. Create a project on Google Cloud Platform

2. Activate the Google Sheets API

3. Generate credentials

4. Authorize the application

5. Configure the correct scopes

6. Make sure the scopes match in the Google Cloud Console, Google Sheets, and your application code.

7. What if the credentials of the web app, credentials of the endpoint for entering the function you want to execute, what if the users who can access it and execute it…

8. Blah, blah, blah

It was a real headache, and the Agent, Cascade with Claude 3.7, always got stuck going towards the same solution that didn't work.

Running a Programming Agent is sometimes like riding a horse that's a little runaway, you're trying to get it to go down a path, over and over again, but there's no way. (Note: I have no fucking idea how to ride a horse)

Chatbots vs Agents vs Human

I had to jump back to o3-mini-high, which, believe it or not, more or less made the same mistake, but since it's a chatbot, you have much more control over the conversation and direction.

After some tinkering with GPT, and a very advanced technique that only experience gives you, I managed to find what was the error that was not letting us move forward, because the LLMs always went towards the same type of traces, which did not bring up anything useful, and we did not get out of there. As soon as I detected, with the advanced technique, an error with details of the specific permission problem, the LLM found itself again and knew how to continue.

Okay, I'll explain the technique to you, I won't keep it just for myself.

It's the 1,2,3 logarithm technique . Which consists of going through `console.log("1");` `console.log("2");` `console.log("3");` through different places in the code where you have detected the error, and seeing what is printed and what is not, you get to the crux of the matter. (Debug is for weaklings) (logarithm because you do `logs`, hahaha) .

Yes, it seems like a no-brainer and it is, but let's double-click.

I really hit a wall doing "Vibe coding", the AI ​​was reaching the same dead end over and over again, even being unable to come up with an effective tracing or deprecation strategy to find the problem.

So Vibe Coding Bros of the world, beware of killing the developer so soon, because making an MVP is the easy part of developing.

A successful project, meaning that it is used by more people than you and 4 friends or family members, will suffer from a lot of unforeseen situations that will have to be corrected, maintained, improved... it is not a trivial thing. And you need to have tools, many of them, in your belt.

The power of the Agent

On the other hand, once the thing was connected, the Windsurf with the Agent Cascade and Claude 3.7, worked real wonders.

I asked him to separate the monster-component that I brought from Claude into different components.

He left it nickel-plated, in small, easy-to-understand pieces, components, on the one hand, and styles and services on the other... delicious.

Then, seeing that the NodeJS backend was also such a mess, all in the same file, since from the first version to achieve a functional backend, we had to throw away a lot of lines.

I asked for a restructuring of the backend, into smaller files, to a proper folder structure, using good practices, modern code and the Single Responsibility Pattern principle. Another marvel, to see how he turns spaghetti code into haute cuisine Fettuccini. (I must be hungry…)

And finally, I finished the refactor by requesting a conversion of the entire backend from pure NodeJS to using ExpressJS with Typescript.

FAN-TAS-TIC! With a couple of commands and a good time enjoying how the Agent did the job, I ended up with a fairly modern code, with a professional look and maintaining the initial functioning... initial... okay...

Almost. At some point, a graphic that had Claude's original component disappeared from my view, and I didn't realize it until too late, it was probably lost when componentizing.

Since it wasn't really a graphic you needed, it wasn't a problem, but be careful with this, that when it picks up speed, you get confident, you put in miles and 3 hours later you say, wasn't that already done? How come it's gone?

Not all AI errors are visible errors or hallucinations, which sometimes eat up entire functionalities, keeping the application running smoothly.

Another thing I liked about Windsurf, I have no experience if Cursor does the same, is that it took care to create .md files that documented what it had done, when the refactors were very large. A proactive feature that is appreciated, since sometimes it starts touching so many things so quickly that it is impossible to assess the need for so much change.

And finished project

And with that I had everything ready, and luckily, because I ran out of Windsurfing credits for the Agent, I was on Trial and they give you just a few.

It's worth noting that I blew the bulk of the Agent tokens doing these mega-refactors that required creating and editing dozens of files and folders. I learned that the hard way hahaha.

Although it's worth it. There is value in having a few "scripts" in a well-formed and structured code and it's a good investment, for when I have to go back to the code to add things, since I understand better where each functionality is and the AI ​​will work better with a good structure than with 3, 4 spaghetti files of hundreds of lines.

The "bad" thing about Windsurf is that Replit's days are numbered for me. I already imagined it would happen, but there is no comparison to the power of having the Agent in a straight IDE and the shortcomings of Replit's cloud IDE.

Of course, for my profile, I'm a technical specialist. Replit is the best cloud IDE I think there is right now, by far, and being one click away from putting the MVP into production is the bomb. Replit's competition is not Cursor or Windsurf, they are Vercel v0 or GitHub Copilot Workspaces. The programming tools market looks more exciting than ever!

Lessons

• Great results can be achieved by combining several tools. When it comes to accounting, either there are dozens of specialized applications, which usually charge you a monthly fee, or we have to use “boring” Office for these things.

• In this project we take advantage of the power of Google Sheets for semi-automatic data processing (in fact, something could be automated with Sheets itself) and the visual superiority of web technologies, outside of Sheets, avoiding using Database services that usually also have their own fees.

• LLMs work very well with unstructured data and we use it to fill a gap in Amazon.

• Programming Agents are brutal, but they still need to be watched closely, they can make entire functionalities disappear.

• Chatbots have strengths over Agents, though. It's true that in Windsurf, you also have Chatbot. But for development, my LLM is o3-mini-high. I don't know if Claude 3.7 is a bit over the top or not, but I can't afford everyone and Claude's chatbot has a reputation for having too strong usage limits, which I can't afford. It's worth noting that Claude 3.7 in Agent mode is a substantial improvement over the previous version.

• Be careful with the credits! These Agents tend to have a credit system that if you go too fast, you will have to go through the cash register very hard. It is exciting to think that in a few years we will have them running on premises “for free” so that they are more effective, faster and our machines more powerful. However, will the Cloud Agents be even better so that we have motivation to pay for them?

It hasn't been the most exciting side-project, but honestly, I've had a good time and I know for a fact that without development AI, this spreadsheet would have stayed in the 2018 version forever.

Let's read!