Vite+ modified how I construct functions with AI brokers

One undertaking had 47 growth dependencies, seven config recordsdata, and a Markdown file explaining to the agent the right way to run all the pieces. At 2 a.m., I used to be debugging a distinction between native checks and CI. The code was carried out; the tooling round it wasn’t. After three weeks with Vite+ throughout 4 initiatives, I’ve a easy rule for brand new Vite apps: put it within the first immediate I give the AI.

The brief model

• For a brand new Vite app, I’ve the agent create the undertaking with vp create, then confirm its work with vp verify, vp take a look at, and vp construct.
• Speed is sweet, however the greater win for me is one clear workflow for the agent, me, and CI.
• For an current undertaking, I deal with vp migrate as the beginning of a migration. I nonetheless assessment the diff, exams, and construct habits.

A gradual linter wasn’t the issue

My instructions have been unfold throughout ESLint, Prettier, TypeScript, a take a look at runner, and bundle.json scripts. When I let an agent into the undertaking, its first job was determining which command was the correct one. I wrote directions to clarify that. Now I had one other file to take care of. Excellent time saver, proper?

It wasn’t simply the variety of recordsdata. Once, my native setup and CI checked a generated file in a different way. The agent noticed one end result; the pipeline noticed one other. Faster part technology does not repair that.

Vite+ brings on a regular basis duties beneath vp: Vite for growth and builds, Vitest for exams, Oxlint and Oxfmt for checks, tsdown for libraries, and Vite Task for duties. You can preserve their configuration in vite.config.ts. You nonetheless have bundle.json, tsconfig, and, relying on the undertaking, framework configuration. “One file for completely all the pieces” would look good on a banner and unhealthy in an actual repo.

For a React app, these are the instructions I would like after creating the undertaking:

1vp create vite -- --template react-ts
2cd project-name
3vp set up
4vp dev
5vp verify
6vp take a look at
7vp construct

The instructions above assume vp is offered globally. A worldwide set up is non-compulsory; it’s also possible to run Vite+ as an area dependency by way of a bundle supervisor. vp set up makes use of the bundle supervisor chosen for the undertaking, so Vite+ does not exchange npm or pnpm.

I do not let the agent guess what “carried out” means

The Vite+ docs embody a immediate for AI assistants. It’s a helpful place to begin, however I adapt it to the undertaking. My purpose is concrete: the agent ought to use Vite+ to arrange the app and never quietly abandon it after producing the primary web page.

Create a brand new React + TypeScript app on Vite utilizing Vite+.
First learn the present `vp create` information and run `vp assist create`.
Inspect the goal listing and don't overwrite current recordsdata.
Choose the present steady Vite+ launch and one bundle supervisor.
Create the undertaking with `vp create` utilizing the React + TypeScript template.
Keep its single lockfile. Do not add one other linter or formatter
until there's a particular cause.

After setup, run `vp set up`, `vp verify`, and related exams
with `vp take a look at`, and run a manufacturing `vp construct`. Add a take a look at for the
habits you applied. If a verify fails, repair the trigger and rerun it.
In your remaining report, checklist the Vite+ model, instructions, and precise outcomes.

I do not require a worldwide set up through curl in each undertaking. For a one-off setup, one thing like npx [email protected] vp create is sufficient; in a longtime undertaking, the agent can run the native CLI by way of the chosen bundle supervisor. I do not ban create-vite, both: vp create vite makes use of that template. What issues is that the agent follows the supposed setup and retains one constant toolchain.

When I gave an agent free rein, I ended up with each Prettier and Oxfmt, three lockfiles, and unreliable CI. Banning a second formatter and requiring one lockfile aren’t aesthetic preferences. They’re two errors I do not wish to clear up once more.

One command offers me quick suggestions

After altering code, I run vp verify. It checks formatting and lint; it checks TypeScript when each typeAware and typeCheck are enabled within the configuration. A brand new undertaking created with vp create allows them by default. In an current undertaking, I confirm that setting as a substitute of assuming a inexperienced end result additionally means the categories are sound.

Here’s the distinction from my outdated workflow:

1# Before: it relied on every undertaking's scripts.
2npm run format:verify
3npm run lint
4npm run typecheck
5
6# Now, in a undertaking with the corresponding Vite+ configuration.
7vp verify

vp verify --fix can restore some findings robotically. After that, I learn the diff and run the verify once more. A inexperienced lint end result nonetheless does not inform me whether or not the app does the correct factor. I would like vp take a look at for habits and vp construct to confirm the appliance builds.

I additionally put that rule within the repo’s agent directions. When I return to a undertaking every week later, a brand new agent will not bear in mind yesterday’s chat. The repo nonetheless is aware of its instructions.

1## Checks earlier than finishing a job
2
3- After altering code, run `vp verify` and repair any errors.
4- After altering habits, run the related exams with `vp take a look at`.
5- Before handing off a Vite app, run `vp construct`.
6- Review the diff after automated fixes.
7- Report the precise outcomes; do not name a failed run full.

Local directions and Git hooks assist, however they are often bypassed or disabled. I run the identical checks in CI. On an experiment the place I let an agent work unattended, human assessment earlier than merging was nonetheless my duty.

What I measured

In a monorepo, CI went from 4 minutes to 50 seconds after I modified the workflow. A pre-commit verify dropped from 11 seconds to beneath 2. Those are outcomes from my initiatives, not a benchmark evaluating Vite+ with one other toolchain beneath an identical circumstances. Part of the acquire comes from what runs and which recordsdata it checks; you will not robotically get these CI occasions with a unique configuration.

For fast checks of modified recordsdata, I take advantage of vp staged and Git hooks managed with vp hooks. When totally different initiatives behave in a different way, vp toolchain exhibits me their lively variations. vp toolchain --global exhibits the worldwide set up. That’s extra helpful for debugging than my outdated technique: “I undoubtedly up to date it.”

There are two issues to tell apart in a monorepo. vp run executes a bundle.json script or a job outlined in vite.config.ts, and it might probably order work in accordance with workspace dependencies. Caching isn’t enabled robotically for bundle.json scripts. You can allow it with, for instance, vp run --cache construct. Tasks outlined in vite.config.ts are cached by default. I will not flip my CI timing right into a promise that vp run alone makes each construct quicker.

Where it received awkward

vp migrate ran on an older monorepo for about 4 minutes. It transformed my ESLint, Prettier, and unique tsup construct setup, and nothing broke in my case. That doesn’t suggest each migration takes 4 minutes. You have to check the end result with the outdated lint, exams, hooks, and construct output. Plugins and customized guidelines should want guide work.

Another lure is the distinction between a built-in command and a undertaking script. vp construct runs a Vite app construct. vp run construct runs the construct script from bundle.json or a job with that identify. In a Next.js undertaking, the agent should not assume vp construct replaces subsequent construct. The identical distinction applies to vp dev and vp run dev. Vite+ can work with different templates, however that does not change what these instructions do.

The third situation is model administration. The world vp env can handle Node.js and bundle managers. I’ve three initiatives on three Node variations, and it made switching simpler for me; if you do not need that, you possibly can flip it off with vp env off. vp improve updates the worldwide CLI, not the native vite-plus bundle in each undertaking robotically. I wrote that explicitly in my agent directions as a result of the command identify invitations the other assumption.

Who will get Vite+ in my first immediate

Anyone beginning a brand new Vite app with AI doing the setup. The price of standardizing is small right here: select one toolchain, put the verify instructions within the repo and CI, and the agent has a transparent path from a code change to verification. Across three weeks and 4 initiatives, the primary profit for me was that I ended explaining the fundamental instructions again and again.

I would not blindly migrate a big current app with a working construct and take a look at suite. For a framework with its personal construct, I’d first resolve which components of Vite+ I truly wish to use. And if I already had a effectively documented, quick, steady stack, the promise of “one command” alone would not persuade me to exchange it.

Next time you begin a Vite undertaking, put vp create within the first immediate and ask for the outputs of vp verify, exams, and the construct as a part of the definition of carried out. A screenshot of the completed app is sweet. Passing checks inform you extra.