Text-to-MCP Servers with Databutton

--- type: transcript date: 2025-04-07 youtube_id: 15bv5JoQFBs --- # Transcript: Text-to-MCP Servers with Databutton It's been an absolute huge past couple months for MCP which was introduced just last fall from Anthropic and a lot of people are using it in a ton of very interesting ways. In this video, I wanted to show you how you can build and deploy MCP servers using data button which allows us to do this with just natural language. So by the end of the video I'll show you how you can incorporate your own custom tools that you built out into tools like cursor as well as windsurf or alternatively within the claude desktop app. The first thing that we're going to do is we're going to go ahead and click the use a template button here. Once you've made an account and kicked off the template, this is going to be what data button looks like. Just to briefly go over the platform itself. Once you describe what you want your application to be and add in all of your different requirements, it's going to break all of those out into different tasks. You can go ahead and kick off these tasks to the agents, which I'll demonstrate in just a moment. From there, what we'll have within here is a preview tab. And within here, we'll be able to see the front end of our application. Alternatively, we can open up the preview environment within a new tab here. And then in addition to that, we also have the terminal for our backend at the bottom here. And then from there, we have the pages within our application. And most notably, probably for this example is we have the APIs. And these are going to be the pieces that ultimately get exposed as MCP servers. The way that MCP servers work within data button is basically the backend routes that you already have within your application. Once you're ready, you can go ahead and generate a key, copy the MCP configuration and put it within whether it's claude, windsurf, cursor or what have you. The last thing that I wanted to show you is they have this interactive flowchart where you can see how the different API routes relate to one another or alternatively how the various UI components relate to one another. Now, just to quickly show you the template, if you go within settings and if I go over to secrets, what I'm going to do within secrets is I'm going to go ahead add in our OpenAI API key and I'm going to save that out. So now within our application, if I ask it to do an equation, what it's going to do with my request is it's going to send it to OpenAI, even though we're asking with natural language for it to add these two different values, what's actually happening before it sends this response back is we're going to be using one of these tools here. Within here, we see different tools of add numbers, subtract numbers, multiply numbers, divide numbers, so on and so forth. What I'm going to show you is how you can begin to use this template and make your own custom MCP tools that you'll be able to add in Claude Windsor cursor or what you can even use is use this playground and application as a starting point for an idea that you might have. What I want to do in this example, I need to retrieve relevant market information about various tickers. I'm going to say I want to leverage the Alpha Vantage API to get the latest stock price of a particular symbol. I also want the functionality to work similar to how the calculator functionality works as different tools within the chat interface. Now once I send that in, what data button is going to do is it's going to reason through the different steps that it needs to take to complete whatever you're asking it for. Now the neat thing with this is the agent has determined that we do need an API key from Alpha Vantage. The reason I wanted to use Alpha Vantage is it is a free API that you can go ahead and try this out if you'd like. Once we have our API key, we can securely send it in for it to be stored on data button. Just like that. Now, what it's going to do is it's going to go and it's going to create some backend logic for us. If I go within our APIs here and I go down to our stocks endpoint. Now, within this endpoint, we'll see that it wrote all of this out for us. What's important within this is we have the natural language mapping to what this endpoint actually does. This is going to be important in a chat context in our application. We have the chat interface and this will determine which tool that we use at each particular time. Now that it looks like it's done, we can go and click to preview our application within this MCP playground. We have all of those calculator tools that we had previously, but now we also have this get stock price functionality. Now, if I test this out and I say, what is the latest stock price of Apple? I'm going to send in that request. Now, what it's going to do is it's going to determine that we need to use a function call or a tool call. And based on that tool call and that piece of natural language, we're going to extract the AAPL for the Apple symbol. And that's going to be the parameter that gets sent to our backend API. Here we see Apple for Apple, for instance. The other neat thing with the platform is as you have different to-dos, you will see it will at some points update the different activity that it does for each task. Now that I know that this does work, I'm going to go ahead and mark it as done. Now, the really neat thing with this is I can go ahead and deploy this with just one click. Now that we have this logic, and mind you, you can go ahead and update all of the code within here as well if you'd like. Now that I have this starting point functionality, all that I need to do to deploy this as an MCP server that I can put within cursor, windsurf or cloud is to click configure MCP. And then within here, we can generate a new key. And then once we have that, I'm going to show you how you can put it within Claude, Windsurf, as well as cursor. If I go over to the claw desktop app and I go over to settings, I can go and I can click the developer tab. And then to add in our MCP server, we can go ahead and add it in just like this. Now, if I refresh the cloud app and if I take a look at our MCP tools here, we'll now see this get stock price. I'll say what is the latest stock price of Apple and Microsoft. Now, the one really neat thing with MCP is even if you specify a request that you might think is an array of different values, if the endpoint isn't set up that way, what it will instead do is it will make two different requests. Since the endpoint only accepts one symbol at a time, what what it decided to go through and do is to make two different requests to get the information for Microsoft as well as Apple. And now we have this live stock data within the cloud desktop app based on our own custom tool that we had just built. Now while getting a stock price of a particular ticker might be interesting, what could be even more interesting is getting the history. Now that we have the basis of our application working, now I want to add an endpoint that gets the historical data of a particular ticker. I want to make sure it functions just the same way where we can use it within the chat interface within our application. but also I want it to return all of the history for the particular ticker. Now that it already did the research in the previous step, we see that we have the reference that is going to use the time series daily endpoint from Alpha Vantage. And we see that it already even wrote out the endpoint. Now, if I take a look at preview again and I go over to stocks. Now, within here, we have the price like we had just set up, but now in addition to price, we also have the history. Similar, we have the natural language mapping for the LLM. And then here we have that request to get the information of the particular stocks. And this is going to be all of that different information that we get on the different tickers, the open, high, low, close, as well as the volume. So now I'm going to go ahead and deploy this again. And so now that's all I needed to do to have this new tool that I can access within Claude. And then now after restarting Claude, we saw that this went from 10 to 11 tools. So if I take a look within here, we have the get stock history as well as the get stock price. Now the cool thing with this is I can say create a line chart based on the historical stock data of Apple and Microsoft. Here we see we're getting the information for the Apple ticker first and then from here we're getting the information for the Microsoft ticker. And now that it has all that up-to-date information that we just retrieved from the Alpha Vantage endpoint is now within the cloud interface, it's going to go and create a bespoke application of what we had asked for. Within here, I can see the comparison between those two different stocks. So I can see over the past 30 days, Apple is down 17.25%. And then Microsoft is down 8.6%. So I can also go within here and change the date range. We see all of it functions in just one shot. Now, just to quickly show you how to set this up within Windsurf, you can copy the exact same configuration object. We can go over to our MCP servers within the cascade panel, and then we can paste in our configuration there. And then finally, to set it up within cursor, it is slightly different. So, we're going to be referencing the path to where we save out the key. But all that we need to do is we can command shiftp. We can go ahead and we can look for the cursor settings within here. We'll go to MCP, add a new MCP server. You can call this whatever you'd like. And then within here, we can paste in that command with the reference to our path. Overall, that's pretty much it for this video. Hopefully, you found this video useful. I encourage you to try out data button if you haven't already. It's useful for applications even outside MCP servers. It is incredibly intuitive to get started. But otherwise, that's it for this video. If you found this video useful, please comment, share, and subscribe. Otherwise, until the next