Building Type-safe AI Applications - Nico Albanese, Vercel

So, I was trying to compete with Paul on the longest slide title, and I think I may have edged him out on that. But I'm really excited to be talking you to you today about how to build end-to-end type- safe applications on top of your agents. Um, I'm also very excited about this talk because this is something we haven't talked about a lot. We're usually focused on agent land. Um, so I'm hoping this is this is some new material for all of you guys. Um, so

before we start, can I get a show of hands for who's heard of the AI SDK? Yeah. Amazing. So, I guess I don't really have to give you guys the intro. Um, but I can say like the way that we call the AI SDK is a TypeScript toolkit for building AI agents and applications. And I'm really going to be focusing on the application side of things. So, back to the title of the talk. So, you've built an agent. Now what what happens once your agent is ready and it's behaving

exactly how you want it to? Let's say we've been iterating on this agent via simple TypeScript file um and we've probably run this command or some extension of it a million times but now it feels ready enough to share with others. But how do we package it up so other people can use it? Do we push the code to GitHub and just expect others to clone and run it? Probably not. I think the best way to share it is via the web and using the trusted chat interface we know and love

this application today three-phased approach and I forgot who said this but first we're going to make it work then we're going to make it right and then we're going to make it fast agent I would even if I may slightly alter these to be first we're going to make it work then we're going to make it maintainable and then we're going to make it delightful agent

demo because I've done those and I think everybody is really sick of the weather and travel agent uh demos. Uh so this is something that I've got running in production for me right now. Uh which helps solve a problem I have every day which is uh our team ships a lot and what good is a feature if nobody knows about it. So, uh, I need to have a way of or I spend a lot of time going from pull request to writing an X thread. Sounds kind of silly, but like it's important, I promise. Um, the agent will

take a pull request from GitHub and it will eventually spit out an X thread that follows our our brand voice and general format. I present to you social agent. Um, this is built with the new agent abstraction in AI SDK 6 and it's pretty simple. It basically just different human tools emphasis on working on top of it. As we're building this out for the web, I'm

using a framework that I know really well. But I do want to call out that AI SDK UI package has been designed to be extensible by default. So we ship first party support for React, Vue, Spelt, and Angular. And the community's even already built a solid JS package as well if that's your thing. But anyway, back to our application. We've got a standard next app here, and I've pulled in my social agent into an agent directory. I've also separated all of my tools into their own files in a tool directory. So,

our application, how do we call it? To do that, we're going to set up a route handler. This file will create a post request at API/Chat. We'll pull off the messages from the request body, call our agent, and then return a streaming response. Now, we need to actually build out our front end so we can actually send messages and receive responses from our use chat hook from the AI SDK. I think a