Use VS Code Agents, GitHub Copilot, and the MSSQL extension to build AI apps | Data Exposed

Key Takeaways

Hi, I'm Anna Hoffman and welcome back to Data Exposed. Today I'm joined again by Carlos and Carlos, you are becoming somewhat of a regular on Data Exposed. I'm so excited about it. So, welcome back. >> Yeah, thank you for having me again. Yeah, it's it's so exciting to have these opportunities to show a little of the cool things that you can do with AI with Microsoft SQL. So, really uh excited to show you what I prepared for for this episode. >> Amazing, cool. And so, just to give people a little teaser, like uh Carlos is obviously always on the cutting edge of what's happening in VS Code, in AI, with skills, etc., etc. And then how it all relates to Microsoft SQL. Um so, I think he's going to show us this new thing in the agent space, how he's building apps, how he's using Open Spec. I don't really know. I'm just going to pass to Carlos. So, Carlos, maybe you kick us off by telling us a little bit about your scenario. >> Yeah, so I have this app as you can see here from VS Code. And by the way, I'm using VS Code to show you my UI. So, you can do that using the built-in browser. So, this [clears throat] app is very simple. Um I reached this point by using plan mode and I'll go to that. But you see that it's just an app that it's empty at this point, right? That doesn't mean that I have nothing. So, if I go here, you can see that I have a plenty of stuff. It's a React app. But the way I built or reached this point by was by using plan mode. So, that's something we uh featured in one of the previous episodes already, like how you can create um a spec or a plan. So, all good. Uh so, as you can see, my app is very simple. It's a call for papers. >> [clears throat] >> As um a speaker, I'm always looking for opportunities on developer conferences. But sometimes the location is not good or sometimes the topic is not good for what I'm looking for. So, it's kind of problematic for me. So, I was like, "Yeah, maybe I can create an app with semantic search to help me with that." So, this is basically the result. So, uh it's a simple Next.js app that is going to use SQL Server vector search for the semantic search behind the scenes. Oh, by the way, this is running locally on my machine. Uh you see that it's using a here a dev container. So, I have all of them running locally. So, all these things And by the way, we'll include the link to the to the repo in the video description. You can uh the audience can replicate this. So, but yeah, local. Here's my tech stack, my database. I'm going to use um an ORM here. I'm going to use Prisma because I want to do uh genetic testing. I want to do uh type search. Uh no, I want to do safe type testing. That's a mouthful. Uh so, that's why I I went with Prisma. So, you see, here's my data model, seeding, and everything, right? Here's the core of the application. Here's how I'm using vector data types, vector search the for vector distance uh to give me the the the the results of my semantic search. But, you can see that my UI it's not done. So, I did like all the plumbing and everything. And I was like, "Okay, this is probably a good opportunity for me to explore ways to do this using an agent experience." And And for that, if we look at here, I'm using VS Code Insiders. We have this agent experience. So, this is fairly new. And I was like, "Okay, I want to try that. I want to uh focus on creating an agent experience for me to evolve my app, add all these pieces that are missing right now, and SQL will be right there." So, it it works. So, let me show you that. So, >> Before you show us, Carlos, a question for folks who are maybe never seen this open in agent experience, um how does it compare or what's been your experience comparing it to the the chat and comparing it to the more like CLI experience. >> It's I would say it's a hybrid or a combination of of everything. So, yeah, if I jump here, this is the UI. So, you mentioned something very important, the CLI. So, if I want, I can start a new session here. I can select CLI. I can select a local my local agent with VS Code. I can use Claude if I want to use something different. So, within VS Code, you can manage these identical experience that will give you access to your files, will give you access to your sessions. You see my sessions here, previous sessions. Access to your skills and everything. So, it's one-stop shop with all these things in the AI space. In my opinion, it's really good uh because I if I want to be hyper-focused on doing something not like working on multiple files and multiple things at the same time, this is it. This is the experience for me. >> Got it. That makes sense. And then I think the next question is like does it work with SQL? >> [laughter] >> That's an excellent question. Yes. Fortunately, yes. So, as I said, I have my app. I showed you the app was running and actually I can open the app from here. So, if I go here, I can show you that my app is running. My plumbing's there. My database is there. So, next step is to show you how it works, right? Uh so, for that, I am using Open Spec. That's an alternative to GitHub Spec Kit. It's very similar. In this case, for me, because it's a very simple app, I would didn't want to go with GitHub Spec Kit. Uh I have only one table. But, it's it's a good exercise because if I open here in the skills, you see that I have a few skills for Open Spec. That's basically the flow. So, I just start by exploring something. So, exploring means that I can ask questions about my project here. I can explore ideas. I can do troubleshooting. Um I think the core of this experience is to propose. So, with propose, I'm going to drop um and here in this agentic experience I'm going to drop a prompt that's going to summarize everything I want to do and it's going to generate a plan, it's going to generate a spec, a design, and a list of tasks that the agent is going to implement on my behalf. So, that's why this is a super like agentic experience and SQL is going to be a mirror there. Um and then once we have our plans and everything, I'm going to apply it. Once everything's applied, you can decide to archive because this is like feature-wise, so I'm going to be adding one feature that's going to be the semantic search. And that's it. And if I just to close an open spec, if I show you something, um let me go back here. And I showed you the plan, right? So, for open spec, I'm going to use an architecture, which is basically the evolution of my on my plan. So, a little bit more detail here, right? So, this is the search path, how I want the search to to happen, what are the files I want to use, I want to use the the query I showed you. Um here's the flow and how the data's going to be ingested. So, has a lot of details, right? And if I go back to the agentic here, and by the way, you can open that from here, but I wanted to show you the mermaid diagrams and everything. So, if I show you real quick the configuration, this is what open spec is going to do for me. So, basically I go for for papers, I want to evolve it, I want to use at the semantic search, my tech stack, it's the same thing. So, if you're familiar with GitHub spec kit, it's very very similar, but in this case, because the app is very simple, this is it. Uh lastly, let me show you the SQL because you asked me, "Hey, does does this work with SQL?" Yes, it does. So, here's the core of my application, here's like the the search I'm going to be using vector distance, vector data types, and whatnot. So, let's go ahead and use this. By the way, let me just zoom in a little bit. Let's close this up and let's zoom in a little bit. I'm going to select bypass approvals because I I feel like it's safe at this at this point because I'm going to be just creating the proposal. So, this is just files, right? So, here it is. I'm going to submit this prompt that is going to add the semantic search. Here's the the the all the summary I already have all my specs and everything created. And with that, we have to wait a little bit and give it a few a few seconds or sometimes minutes, depending on how complex it is, to go over. Yeah, read everything and give me the proposal. So, yeah, we have to wait, I guess, but yeah, the the end result We show the end result, which is going to be the task design and the specs. Awesome. And while this is running, this add semantic search UI, I noticed that you use hyphens between the words there. Is that because you're referencing like a specific file or what you want this kind of task to be called? Yeah, that's a an excellent question. This is going to be a folder. So, when you engage with the spec-driven development, you will be driving features. So, that's the name of the folder, that's the name of my feature, and within that folder, and we'll see that here on on this right-hand side that there will be new files that will get added into my open spec folder. So, I will expect to see here. Oh, there we go. It just happened. That's that's nice. So, here in changes, here's the semantic search and and here's like what is happening here. Let's see if we can see It's still working on it, but we'll see the task design. So, this is very structured. This is very very good because imagine you want to add more stuff, like more tables, more capabilities. You can have things on the scope of the features and be really well organized and look at the exact changes you are making and just make I would say design decisions based on that. >> That's fascinating and that's what you were talking about earlier now I kind of I kind of get it. Like this is changes at the feature level and then you can kind of examine them in isolation to a a sense or in a safe way then you apply them and then you can say oh I'm going to archive it because I'm not working on that feature anymore is that right? >> Once it's done yes. If you were happy with that you can archive it you can add more so you see that it's doing a lot of stuff so it's it's on the surface it looks simple but it is very intricated because it goes really deep and it gives you a good very good end result. That's what I am about to see here. Oh here's the proposal and everything. So yeah that's it. So we just give it a few minutes and we'll I guess we'll get back to see the end result. All right. So as you can see Anna it's done. My to-do here is exactly what I was saying that guy got a proposal to design the specs and the task created. On the right hand side this is what I really like about this agent experience is you can see that I can keep track of the changes. So all the files within the folder we discussed are here. So I'm good. I already did this be off camera multiple times so I'm I'm I'm sure this the result is going to be good. So I'm going to go ahead and drop another another prompt here really quick and this is the next step. Remember in the flow that I showed you we we we can explore we can propose but here's the apply. This is the the when we are going to take this design and everything and it's going to apply and show perform the changes I asked. And hopefully after this change is done we'll see the app and we'll try the app a little bit. All right, so it looks like we're done on the implementation. We have completed all the different tasks. So, if you remember, this folder was created to keep my feature in one single place. If I go and check tasks, you see that the different tasks that was proposed are done. So, all good. Um there is something very important here. You see that in this agentic experience, it's agentic, but at the same time it allows you to keep track of all the changes. I am uh especially interested to see what was made to the data The changes made to the database in in terms of the logic. So, we'll jump into that later, but let me show you the end result. So, let's take a look at my app really quick here. And um as you can see, it's basically the same UI and everything, but let's try something out. So, you see that I get in some certain recommendations. I'm going to go and check for agentic workflow for databases. So, let's try that. And with that, and we can go full screen here. With that, I get a list of events I can probably use to to submit my proposal. Uh it's all good. I have a matches and everything, but there's one problem here. Uh I don't know if you noticed, but it says that it's it's recommending Microsoft Build. So, at the time we're probably showing this recording or probably today is too too late, right? So, I cannot uh propose anything for Build anymore. So, how do I solve this problem? Um the problem is basically the logic behind the vector search and everything. So, what I can I do here? I can go close and and go back to my chat here to my session and say, "I just with simple words saying, 'Hey, this is not working for me because the call for papers is showing me events that already uh closed or past due. Help me modifying the SQL that's going to uh make that happen." So, remember the question you asked me in the beginning? Can like does this works with SQL? Yes, absolutely does. So, let's take a look and it looks like the change is done. It was very simple and there we go. So, let's see. Let's open this up and uh yeah, remember I showed you the vectors distance here and everything? I see a change. I see a change here. The change is the dates. So, it was extremely simple, something I didn't have to figure out. Let's go ahead and refresh the app and let's make sure this work. Right, so let me open the app once again. Let's ask for agentic workflow for databases. And now you see that the the results we're getting are are good. So, it was so simple. It was just a simple prompt. I asked the agent here to assist me making the change and now I have an opportunity to submit to events that are open. And a couple of things just to close out here. Remember this is agentic, it shows me all everything from here. I can simply click on the changes I ask and verify that this is using Prisma, it's using state safety for everything. Here's the query. But how do I can if I need to really explore more and understand the structure and everything, how do I do that? So, obviously we can jump back to VS Code here. And with the extension, we have plenty of options that you can use for that purpose. So, you see that I'm connected to my local container. Again, this is a dev container. I have containers running inside a container. So, I have these SQL Server 2025 running here. Here's my database and here's my table. Again, it's only one table, it's very simple. But just by clicking on the table, I open this this experience. From here, I can edit things, I can search for things. This nice like explorer, if you will, of my data also allows me to make changes here. Let's do a couple changes. Let's filter out everything. And let's just show something really interesting. And from here, um, you see that I selected unselected all the different columns. This is the same table, but if I want to be like super focused on something and work on a change or figure out if I'm missing something, I can use these filters. This is the embeddings. And this is the vector. Remember I did that off camera, but I never show you like, yeah, this is truly working and how it made those things. And if you have questions, obviously I can't use uh, here the um, the UI to open columns and then navigate from here, but if I really want to understand, let's say if this table has more relationships, by clicking on that button, it's going to open the schema designer on read only mode. That's very important. It's not um, read write. And with that, it's going to show me the table. And from here, let's say I have more tables, relationships, and whatnot, I will be able to understand that using this visual aid. Uh, right here, it's my table. You see my embeddings here. All good. So, uh, I guess that is the other question at the beginning, like can I do this with SQL? It's an agentic experience. I can ask questions. I can ask for modifications. All good. >> Yeah, so I think this has been awesome. I've learned a lot. I've seen a lot. I'm sure of yours have as well. Um, if you had to like close with like your final tips and tricks or kind of what we learned, like what what would you say? >> Yeah, uh, I actually have a nice slide uh, for that. So, this is what we did today. Let me show you that. So, here's the stacks. Let's start by understanding what we have. So, we have SQL Server 2025. I'm using vector data types. I'm using vector distance. All these things combined with my local model running here for my embeddings, I'm using a llama, Prisma as my ORM because I want to have type safety. Behind the scenes, I have a lot of testing, and that makes sure that the data types are correct, everything is correct. I can use the extension as I show you to verify different things. Or if I want to design the schema, obviously I use GitHub Copilot in combination with Open Spec. And the goal here was to create a goal for speakers, very simple app, and I get there just by using a spec excuse me, by using a plan. So, I use GitHub Copilot plan mode. I define my architecture and everything else. But then I realized that I have an opportunity to use an agentic experience by using Open Spec and come up with a more structured plan that allows me to evolve my application in a well-organized manner. And then I propose the changes. I apply the changes. We did the first search, remember? It didn't work as expected. Then we made a change using GitHub Copilot in agent mode. That agentic experience in combination with SQL made a change to the query, and I show you like, yeah, the data is there. I use the schema designer read-only to show you table. We rerun the the the the search. It worked. Um so, yeah, I guess that's it. That's all the things I show you today. >> Quite a few things. Carlos, awesome to have you on the show as always. You always wow me and AI wows me, and so it's awesome to see the new agentic experience and also that it works with SQL and how it integrates with the MSSQL extension in VS Code. So, thanks so much. To our viewers, if you like this episode, go ahead and give it a like, leave us a comment, let us know what you think. We'll put some links to the in the description so you can learn more, try out the sample, try it yourself. And we hope to see you next time on Data Exposed. >> Hey.