Mi stack tecnológico para crear AI tools y mvps

React

I considered other options, such as Vue or even Svelte, but:

• None of those had - by far - the community that React had (although today I am not very convinced that’s a advantage, ‘cause some times is harder to differentiate noise from signal in the react environment)

• React was more stablished, and didn’t seem like they were giving up on updates to make it better

• Knowing React would open the doors for other platforms, such as mobile (React native). Although, again, today I would probably use Capacitor for a quick mobile app mvp

Today I am super happy with me decission (but I can’t say I don’t feel super curious for Svelte)

Nextjs

This was a bit of a bet when I was starting, because it wasn’t as “dominant” as it is today.

Nextjs a full stack framework, and allows me to develop front and backend in the same repo, something that is pretty convinient and ergonomic if you are making custom ai tools that don’t necesarily required micro services architectures whatsoever.

Nextjs also comes with other tools and helpers that, not only makes my development process better, but also helps my apps (when properly done) be served surprisingly fast, which is pretty good for SEO.

Tanstack Query

If you try to create a hook to fetch data through an async operation, there are lots of things you need to take care of:

• Loading states

• Error states

• Race conditions

• Cache invalidation

• Pending request cancelation (I don’t know the official name for this…)

Tanstack query (formerly React Query), does that and more in a few lines of code.

But for me that’s not the main benefit!

At least in my case, the user of tanstack query gives my queries and mutations some structure / patter to follow and mental model, so I don’t need to reinvent the wheel every time.

Next Safe Actions

I am surprised that this is still necesary, but anyway…

Next Safe Actions acts as a HOF for server actions that provides, among others:

• Input / Output schema validation

• Middleware

Once it’s setup, it makes our server actions more robust, and succint, since you can - for example - check for auth in the middleware instead of writting it on every action.

I am aware that this could be easily done with code, but NSA works very well, it’s not heavy and I expect the Nextjs team will eventually provide similar functionality built-in

BetterAuth

After using NextAuth for a couple of apps, I switched to BetterAuth. Today NextAuth is part of BetterAuth (I think they acquired them?), so I guess that was a good call.

BetterAuth is a fantastic auth library, with a strong core and easily extendable through its plugin system.

Prisma

I wasn’t sure about the best database (postgress vs mongo) to use for my apps, and Prisma does a very good job abstracting that away, while still giving me enough room to “check the insides” whenever I need.

It felt a bit clunky because of all the “rust client” build required, but since last version that is no longer required and the client is done in typescript. So even better types, top performance (if you know what you are doing), and versatility to go with the database you want without modifing too much the api.

I have dabbed with Drizzle, and I eventually will want to try it on production, but they are now working on v.1.0, and when it’s release I feel no need to be one of the early adopters. So, I will probably stay in prisma for a while.

Shadcn + Radix

This guy took the web develoment world by storm creating a “pseudo library” based on Radix. Basically, you can “copy paste” his components (you don’t need to though, there is a very nice CLI!) and modify them as you wish.

Interestingly, ShadcnUI ended up being more known than Radix itself (who did most of the heavy lifting, to be fair!), and Radix today has some alternative (Radix themes), although they don’t follow the same pattern as Shadcn: it’s just a library whose code you are not expected to modify. Honestly, I wish they had follows a shadcn approach instead!

Anyway… the Shadcn guy ended up being hired by Vercel, and ShadcnUI “library” is getting better and better.

Next-Intl

My go-to library for location. I have researched a ton, and this is the one I like the most:

• Works with Nextjs out of the box

• Integrates well with helper editor extensions lik i18n ally

• Does not depend on external services (you can host your dictionary files locally within your codebase)

I only wish it had some string extraction mechanism, but I know they are on it!

Tailwind

Not much to say. I guess a “purist” would prefer to have it’s css in a different file but…I prefer to have in the same file as my elements so I can “design” without moving back and forth to css and tsx files. And if you are worried about having tailwind all over the place and that annoys you, get the “Tailwind Fold” extension, and you will ony see it when needed :)

AI SDK

Last couple of years, a lot of “definitive ai library / framework” claims have been done.

I have used several of them, and intensively used Langchain. It did the trick for a while, but as AI models incorporate certain features natively, the complexity that langchain brought to the stack was less and less necesary. In my opinion, it’s also a bit to abstract.

For simple tools, I know stick to AI SDK. For complex tools, I may either code a solution myself leveraging the AI SDK features, or go back to langchain if that’s gonna save me (or the client) a lot of time (or money).

For example: A client asked my to create a AI assistant that was able to ingest and understand

Puppeteer

Puppeteer give you programmatic control over a headless (or full) Chrome browser so you can navigate pages, take screenshots, click buttons and basically do everything a “human” would be able to do in a website.

Learning how to use it was - to say the least - an interesting process, specially in a case where I need several instances running in parallel that need to be properly rotate after certain uses.

Thanks to using Puppeteer, I learnt to use tools such as btop and got a better understanding of processes and garbage collection :)

Other tools I use

• Cursor: obviously

• Basehub: super nice CRM, used in this same website!

• Posthog: As they put it “Product OS”. Today an essential tool for me, specially in the fist phase of any project.

I will keep this post updated whenever I find a relevant change in my stack 😊go