I Wish This Was Better
WDWeb Dev Simplified@WebDevSimplified · 1.8M subscribers
- Views
- 13.7K
- 13,695
- Outlier
- ×0.3
- Median 47.5K
- Length
- 10:24
- Published
- Jul 21
- Tuesday
- Comments
- 40
- 302 likes
Script
How it's written
- Words
- 2,685
- Words a minute
- 257
- Reading time
- 12 min
- Segments
- 8
The hook
0:00–0:25Tanstack intent is a relatively new library from Tanstack, whose intent, pun definitely intended, is to make it so it's easier to sync up versions of the library you have installed with the skills files associated with that library that you use for your agent. So right now you install a library, and then you go to some other site to install the skills for that library, and making sure those both reference the same version can be incredibly difficult. The idea behind Tanstack intent is to get rid of that, so that
Structure
Tanstack intent is a relatively new library from Tanstack, whose intent, pun definitely intended, is to make it so it's easier to sync up versions of the library you have installed with the skills files associated with that library that you use for your agent. So right now you install a library, and then you go to some other site to install the skills for that library, and making sure those both reference the same version can be incredibly difficult. The idea behind Tanstack intent is to get rid of that, so that way the skills are bundled with the library. This is a great idea in theory, but I think it falls short in many places, and in this video I'm going to show you how you can use this Tanstack intent both as a library maintainer and as a consumer of libraries, and I also want to show you why this actually falls short and what you can do instead at the end of this video to avoid having to do any of this stuff with Tanstack. Welcome back to Web Dev Simplified. My name's Kyle, and my job is to simplify the web for you. And for this I want to get started with how do you use this as a consumer, cuz that's probably how most people will use this. And it's relatively simple, there's not very many steps. The very first step is you run the install command, so you just take this command, copy it over, we're going to paste that into our terminal, and immediately you're going to notice something interesting. This install command is actually just a prompt that you send to your AI to do this for you. And this is not something that should be a prompt at all in my opinion, because for the most part all it does is it looks in your node modules for skills, and then it writes those skills into an agent MD file. So I've already actually run this prompt with an AI, and I've downloaded a bunch of libraries that support this, and you can see all it does is it adds this section directly into my agent MD file, and all it does
Watch from 0:00is it essentially says, "Hey, when you want to do this task, use this particular skill inside of the library." And all of this is done through that Tanstack intent library. You can see it runs that library to load those skills. So inside of my node modules, there's going to be files that look like this, which are skill files that reference all the stuff that it needs, but they're inside node modules, so I don't have access to those outside node modules, and it's trying to glue those together with this agents MD. Now I personally think this is not a good way to do this. First of all, you're polluting your agent's MD with a bunch of these different references. And for example, if my skills in that node modules change, or they added or removed, this agent's MD does not get updated. I need to make sure I manually rerun all these commands to update this every single time. And since it's using an LLM, which is a non-deterministic way of doing this, it's very easy for this to become out of sync or incorrect in various different ways. I think it would be much better if they just essentially looked inside of your node modules, found the skills, and copied them out into a place that is accessible inside your project, instead of having to use this like agent's MD workaround. Because that's really all this is doing. There's a few additional things that this is doing. For example, it's trying to scan your repository and figure out how you use these libraries to put that into your different sections here. But I personally don't think that's something that really needs to be done by this library. And it's something that you should do yourself instead, since you know when you want to use various different skills. Also, this doesn't actually work like normal skills.
Watch from 1:31Normally, when you use a skill, it's loaded into your actual agent, and your agent knows those skills, has access to them, and can reference them. But now, with this, you have two places skills are referenced. They're referenced here in this agent's MD file, and they're referenced like normal skills everywhere else in all of your agents. So, for example, if I were to actually go ahead and try to open up, for example, the sandbox that I have inside of this system. And if you want to learn more about how you can set up a sandbox, I'll link a full video in the cards and description for you. You can see I have no skills at all inside this sandbox being referenced, cuz all of them are in my node modules, and all of them are in this agent's MD file right here. So, it's a little bit more confusing to work with, cuz I can't reference these skills directly inside of my agent. Now, if I do want to load a skill, I have to manually do it by using this library. You can see I can run this command and pass it the actual skill I want to use, and this will manually load the skill for me. But this is not very user-friendly or intuitive, cuz there's no auto-complete or anything like that. And overall, I just think it's a much more difficult system to work in. Now, they also claim down here that keeping your skills up to date is easy, because when you update the library, that ships the new skill file, so everything's up to date. But, the problem is, what happens if a new skill is added or a skill is removed and so on? Those don't automatically show up in your skills list, and the reason for that is because this is generated by an AI me when you run it, and it doesn't get updated unless you regenerate this code again. So, it doesn't really automatically update. You need to make sure you manually update to take into account new skills or removed skills or changed skills. For example, some of these descriptions or names may change.
Watch from 2:52Another huge potential problem I see with this is how easy it is to inject malicious code into this skill section. Let's say I want to hack a library and I want to add malicious skills into that. What I could do is I could hack that library. It doesn't matter how popular or unpopular it is. I could put the skills in it in the same format that TanStack expects. And now, whenever someone runs this command to add all these different things, it's going to go through and it's going to find those malicious ones. And if I don't like manually catch that when I'm letting the AI run, it's going to put these inside of here. And now, that malicious skill is going to be potentially loaded by my AI when I run other tasks, which could cause potential problems. That's again why I sandbox everything when I'm doing AI. And again, if you want to see a full video on that, I'll link it up in the cards and description for you. So, what is my solution to this particular problem? Well, there's one very, very easy solution, in my opinion. I think we should still be packaging skills directly inside node modules. That way, when you release a new version of the package, the new skill gets brought in and everything stays in sync. But, I don't think we should be using this kind of hacky TanStack way to try to sync these things together. Instead, I think you should just reference the skills directly from the node modules for the explicit libraries you want. This solves all the problems. We no longer have to copy and paste everything. Everything works like normal skills. And you are explicitly only allowing the skills that you want. That way, you don't have malicious skills automatically loaded.
Watch from 4:15And this is super simple to do. I'm going to show you how to do it with the Pi editor, but you can do it with pretty much any agent out there that you want to work with. I just find Pi is the most enjoyable. And actually, if you want to learn more about Pi, I have a full cheat sheet on it you can get. It's going to be linked down in the description for you. It's entirely free to use. But, all you need to do is just create a folder called dot pi and inside that folder create a settings.json and then you can just link it directly to the actual place where those skills are stored. So for example, I'm linking inside my node modules. I'm going to at TRPC so I can find TRPC inside of here. You can see I'm looking at both these folders, client and server and you can see inside client there's a skill section and if I look inside server, you can see there's a skills folder. So it's automatically able to find those for me and doing the exact same thing for follow. It's also finding the skills for that and actually I have a full tutorial on follow. I think it's an amazing tool. It'll be linked in the cards and description for you. But once I have that file and I save that file, I can restart my sandbox environment and you're going to see it's automatically going to pull those skills in. Look, right here I have every single skill directly from those sections. Now it looks like I have a little bit of an error. It's reading this read me as a skill instead so I can just come in here and say slash skills. That way it only loads from that particular section and let's just do a quick reload here. That way it'll fix that particular problem. But as you can see, I now have those skills. I can run that follow skill directly inside of here and anytime that my code updates, it doesn't matter cuz it's referencing the actual source of truth instead of being copied over and moved around. It's directly referencing the source of truth. There's no third-party libraries I need. Everything is just handled automatically for me by writing one single configuration file and pretty much any agent harness you use has the ability to do this. It's just super
Watch from 5:30simple with pi cuz it's one single JSON file. So this solves essentially the consumer side of things. But how do we go about making sure that we write the correct skills when we're a maintainer of a library? Well, TanStack also thinks that they know how to do this with their TanStack Intent and it has some really good things and also some not so good things. So for example, there's this NPX TanStack Intent at latest scaffold and if we were to run this command, again, you'll notice something very interesting as soon as I try to run this and as soon as it just outputs a bunch of markdown again, you're meant to be using this with your agent. Now I'm okay with this in this regard because it's essentially scanning through all your code and trying to figure out the best skills to create for your code. So this is a good starting point for you. Now there's a few very opinionated things about this that I don't think everyone wants. For example, it sets up GitHub issues specifically with labels, so there's labels in your GitHub that it sets up specifically for this, so that may not be something want you want. And it also goes through and it makes sure that it adds different like keywords and so on inside your package.json. If we take a look inside of here, you'll notice if I scroll all the way to the very bottom, you can see that adds these different keywords inside of here for TanStack Content, and it also creates these different artifact files, which again you may or may not want, but they do help with creating these skills for you, and it'll automatically go through and create these skill files with all the information inside them that you want, and then you can go ahead and further tweak it. So, I think this is a good use case for AI in particular, but I don't know if it necessarily needs to be an NPM command. First of all, it could just be a copy-paste prompt. And again, it's something that you may want to fine-tune more yourself and not have these opinionated things such as GitHub labels automatically being added to your repo.
Watch from 7:00Now, another thing I'm not a huge fan of is how sometimes these actually don't really follow the best practices and the open source standard for skills. For example, if I were to go to the skills that were generated for TanStack DB, you can see here that it is naming things without using a dash in the name. It should be using a dash here instead of a slash like this because that is not in the standard, and also the way that it structures these in the node modules. So, if we actually take a look at the DB skills off to the side, it's also not really structured super great. We kind of have this like root skill here, which is normally your main skill, and then inside of there you would have a reference files, but instead they're creating a bunch of different sub skills, which again I don't think is great. And the way the descriptions are set up inside of these is super not useful cuz it's essentially just a description of what's inside of the skill as opposed to to a reason why you would actually want to use this particular skill. This one's great cuz it does have references, but again it's inside of like a sub skill with a bad name and a bad description right here. And the descriptions that are being generated inside that agents.md are again descriptions that are maybe not the most useful for the AI to know what to actually do. So, in my opinion, I think that TanStack Content has a great idea of you should ship your skills directly with your node modules package, that makes it easy to work with, but I think the easiest way to consume those skills is not trying to copy-paste them between your agents and hoping that keeps in sync because we all know that documentation always goes out of sync with the actual code one way or the other. I think it's much better just to set up some type of settings file to directly reference the skills you actually want to use and those will be pulled into your project. That will help you with safety from malicious packages and it'll also give you a much safer guarantee that everything stays in sync
Watch from 8:27cuz you're referencing the source of truth instead of trying to reference something that is referencing the source of truth where you might have some problems in that middleman between the two. Now if you're worried about security, you definitely want to learn how to set up sandboxed environments and I'll link a video on that right over here. And also, if you want to learn more about how to use the pie agent, which I think is an absolutely amazing agent, I'm going to link a video right over here for that. And I have a full cheat sheet on all the keyboard shortcuts and everything you need to know. That's linked in the description and it's entirely free. With that said, thank you very much for watching and have a good day.
Watch from 9:57Full transcript
- 0:00
Tanstack intent is a relatively new library from Tanstack, whose intent, pun definitely intended, is to make it so it's easier to sync up versions of the library you have installed with the skills files associated with that library that you use for your agent. So right now you install a library, and then you go to some other site to install the skills for that library, and making sure those both reference the
- 0:20
same version can be incredibly difficult. The idea behind Tanstack intent is to get rid of that, so that way the skills are bundled with the library. This is a great idea in theory, but I think it falls short in many places, and in this video I'm going to show you how you can use this Tanstack intent both as a library maintainer and as a consumer of libraries, and I also want to show you why this actually falls short and what you can do instead at the
- 0:41
end of this video to avoid having to do any of this stuff with Tanstack. Welcome back to Web Dev Simplified. My name's Kyle, and my job is to simplify the web for you. And for this I want to get started with how do you use this as a consumer, cuz that's probably how most people will use this. And it's relatively simple, there's not very many steps. The very first step is you run the install command, so you just take
- 1:02
this command, copy it over, we're going to paste that into our terminal, and immediately you're going to notice something interesting. This install command is actually just a prompt that you send to your AI to do this for you. And this is not something that should be a prompt at all in my opinion, because for the most part all it does is it looks in your node modules for skills, and then it writes those skills into an agent MD file. So I've already actually run this prompt with an AI, and I've
- 1:23
downloaded a bunch of libraries that support this, and you can see all it does is it adds this section directly into my agent MD file, and all it does is it essentially says, "Hey, when you want to do this task, use this particular skill inside of the library." And all of this is done through that Tanstack intent library. You can see it runs that library to load those skills. So inside of my node modules, there's
- 1:44
going to be files that look like this, which are skill files that reference all the stuff that it needs, but they're inside node modules, so I don't have access to those outside node modules, and it's trying to glue those together with this agents MD. Now I personally think this is not a good way to do this. First of all, you're polluting your agent's MD with a bunch of these different references. And for example, if my skills in that node modules
- 2:04
change, or they added or removed, this agent's MD does not get updated. I need to make sure I manually rerun all these commands to update this every single time. And since it's using an LLM, which is a non-deterministic way of doing this, it's very easy for this to become out of sync or incorrect in various different ways. I think it would be much better if they just essentially looked inside of your node modules, found the
- 2:24
skills, and copied them out into a place that is accessible inside your project, instead of having to use this like agent's MD workaround. Because that's really all this is doing. There's a few additional things that this is doing. For example, it's trying to scan your repository and figure out how you use these libraries to put that into your different sections here. But I personally don't think that's something that really needs to be done by this library. And it's something that you
- 2:45
should do yourself instead, since you know when you want to use various different skills. Also, this doesn't actually work like normal skills. Normally, when you use a skill, it's loaded into your actual agent, and your agent knows those skills, has access to them, and can reference them. But now, with this, you have two places skills are referenced. They're referenced here in this agent's MD file, and they're referenced like normal skills everywhere
- 3:05
else in all of your agents. So, for example, if I were to actually go ahead and try to open up, for example, the sandbox that I have inside of this system. And if you want to learn more about how you can set up a sandbox, I'll link a full video in the cards and description for you. You can see I have no skills at all inside this sandbox being referenced, cuz all of them are in my node modules, and all of them are in this agent's MD file right here. So, it's a little bit more confusing to work
- 3:26
with, cuz I can't reference these skills directly inside of my agent. Now, if I do want to load a skill, I have to manually do it by using this library. You can see I can run this command and pass it the actual skill I want to use, and this will manually load the skill for me. But this is not very user-friendly or intuitive, cuz there's no auto-complete or anything like that. And overall, I just think it's a much more difficult system to work in. Now, they also claim down here that keeping
- 3:47
your skills up to date is easy, because when you update the library, that ships the new skill file, so everything's up to date. But, the problem is, what happens if a new skill is added or a skill is removed and so on? Those don't automatically show up in your skills list, and the reason for that is because this is generated by an AI me when you run it, and it doesn't get updated unless you regenerate this code again. So, it doesn't really automatically
- 4:07
update. You need to make sure you manually update to take into account new skills or removed skills or changed skills. For example, some of these descriptions or names may change. Another huge potential problem I see with this is how easy it is to inject malicious code into this skill section. Let's say I want to hack a library and I want to add malicious skills into that. What I could do is I could hack that library. It doesn't matter how popular
- 4:28
or unpopular it is. I could put the skills in it in the same format that TanStack expects. And now, whenever someone runs this command to add all these different things, it's going to go through and it's going to find those malicious ones. And if I don't like manually catch that when I'm letting the AI run, it's going to put these inside of here. And now, that malicious skill is going to be potentially loaded by my AI when I run other tasks, which could
- 4:48
cause potential problems. That's again why I sandbox everything when I'm doing AI. And again, if you want to see a full video on that, I'll link it up in the cards and description for you. So, what is my solution to this particular problem? Well, there's one very, very easy solution, in my opinion. I think we should still be packaging skills directly inside node modules. That way, when you release a new version of the package, the new skill gets brought in and everything stays in sync. But, I
- 5:09
don't think we should be using this kind of hacky TanStack way to try to sync these things together. Instead, I think you should just reference the skills directly from the node modules for the explicit libraries you want. This solves all the problems. We no longer have to copy and paste everything. Everything works like normal skills. And you are explicitly only allowing the skills that you want. That way, you don't have malicious skills automatically loaded.
- 5:30
And this is super simple to do. I'm going to show you how to do it with the Pi editor, but you can do it with pretty much any agent out there that you want to work with. I just find Pi is the most enjoyable. And actually, if you want to learn more about Pi, I have a full cheat sheet on it you can get. It's going to be linked down in the description for you. It's entirely free to use. But, all you need to do is just create a folder called dot pi and inside that folder create a settings.json and then you can just link it directly to the actual
- 5:52
place where those skills are stored. So for example, I'm linking inside my node modules. I'm going to at TRPC so I can find TRPC inside of here. You can see I'm looking at both these folders, client and server and you can see inside client there's a skill section and if I look inside server, you can see there's a skills folder. So it's automatically able to find those for me and doing the exact same thing for follow. It's also finding the skills for that and actually
- 6:13
I have a full tutorial on follow. I think it's an amazing tool. It'll be linked in the cards and description for you. But once I have that file and I save that file, I can restart my sandbox environment and you're going to see it's automatically going to pull those skills in. Look, right here I have every single skill directly from those sections. Now it looks like I have a little bit of an error. It's reading this read me as a skill instead so I can just come in here and say slash skills. That way it only
- 6:33
loads from that particular section and let's just do a quick reload here. That way it'll fix that particular problem. But as you can see, I now have those skills. I can run that follow skill directly inside of here and anytime that my code updates, it doesn't matter cuz it's referencing the actual source of truth instead of being copied over and moved around. It's directly referencing the source of truth. There's no third-party libraries I need. Everything is just handled
- 6:53
automatically for me by writing one single configuration file and pretty much any agent harness you use has the ability to do this. It's just super simple with pi cuz it's one single JSON file. So this solves essentially the consumer side of things. But how do we go about making sure that we write the correct skills when we're a maintainer of a library? Well, TanStack also thinks that they know how to do this with their TanStack Intent and it has some really
- 7:13
good things and also some not so good things. So for example, there's this NPX TanStack Intent at latest scaffold and if we were to run this command, again, you'll notice something very interesting as soon as I try to run this and as soon as it just outputs a bunch of markdown again, you're meant to be using this with your agent. Now I'm okay with this in this regard because it's essentially scanning through all your code and trying to figure out the best skills to
- 7:34
create for your code. So this is a good starting point for you. Now there's a few very opinionated things about this that I don't think everyone wants. For example, it sets up GitHub issues specifically with labels, so there's labels in your GitHub that it sets up specifically for this, so that may not be something want you want. And it also goes through and it makes sure that it adds different like keywords and so on inside your package.json. If we take a look inside of here, you'll notice if I
- 7:56
scroll all the way to the very bottom, you can see that adds these different keywords inside of here for TanStack Content, and it also creates these different artifact files, which again you may or may not want, but they do help with creating these skills for you, and it'll automatically go through and create these skill files with all the information inside them that you want, and then you can go ahead and further tweak it. So, I think this is a good use case for AI in particular, but I don't
- 8:16
know if it necessarily needs to be an NPM command. First of all, it could just be a copy-paste prompt. And again, it's something that you may want to fine-tune more yourself and not have these opinionated things such as GitHub labels automatically being added to your repo. Now, another thing I'm not a huge fan of is how sometimes these actually don't really follow the best practices and the open source standard for skills. For example, if I were to go to the skills
- 8:36
that were generated for TanStack DB, you can see here that it is naming things without using a dash in the name. It should be using a dash here instead of a slash like this because that is not in the standard, and also the way that it structures these in the node modules. So, if we actually take a look at the DB skills off to the side, it's also not really structured super great. We kind of have this like root skill here, which is normally your main skill, and then
- 8:57
inside of there you would have a reference files, but instead they're creating a bunch of different sub skills, which again I don't think is great. And the way the descriptions are set up inside of these is super not useful cuz it's essentially just a description of what's inside of the skill as opposed to to a reason why you would actually want to use this particular skill. This one's great cuz it does have references, but again it's inside of like a sub skill with a bad name and a bad description right here.
- 9:18
And the descriptions that are being generated inside that agents.md are again descriptions that are maybe not the most useful for the AI to know what to actually do. So, in my opinion, I think that TanStack Content has a great idea of you should ship your skills directly with your node modules package, that makes it easy to work with, but I think the easiest way to consume those skills is not trying to copy-paste them between your agents and hoping that
- 9:39
keeps in sync because we all know that documentation always goes out of sync with the actual code one way or the other. I think it's much better just to set up some type of settings file to directly reference the skills you actually want to use and those will be pulled into your project. That will help you with safety from malicious packages and it'll also give you a much safer guarantee that everything stays in sync cuz you're referencing the source of truth instead of trying to reference
- 10:00
something that is referencing the source of truth where you might have some problems in that middleman between the two. Now if you're worried about security, you definitely want to learn how to set up sandboxed environments and I'll link a video on that right over here. And also, if you want to learn more about how to use the pie agent, which I think is an absolutely amazing agent, I'm going to link a video right over here for that. And I have a full cheat sheet on all the keyboard shortcuts and everything you need to know. That's linked in the description and it's entirely free. With that said,
- 10:22
thank you very much for watching and have a good day.
Description
SponsorFREE Pi Cheat Sheet: https://webdevsimplified.com/pi-cheat...
Tanstack’s newest Intent library is a great idea, but unfortunately it is poorly executed to the point that I think it is actively harmful. In this video I cover how this library works, and more importantly I show I would fix this library to make it actually useful.
📚 Materials/References:
SponsorFREE Pi Cheat Sheet: https://webdevsimplified.com/pi-cheat...
🌎 Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:52 - How To Use As Consumer
01:56 - The Problems With Tanstack Intent
04:54 - The Solution
07:10 - How To Use As A Library Author
#TanstackIntent #WDS #Tanstack
More from Web Dev Simplified
×2244:57The Best Local Agentic Coding Workflow (Complete Guide)
Web Dev Simplified1.1M views
×9.72:10Please… I Need Your Help
Web Dev Simplified459K views
×6.91:15:25The Ultimate MCP Crash Course - Build From Scratch
Web Dev Simplified327K views
×4.925:15I Will Never Use Prettier or ESLint Again
Web Dev Simplified231K views
