How To Set up Mintlify API Docs For Beginners
Other Videos📅 2025-07-18
Transcript
[00:00] Today we're going to check out Mintify which is a very useful tool for creating your platform's documentation. And when I say very useful, I mean some of the biggest industry hitters use this tool such as Perplexity AI, Zapier, Replet, Cursor, others like Enthropic as well. So let's go ahead and check it out. Today's video is sponsored by Mintify. They hit me up and said, Corbin, we got a really good documentation platform. I checked it out and I like it. So in order for me to best showcase this, I'm going to use a real software of bumpups.com. We're going to create API documentation for it and we're going to see all the cool features that Mintiflly
[00:31] has such as their AI assistant or alternatively their nice web editing UI for non-technical use. So, let's go ahead and jump in. All right, to get started, we're going to say try for free. Go ahead and sign in with either email or Gmail. Once you're logged in, we're going to log in with GitHub. Select your relevant GitHub profile. For me, it is Cafe Field Bump and we're going to say authorize Mintify. Once we do that, we're going to create a repo. So, we're say next. Now that we've created the repo, we can clone it to our local computer. So, I'm going to copy this. With that link, I'm going to go ahead and go to Cursor AI, hit clone
[01:01] repo, paste that link, and then hit click. Go ahead and select where you want that folder to be installed, and then I'm going to hit open. And here we go. So far, so good. We have our repo that we downloaded from our GitHub. Once we do that, we can go to go to dashboard. And here we go. Let's create some cool documentation. So, two major things I want you to know when it comes to editing and creating documentation on Mintify. The first one is that we can edit within a web editor. and we can also edit within our code repository that we created with GitHub. I'm going to show you how to do both. Let's go ahead and first set up our web editor. To do so, we're going to install the
[01:32] GitHub app. It's going to then request which repository to have access to. We'll give it access to the one that is associated here, which would be Docs. There we go. And we're going to say install and authorize. So, now that we've given Mintify access to our repository, which is found in our GitHub profile, we'll be able to use their web editor here. So for example here once we're in the web editor we can go ahead and just jump through all the different files that exist in this repository. So let's say we go to our endpoint here create plant and we can add a description like this is a plant just
[02:03] for example here and if I hit publish this will directly go to the relevant documentation here success. So as you can see in the live documentation we go to create plant it says this is a plant. Let's actually go ahead and begin here with the guides though with the introduction. Therefore, of any good documentation, let's go ahead and create our introduction page here in the web editor. And then we're going to use the IDE and code it out and cursor here for the API reference that we'll set up. And all you need to do for the web editor here is simply just drag and paste. You know, change what you want to change. So
[02:34] for me, it' be welcome to bump ups API reference. This document describes restful endpoints integration methods for transferring video into actionable assets, interactive assets. This image here, we're going to go ahead and change the image or upload image. So I'm going to change it to a bumpups image here. Looking really good, really nice. And from here we can keep going. So we have all these different options here. This is out of the box what Mintify does for us to help us better understand how we create documentation such as, you know, how do we edit the doc? How do we preview changes? These are help guides
[03:05] that we can click through. For now though, we can go and just delete them because it's not necessary for what we're doing today. So delete this. And I'm going to go like this introduction as I'm getting in context of what Bumpups does and the different features of Bumpup's API. And we'll go ahead and delete these as well. But what you'll notice is that what's really nice about the web editor feature is it requires no coding. And you can add these little elements of a plus button here like a little card if you want to link off to other stuff. So I'm going just delete this for now. Here we go. So I'll keep adding the copy that I've created already. And from here for any good intro page, you know, we want to give
[03:35] context for the user how to register an account. So for us, it's bumpups and obtaining the relevant key. In addition to this link off to bumpups.com, we can add a card here to further the CTA. So all you need to do is a slash and then we have a bunch of different stuff we can choose from. Now, one thing I want to do real quick is do an info call out. And for this info call out because on this platform, we get $5 of free credit. I like to add that just right off the bat, anyone that's reading the documentation to understand. So we're going to say you will receive $5 of free Bumpups API credit to get started. Nice little call out there. And then in
[04:06] addition, let's add that card that we saw earlier. So I'm going to do card here. And for this card, we'll name it bumpups. In order to edit the card, we're these three ellipses here. I'm going to say bumpups account. And then for the URL, we'll put bumpups. There we go. We can also add an image path. Call to action be like create developer account. And the icon we got sparkles right now. Let's see what else we can get. Because I love coffee. Do a little coffee mug. I think a lot of developers love coffee. Leave a like if you agree. And icon type. We can choose between solid lights. So, whatever you choose, typically you want to have it maintained
[04:37] throughout the user interface. I usually like doing like a thin type of icon to make it look best. And we're going to save changes here. So, we got bumps account. Let's add a little bit of description here. I'm going to say create your developer account. And we can obviously add more here. I'm going to go ahead. We can bold it. We can underline it. Everything you would want in a web editor we can do within Mintify here. So far, this is looking pretty good here. just to kind of look over everything else we can do within the web editor. We can do very standard stuff like headers. What you should know about headers when it comes to why we use a
[05:07] header is obviously one, it just gives context to the user like this is the title. But when this shows up in search like Google, Yahoo, typically when they crawl your page to show it for search engine optimization, they're going to be looking at your headers to get more context of what the page is actually discussing. Other really cool things I like doing in documentation that Mintify has made native is our ability for callouts. Now, one call out we just did together was the info one like, "Hey, get a free five bucks." But other cool stuff like tip call out, note call out, warning call out. This could be important for an air page and
[05:38] referencing very important stuff when it comes to air codes that could be received in your API. In addition, we have a bunch of flexibility when it comes to the UI itself of tabs, steps, frames, response example, request example. This is what's great about Mintify is because of the fact that out of the box they built out a bunch of native UI that makes your documentation look very modern and very professional. Once you're satisfied and you want to do a save point or push to production live website link, hit publish here. So once it's done publishing, you can come over
[06:08] to the live website link and there we go. We got a really solid introduction here and all the information I put in through the web editor. Nice little image. Coming down here, if I click this, this is going to go to the bubs.com and we're here. I also realized maybe for the description here, we can change that so it's not duplicating the copy. And then we have our nice little call out of the $5 for free. Let me real quickly change that little description. So instead of our original, we'll just do this. Bumpups API leverages advanced video processing to convert raw video content into valuable interactive outputs. I like it. Another thing to
[06:39] note is that every single time you make a save and push with the web editor, you're going to notice a commit here. So I can go to commits. And what's nice about Mintify here is that it will give context that documentation edits made through Mintify web editor and we can roll back to these if we kind of want to go to a previous version of our docs. So now that we know how to leverage it in the web editor, this is very much drag and drop, put some copy in, paste some images, everything of this nature, we can scroll down here and then in any starter template created through Mintify, we have the ability to actually leverage the repo in our IDE and we'll
[07:12] be using cursor for this. So the first thing to do this in order so that we can actually start developing in the code like this is we're got to do one command. The first command we're going to do here is going to install the CLI by Mintify. So I'm going to copy that line. I'm going to paste it right there and just hit enter. Once we successfully installed, we can run this locally. And this could be a pretty big advantage here that you might like to do. So you can develop in a local environment. And when I say local environment, all that means is that when we render the actual documentation like this, we can see instantaneous changes when we make
[07:42] change in the code. And the best part is that it's in localhost 3000. That means that no one else has access to this web page and it's purely for development. So now that we've successfully installed mint, I'm going to just run the command mint dev. And watch this. This is going to run it in localhost 3000. Rerun it right here. I notice that my current local code is actually out to date compared to what we did earlier with the web editor. So let me actually show you how we can grab this most recent code into cursor. As you can see in the bottom left here, we are currently in Maine. Therefore, it's really simple to pull the most recent code. We're going to do get pull origin main. And what you
[08:15] notice, it'll grab all that code from the cloud. And if we look at our local host 2000 again, the one that's currently being rendered in our environment. There we go. It has updated with the most recent code that we got from our web editor. Really nice to know. Let's go and work in the docs.json a little bit to update some pretty fundamental stuff. So the first one might be your fave icon. If you don't know what a fave icon is, we are looking at the little fave icon right here and right here for GitHub. This is the image that is shown on the user's browser. In order to change that, since we're referencing the SVG file, all we need to
[08:46] do is simply add our own SVG file. So I'm going to drag mine in. So here is my SVG fave icon. Replace it and we should be good to go here. Because it's a local environment, we'll be able to see it all. And sometimes in order to reflect changes, we need to rerun the emulator. So, we're to mint dev again, especially big ones like this. And as you can see up there, the fave icon has updated. But we can also do other changes within the doc.json that are pretty fundamental for branding. So, for example, the colors here. I can use a cursor chat here and simply say, can we make this a orange
[09:17] theme? I'm going to hit enter here and we're going to update. And this is the beauty of localhost 3000. All I have to do is hit save. There we go. We got a cool little orange theme for our documentation. Now, pretty fast. We can click through all the highlights. What's really great is that this outof-box cookie cutter that we get from Mintify, all we need to do to really make big changes to UI coloring is change three color variables, which are these seen here. So, if I scroll back over here, what's built out is that we got the dark and the light theme for our documentation, but in orange. So, now
[09:48] that you know how to make changes here and instantly reflect in your documentation, let's create an API endpoint together. To do this, we're going to go in the folder of API references. And what you notice is we got open API.json. JSON. Now, this is typically where we're going to store all of our different API endpoints. So, let's create one together. Out of the box with Mintify, we are provided their kind of starter template here, which is nice. We can use AI to help us out here when we want to put our own personal API documentation in. But we can see what this looks like right now. That's going to be an API references and then that's going to be the endpoint examples of get
[10:19] plant, create plant, delete plant, and new plant. That's a lot of plants. So for us to effectively update the open API, what I like to do is just push a ton of information at an AI chat to help us format it. So what I'm going to do in this AI chat is provide very relevant things like the production server that we're calling with the API endpoint, how the API endpoint is authenticated, whether a key is needed or not. And in addition, let's just start with one API endpoint, which is going to be the chat endpoint. This allows users to put in YouTube videos, ask a question, and then
[10:50] receive an API payload. So you'll know how your API architecture is structured. For us, it's simply the production endpoint of API.bumps.com. We require authentication and specifically the type of authi- then give context on the API endpoint we're creating. So this is going to be a chat response endpoint. Specifically, what the body will do is going to be application JSON. And then all of our relevant different variables that we can input such as the URL which is a string,
[11:22] the model which is a string, the language chosen which is a string, en hi, es and then most importantly is going to be a structuring of a typical curl command that it can reference. So this is going to be a post. This is going to do the header of x-api- key and then we have the relevant payload and then the relevant expected output. With all this information, I'm going to hit enter here and we're going to be able to create our nice little open API doc. So, it gave me all these changes here. I'm going to say accept and I'll hit save. So, it's able to successfully add our
[11:52] chat endpoint right there. What I'm going to do is just to clean up this documentation because of the fact that we're going to be adding our real API endpoints here. Is do the prompt of okay, just do the chat endpoint and make sure it's structured like the others and can remove all plant endpoints. Enter. Once it's done, we're going to hit accept and make sure we save the file. Save. So, now that we've successfully cleaned up our open API file where it's just doing the chat endpoint, what we're going to do is make sure we go to our endpoints folder here, go to create.mdx, and we're going to add this relevant endpoint here. All I did was simply give
[12:24] context of create.mdx open API JSON and the entire endpoint folder. Therefore, when I come back over here in local 3000, we are getting somewhere. We got our original payload here. We have the expected output. We do need to change this create plant because obviously we're not creating a plant. We're creating a chat. But let's keep going here. This is working so far. Because this is a pretty substantial change up to this point. Let's do a commit together so you can see how we can push this to GitHub and then reference it back in the web editor and keep going there. In order to do that, it's really simple. We do get add.get commit-m new
[12:57] endpoint. This is what we're naming it. So we can reference it like oh yeah, this is when we added the new endpoint. Enter again. Then we do get push origin main. With all that done, we now have pushed it successfully to GitHub. So, going back over to GitHub here, you'll see new endpoint as a commit. Nice. I'm gonna come back to the editor here and let's publish. What you'll notice is that it has one change here. So, we're going to hit publish. Once I've successfully published it, if we come back to our live website link, we should see this in API reference. Boom. We got the new color UI. Go to API reference and we got our create chat response.
[13:29] Really, really good stuff, y'all. So, what's great here is that we can also just simply go to the open API documentation and edit it here if we choose to do so. But for now, let's test this endpoint out. What's great about Mintify is that it has a native UI where we can simply hit try it and put in the relevant information we need. So, as we know, we are required to provide an authentication key, which we'll get, and a URL for a video. So, obviously, I'm going to make sure that I delete my API key, but I provided a real API key here. I provided a YouTube video and then everything else was filled out to default like we set up in our open API.
[14:00] And from here, all we need to do to simply test is hit send. And with this request, all we did was ask for a summary. And for context, the video was how to use AI to code a website for beginners. And we were able to get this summary here. Here's a summary of the content. And the first sentence being the presenter shows an AI gener code from tools like Google Gemini, Chad GBT, Claude, and turn it into a working website. And it goes on. But what you just learned here is that now developers and people that want to leverage your API can actually test it live within the documentation, which is really awesome.
[14:31] It allows it so that you don't have to jump into any other platform. You can do it directly within the docs. Let's real quickly understand the use case of the major file here of docs.json. The docs.json, JSON. I want you to think of it as like one of your biggest files that you want to change when you want to make really big changes to the overall way your UI is shown on your documentation. Such as what we saw earlier with the fave icon, the color palette, the name of your actual application. Coming down here, this is how we structure different stuff in the UI such as essentials. Anytime you're confused of like Corbin, I see
[15:03] essentials here, but I don't know where that's used, just go into the front-end UI, look around, and you will see here is essentials is used right there. I think another important thing for you to know is coming down here to global anchors. This is where those external links are found. Eg documentation, community and blog. We can set these here with documentation, community, blog, the relevant links associated with each one and then also the relevant icon you want for it. Whether you want slack like seen here or you want a book open. Coming down here even further, this is
[15:33] where the footer comes into play. So right now in our standardized footer, if I scroll all the way down, that's where you see all these different elements. If we want to change those, that's where we change it in the docs.json. So maybe your social media doesn't point to Mintify for X, it points to your actual company. Everything that you'd want to change for the footer, we can do and leverage here. Another really cool feature that comes out of the box with Mintify here is our ability to ask AI. So what this assistant feature does is it contextualizes your entire API docs and guides and allows users to ask
[16:05] questions about it. So as an example question here, I could be like for create chat response, what data can I put in the payload? Hit enter here. It's going to contextualize it. And watch this. And here we go. One thing that's important that it does is it identifies what's really required in order for you to even send the call. And as we know, that's going to be the URL for the YouTube video. And then also does the optional parameters like model, prompt, language, and output format. like we saw earlier. So that's where Ask AI comes into play as it allows anyone that goes to your documentation that maybe has a very specific question couldn't really find it through searching can just ask
[16:35] the AI directly the AI will find it and they give a nice formatted answer. Now because of how many native features are out of the package of Mintify here you can also add other fundamental things that developers would be interested in. For example in theory we could add another side tab here called change log. And in the change log, we leverage the different tab features, the UI features that we can build in the web editor and create a change log of when updates incur for your software API ecosystem. But go ahead and check out Mintify here. It's going to be in the description down
[17:05] below. It's free to start. There's a bunch of other cool tools that we can leverage such as the MCP server, getting analytics. In addition, if you're like Corbin, I want to make sure I can add a custom domain. Don't worry, it's right here. Just hit add custom domain and keep proceeding in that way. So any changes that you make here in the web editor or in your IDE will always be shown in your nice little repo connected to your GitHub profile. So that just about does it. There is Mintify that allows you to create very modern documentation, have a bunch of native features that are built in. You know, some of the big players use this such as
[17:36] Enthropic Perplexity. This is a really great tool for you to get an easy out of the box cookie cutter. Let's just get going here. Push to prod API documentation. So without further ado, make sure you leave a like. It's completely free. Those are two random videos. That is my face.