Scaffolding an initial json-render project

JSON Render is a tool that we can use to take a prompt, turn it into a JSON spec, and then turn it into a bunch of UI components. It's really cool. All you have to do is describe what you want to build, say, an order receipt with an item list and total. This is going to spit out some JSON, which will then spit out some code that we can use to create predictable UIs. So let's go ahead and get started like you might expect by creating a Next.js application. I'm over here in Cursor, this is the code editor that I'll be using, but feel free to use whatever feels right to you. So let's go ahead and run npx create-next-app-at-latest-mcp-json-render. then we're going to use a couple flags. So we'll say TS app, Tailwind, ESLint. These are the configuration options I want for the project. And once I do that, it's going to create the project for me right here in this folder. So now I just need to cd change directory to mcp.json.render. Now once I've done that, we can take a look at the package.json file. The package.json file should have a few different items in it, including, but not limited to, our dependencies, next, react, react-dom, and then some dev dependencies that I set up also. But we also want to include our JSON render. So if we take a look at the JSON render website, remember it's going to take our prompt, turn it into some JSON, which will then live render our code to the page. So we want a few different packages to make this work. Here we want to npm install at json-render-core, at json-render-react. Those are going to help us render the UI elements that we need. And we're also going to make use of the Shad-CN components. So we'll say JSON render Shad-CN. We also want to include AI, which is the AI SDK from Bristle. This is going to help us connect our React application to LLM data. And then finally Zod will help us with types. Nice. So the final thing that we need to do in this video is create an environment file. We're going to create this at the root of the project. Let's go ahead and call it .env.local. Now, this file is going to contain any environment variables that we need for our project. The environment variable that I'm going to need is going to be the AI gateway. What is the AI gateway? Well, they talk about it here on the homepage of Vercel. The AI Gateway is this tool that we can use to pull from all sorts of different models. So all I'll need to do is grab one key, and then I can choose from any number of models that are available. So you will need a Vercel account to get started. You can create a free account if you'd like to. I'm just going to log into the account that I have. We're going to log into Moon Highway here. Over on the left sidebar, there is an option for AI Gateway. And the AI Gateway wants us to create an API key here. So let's go ahead and do that. I'm going to give it some sort of a name. Doesn't matter what you name it, as long as it's unique among your other API keys. So I'll just call this JSON Render Project. We'll create our key. And now we'll copy that key. And we'll place it over here. So the key is going to be called AI gateway API key. And I love that cursor is trying to guess what that key is. Not scary at all. Now that I've done that, I can run npm run dev. This is going to pop this open within cursor, running our Create Next app. So nothing really renders yet. This is just the default that comes with our Next.js project. In the next video, now that we have our project structure, we can build on this by creating that JSON spec.