[00:00] So LLMs are really great at generating code basically, but the problem is usually the predictability. So in this setup here, I want my libraries that I create here to have a certain structure and a certain setup with how the package jsons are being created, how the project TypeScript files here, the TS configs are being linked together, in this case, for instance, using TypeScript product references. And I want to have that consistent setup. I might even have a custom scaffolding mechanism how these libraries should be created in my code base. Now, in this case, I'm using NX here and an NX monorepo.
[00:35] And NX has generators. However, you just manually need to trigger them by hand right so you can write something like NX generate and then you have NX react lib and then basically you give it a library name and you generate with that. But what if you could combine this with a cursor based interaction where I guide through, I discuss some feature that I want to implement but then have Cursor actually go do that, but using my predictable setup of such a new library. Now in this case I already pre-set up this workspace, so I have this NX console installed, which comes with an MCP server exposing some of these capabilities from NX to cursor and to your AI system. And so let's have a look here by implementing a new feature into our orders.
[01:22] So don't generate anything, let's just first brainstorm and discuss an implementation of a new feature. I basically want to create a new library, a new project for canceling orders. So it should manage all the process of identifying the order and then canceling it. Where should I implement that in the current workspace structure? So here it uses a bunch of tools from NX to first understand what the workspace structure looks like.
[01:52] So it understands these different domains, these different types of libraries and naming conventions. And this comes from the knowledge that this MCP tool exposes basically to cursor at this point. And there it goes, we should create such a feed cancel order as a new feature library, which looks good to me. Okay, this looks good to me, create such a feature library which should be React based. Don't implement anything else, just create the setup and link it properly into the workspace.
[02:22] And so now it goes and calls these NX generators to understand what are the current generators that are available in this workspace. This comes from NX, generators are basically code scaffolding utilities for specific packages and for specific technologies and so here it figures, okay, it should use the React generator and so it tries to run that one. The way this is implemented is that it opens up the NX generate UI, which allows you to further customize potentially the settings. So it can here verify is the directory the correct one, the name the correct one, do I want to change something? I'm good.
[02:59] I'm just generating that. And so here you can see now it is set up. Okay the library has been created just follow with the next steps. Link it properly into the workspace and so basically we now have a library which is in a predictable setup because you can see here we just have the index.ts setup, we have a very clean package.json that follows our naming convention. It also has the proper tags on it.
[03:23] And so now basically I'm just telling cursor, well, now use this one here and link it properly. And so here, in fact, it understands based on the patterns of current feature libraries, it should probably connect to data access order and UI order detail, because the UI order detail here is meant to have all the UI specific components that I might be wanting to use within this order domain. And so if you go in here, you can see now that feature cancel order has been linked to data access order and UI order detail. And it does basically a bunch of sanity checks whether the setup has been done properly. All right.
[04:00] And now if we kind of show the product graph here, you can see that we have this new canceled order, which is linked to the data access order and the UI order detail.
