Vibe Coding with Claude Changed How I Build Things!

Key Takeaways

Do you want to build an app using AI, but don't really know where to start? You open the app and run into words you don't really understand? Well, today we are going to fix that. We will define the terms you need to know for vibe coding. These terms apply whether you use platforms like lovable, replicate, or Claude. By the end of this video, you will understand how the pieces fit together. You will be ready to build an app for yourself or your entire team. Welcome to Pleva. So, let's head over to Claude to test this out. You can chat with it and it builds live interactive apps right inside the browser using something called artifacts. For our example today, we will be making a web app. Head over to claude.ai and open up a new conversation. In the chat box, I'm going to type, I want you to build a React app that works like a task manager chatbot. Each conversation is called a task. Keep the design minimal and clean. You can even attach images to your prompts. I want my app to look like a specific interface. Take for example, Kimmy K 2.5. I'll upload a screenshot of Kimmy K 2.5's front page and paste it into the chat. I will also add, match this layout as closely as possible. And we hit enter. This is going to take some time to process, so why don't you hit that subscribe button while we wait? Okay, and it's ready. What we can see here is the artifact panel on the right side of the screen. This is our front end. It has buttons, text, and we can type into it right here in the artifact preview. Claude artifacts run entirely in your browser. There is no separate back end, but Claude has a trick. Artifacts can make live API calls to Claude itself, so the AI brain is baked right into the app. I'm going to ask Claude to make this artifact AI powered. I type, make this app AI powered. When a user types a message in a task, it should call Claude's API directly from the artifact and return an AI response. Now, I can type a question like the best way to write an essay on nature conservation, and the artifact calls Claude's API and responds right inside the app. The artifact is the front end. The nested API call is the back end. It all runs in one place. The front end looks good, but the response formatting needs work. To fix this, we use our next term, context. The AI remembers our entire conversation. I do not need to explain the whole app again. All we have to type in is bad formatting, fix it. The agent fixed it. It knew what to fix because of context. Claude keeps the full conversation in memory. You do not have to explain the whole app again. Next, we have database and authentication. Database is where our data is stored. Authentication verifies who a user is. This includes login and password reset screens. Now, Claude artifacts have a feature called persistent storage. On paid plans, your artifact can save data across sessions up to 20 megabytes. You can set it to personal, where only you see your data, or share, where everyone using the artifact sees the same data. I tell Claude, add persistent storage to this app. Save each task and its messages so they load when I come back. For a real production app with user accounts, you would use an external database like Supabase. I would tell Claude, generate the Supabase schema and off setup for this app so each user only sees their own tasks. [music] Claude writes the SQL and the off logic. You copy it into your Supabase project. But, for our demo today, persistent storage inside the artifact is enough. Now that we have storage, I can type a message. The app saves it. If I close the browser and come back, my tasks are still there. The next term is API. We are using the Claude API. An API is how your app talks to an AI model. Every time you use an API, you pay money for it. But, here's the nice part. When you use Claude-powered artifacts on claude.ai, the API calls run against your own Claude subscription. There is no separate billing. Now, I want to show how APIs work by adding a second model. I type in the chat, "Please allow the user to switch between Claude's API and a placeholder response that says, 'This is a simulated response from a second model.'" Claude updates the artifact. I can now toggle between the two. In a real app, you would swap that placeholder for an actual API key from OpenAI or Google and route requests to their endpoints. The artifact panel on the right side of the screen is your code editor. You can click view code to see the full React component Claude generated. You can copy this code at any time. This is how you take your work outside of Claude when you're ready. An agent is an AI model that uses tools in a loop. An agent uses a tool, gets information back, thinks, and uses another tool until the task is done. When you build an agent inside a Claude artifact, the artifact can call Claude's API with tool definitions. The agent can use web search, look things up, and write a structured output. Next, [music] we discuss environment variables. Environment variables are secret values like API keys and passwords. You keep them out of your code to stay secure. In Claude, when you are building an artifact that calls external services, you handle secrets carefully. We are now looking at the artifact preview. It updates in real time as Claude makes changes. Every time you ask Claude to modify the app, the artifact re-renders with the new version. At times, you will run into an error. An error stops your code from running. In Claude, if an artifact has an error, Claude will show you why it's not working in its response. Sometimes the code runs, but the app does the wrong thing. This is a bug. You need debugging. Describe exactly what happens when you click a button. You can also use logs. Logs are messages your app prints out behind the scenes. I type, "Please add console.log statements throughout the app so I can see what's happening step-by-step." Now, you can copy these log lines and paste them into the chat to give Claude context about what went wrong. Let's talk about schema. A schema is the structure defining how your data is organized. If you are using Superbase, the schema is your database tables. A table is a collection of related data, like a spreadsheet. We might have a tasks table. Each row has a unique ID, a title, a user ID, and a creation date. A third-party API is an external service. Stripe is for payments. Twilio is for text messages and voice. Anthropic is for AI. If you want to add the Anthropic API manually to a project outside of Claude, you can get an API key from their website. Now, our app only lives in the artifact preview. Now, we can deploy. There are two paths. Path one is publishing. Claude lets you publish artifacts. Anyone with the link can use your app. They do not need a Claude account to view it. If they have one, they can remix it and make their own version. This is great for internal tools and prototypes. Path two though is full deployment. For a production app, you need hosting. I click view code on the artifact, copy the full React component, and you can paste it into a new project on your computer. Deployment pushes code to a server, so it is on the internet. Hosting is on the service that runs your app. Examples are Vercel, Netlify, or AWS. You You go to your dashboard on these sites and set up a custom domain. A domain, if you don't know, is your address on the internet. Now, the final term is SaaS, software as a service. Beginners try to make money on their first app. Developers fail when they build a SaaS before making a tool people like. Build an internal tool for yourself or your team first. Solve a specific problem. Once you have a tool you use every day, invite two people to use it and grow from there. Those are the fundamentals to help you get started with Vibe Coding. All you have to do is try it out yourself. It's just that simple. If you like this video, be sure to let us know in the comments below, and we will catch you guys in the next one.