Transcription
I build this AI developer dashboard using Nex.js16 with MCP integration. NextJS16 just got released with built-in MCP server. The dashboard has AI assistant. When I asked what is the settings hit ratio, it used the MCP tool to get relevant answer. And I'm going to take you through step by step how you can build MCP server in Nex.js JS from scratch step-by-step tutorial and I will provide the code in the description below.
Nex.js being one of the top preferred language for building website and apps by using all of this inbuilt MCP features. I was able to build this tool which can analyze for errors when provided with your Nex.js application. It can inspect your routes, cache hit ratio, average response time, performance metrics directly integrated with your AI chatbot. Also, I'll show you my workflow in regards to building application, testing those application while I build and fixing the application based on the test results and keep the loop going with automated test. That's exactly what we're going to see today. Let's get started.
There are loads of new updates for NexJS16 version such as cache components, proxy, DX and much more. But I am interested in MCP and I'm going to show you exactly that. So two things to know what is Nex.js and what is MCP? Next.js is one of the popular JavaScript framework for application development. It is same like Laravel for PHP and Django for Python. Rather than building our application from scratch, this gives us templates for us to build from.
Before MCP, we need to create unique API for LLM to access. But after MCP, LLM can automatically identify the list of tools available and interact with these API endpoints. Without MCP, it's a manual process. after MCP LLM identifying these tools are automatic.
So how to get started? First I'll show you basic setup then I'll give you a real world example and how I'm going to test that application in my workflow. Installing next app is just this one line of command. Just add that in your terminal which you can find from your computer and then click enter. That will install all the required package to enable MCP in next.js config. create a file called next.config.ts. So here is the file which I have created and I'm enabling the MCP server by saying MCP server equals true.
Step number three, create your first MCP endpoint. So it is just a route that is the endpoint. So whenever you call your endpoint such as localhost/ API/hello, this is what gets returned. So this is just a basic application and then we'll see advanced application. So to test your endpoint just run npm rundev then go to this URL then you will see the response. So that's the first mcp endpoint.
Next we are going to add AI. So install these packages by running this command in your terminal as before and that will get installed. Now step number six you need to tell AI about the list of tools available. So we created a hello world tool and that is available in this endpoint. So we are providing a description get a hello message from the server and the response comes from this endpoint. That's it. So here is the name of the tool. So now we ask AI get a hello message then automatically AI knows that a tool exists here and it'll get the response from this endpoint and return it back to the user. So MCP is nothing but a wrapper around the API endpoint.
And step number seven we are actually creating a AI assistant. So we are using AI SDK open AI and we are using GPT4 mini model and in there we are providing the tools MCP tools. So these are the tools which was listed at the top what we just created the hello message tool. Step number eight create a user interface for the chatbot and finally add your open AI API key in your environment file. Then you are ready to test your MCP.
That is a quick overview but now we are going to create a full-fledged application. NextJS MCP server exposes your application to some internal tools such as accessing realtime application state and runtime query page metadata routes rendering retrieve built errors runtime errors inspect server actions before next.js MCP server you need manual debugging to understand next.js JS code but after next MCP server you can just ask question to the AA chatbot and that can automatically debug the issues which is present in the code and return back the response.
So behind the scenes of this the first portion is called the MCP client that's where you ask question and the later part is the MCP server which contains the built-in tools such as route understanding tool error analysis tool. That is built within Nex.js but if you want to add custom tools this is where you add your custom tool. Everything else remains the same. For now we are going to use built-in tools.
So I'm going to extract these information from those tools and put it as a dashboard and rather than us manually going through all the data I'm going to ask a chatbot to explain me. So I'm using Vinsurf. I copied this whole page and then added here and I asked Vinsurf to come up with some ideas using the latest feature that is MCP and it proposed AI powered developer dashboard which uses those functions to get data. It also gave me the project overview, technical stack, list of MCP tools to create and the steps involved in building that application. Then I said create it based on the above information and then it started creating all the required files and the application is ready. So here is the endpoint which it created. So we're going to view that. So copying the URL and this is the endpoint which I'm viewing. So it's all working.
First it didn't use a real AI assistant. So I ask it to do web search to find relevant package to integrate open AI API. It's searched and finally the dashboard is ready and I can add my own open AI API key to chat with the AI assistant. So now I'm going to open this URL and here is the URL and I can see my MCP configuration server status list of available MCP tools get routes get errors and much more with settings and going to the dashboard here is the AI assistant.
So this AI assistant act as the MCP client and the actual nextJS server acts as the MCP server. So from the client perspective that is from the user perspective I want to know the list of routes in this nextjs application. So I'm going to ask list of routes in this application. And now it's using the tool and generating with the response it listing all the routes. Previously to know these routes you need to go and read all the code but now using the power of MCP server in NexJS we got all these routes in MCP itself. So any AI can consume this MCP tools to understand more about the application.
So in the environment file you can see the target project path. So you can put any of your Nex.js JS project and automatically this dashboard can give you the stats of the total number of routes and listing it like this average response time cache hit ratio performance metrics and cache analyzer but the issue is that I haven't tested this application it's crucial to test application generated by AI so we need to put this into test that's when we have test sprite AI agent that tests fixes and validates your software seamlessly integrates with your favorite AI powered editors such as cursor tray clot code VS code and more fully automated testing agent help you to ship 10 times faster you can get started for free so once after you sign in there's a option called test locally using MCP so clicking on that and then click install so here you can generate your API key I'm going to copy other IDs because I'm going to Windsurf going to copy this replace this API key with the API key generated next in windsurf you got option called plugins so clicking on that manage plugins there I can view my raw config so clicking on that there I'm going to paste my config with my API key here that's it now to win I'm just saying I need to test this application automatically it's going through my files and it is using test sprite to run through the whole application automatically creating all these tests.
If it's done manually, you need to write all this code with playright. But now it's all automated even in test sprite dashboard. You can see that here. You can see the number of test passed and failed. Even it can chat with any AI chatbot. So here is an example of a test. All the tests been recorded. So here you can see it's automatically test the AI assistant which we have just created and it's running locally on my computer and you can see the test results and that's why it's mentioned as pass but as you can see here there are many failures and we need to fix these issues. So all the test report is finally provided here detailed test based on the test run test AI testing report and it has pass and fail. So I can just drag the testing report to my chat again and then I can ask to fix all these errors and it's going to go through one by one to fix the errors. As simple as that. Now my application is better without those errors.
So that is my workflow as a user. Windserf knows my requirements. Based on that it created all the test scripts and ran all the test. the result given back to win surf to fix all the issues and you can keep on iterating through and that is the power of test sprite and thanks to test sprite for sponsoring this video start building applications like this using NexJS MCP server and I'll provide all the code and the links in the description below and if you have any question do let me know in the comments below and I hope you like this video do like share and subscribe and thanks for watching.