Dev.to AI πŸ€– Ai πŸ‘ 0 πŸ“– 4 min read

What I Learned Using Free AI Coding Agents on a Real Portfolio (OpenCode and Kilo)

I'm a student, and I built and kept improving my portfolio with free AI coding agents running in the VS Code terminal. I used OpenCode and later Kilo, both on free models. They saved me a lot of time, but they also got

I'm a student, and I built and kept improving my portfolio with free AI coding agents running in the VS Code terminal. I used OpenCode and later Kilo, both on free models.

They saved me a lot of time, but they also got stuck, lied by accident, and once looked busy for a whole hour without doing anything. Here is what I learned, so you can skip my mistakes.

1. Ask for a read-only diagnosis first

My mobile menu showed a dark overlay and an "X" button, but the menu links never appeared. My first prompt was "fix it", and the fix didn't work.

What worked was splitting the job into two steps:

First, read only. Do not change anything.
Find where the mobile menu is rendered and tell me exactly why the panel
is invisible, with the file and line number.
Then fix it.

When the agent has to name the real cause, it stops guessing. In my case the real cause was a previous commit that had removed the menu panel completely.

2. Keep every prompt small

My long prompts that asked for five changes at once often ended with "not done in this session". Short prompts with one job each worked much better.

A prompt template I now use:

Change ONLY <one function or one section> in <one file>.
Do not touch anything else.
Use only text that already exists. Do not invent new content.
Do not commit or push.
Run the typecheck at the end and tell me which lines you changed.

3. Always tell the agent not to commit or push

Agents are happy to "help" by committing and pushing. I wanted to review every change first. So every prompt says: do not commit or push. I check git status and git diff myself, and then I commit.

4. Typecheck passing does not mean the build passes

Several times the agent said "typecheck passed", and I still had problems after deploying. The typecheck only checks types. A real build can still fail, and a failed build on Vercel means your site stays on the old version.

Ask for the build too, and when it uses environment variables, give them:

$env:PORT="5180"; $env:BASE_PATH="/"; pnpm --filter @workspace/ritika-portfolio build

Before you ask "why is my change not live?", check the deployment status in the Vercel dashboard.

5. Don't let the agent test in a browser

I once asked an agent to verify a fix with a headless browser. It spent an hour fighting spawn pnpm ENOENT on Windows and trying one workaround after another. Now my prompts say: "Do not test in a browser or start a dev server. Only run typecheck and build." I look at the page myself.

6. Watch out for Windows and PowerShell

Agents often write bash commands. On Windows PowerShell I kept seeing errors like:

  • && is not a valid statement separator (use ; instead)
  • grep, tail and head are not recognized commands
  • 2>/dev/null fails with a path error

If your agent keeps hitting these, add a line like "I use Windows PowerShell, so use PowerShell syntax" to your prompt.

7. "Already implemented" needs checking

A few times the agent answered "Already implemented, no changes needed". Sometimes that was true. Sometimes I wanted proof. I started asking it to name the file and line number of the change, and then I searched for that text in VS Code with Ctrl + F. If the agent can't point to a line, don't trust the claim.

8. Free models have limits

Free agents can hit a daily limit, or ask you to sign in. Mine said "You need to sign in to use this model" in the middle of a task. Signing up with an email was free and took a couple of minutes. Be ready to switch tools, and never run two agents on the same folder at the same time, because they will edit the same files and cause conflicts.

9. Never paste secrets to an agent

Don't paste API keys, tokens or your .env file into a prompt or a chat. Keep them in environment variables and in your host's secret settings. Before pushing, search the diff for words like key, secret, token and password.

My simple workflow now

  1. Ask for a read-only diagnosis
  2. Ask for one small change
  3. Run git status and git diff --stat
  4. Run the build locally
  5. Test the page myself, on desktop and on a phone-sized window
  6. Commit with a clear message and push
  7. Check that the deployment is Ready
  8. Check the live site in an incognito tab

Wrapping up

AI agents are great helpers, but they are not a replacement for checking your own work. The more specific and small my prompts were, the better the results.

You can see the portfolio I built here: ritika-rajput-portfolio.vercel.app. I also share videos on RitikaMoments.

What is the biggest problem you ran into while coding with an AI agent?

πŸ“° Read the original article on Dev.to AI

Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.