How to make vibe coding not suck…

Fireship · Beginner ·💻 AI-Assisted Coding ·9mo ago

Key Takeaways

Model Context Protocols improve vibe coding with AI

Full Transcript

Last week, I was looking for some software to solve a very specific problem. Lo and behold, I found this great app for 10 bucks. But as a Vibe engineer, I didn't pay for it. Instead, I spent 3 days, $500 in claude credits, and missed my kids' baseball game over the weekend to build a crappier version from scratch. Developers are living in weird times as some of us are becoming less productive and ditching AI altogether. Like the streamer coding garden just completely destroyed the grift in this video. >> And it's not fun. It's not fun at all. But many others are going allin and seeing productivity gains like never before. Every employee at multi-trillion dollar company Nvidia is now AI enabled. >> Every one of our engineers 100% is now assisted by AI coders and our productivity has gone up incredibly. >> The truth is that AI does suck. It's like gambling. When you prompt it and the code actually works, you feel that indescribable rush of dopamine. >> I'm coming day and night. I mean, it's terrific. But eventually your prompt won't work and this leads to a vicious cycle that I like to call the prompt treadmill of hell where you keep burning through credits but never actually get what you need. Despite that drawback, there are ways to make AI coding more reliable and quasi deterministic thanks to the power of model context protocol servers. In today's video, we'll look at seven MCP servers every dev needs to know about to make AI coding suck less. It is October 14th, 2025, and you're watching the code report. I think it's safe to say that the majority of programmers are now using AI in some capacity, but very few are using it to its full potential. If you don't already have a couple of MCP servers hooked up to claude code, cursor, open code, or whatever you prefer, you're falling behind and you're not going to make it. But what even is a model context protocol server? Well, in one sentence, it's a standardized way for your coding agent to talk to external systems. That could be an app running on your local machine. It could be a remote server that runs your code. or it could be a thirdparty API. To understand its full potential, let's look at some examples. On this channel, I've complained endlessly about AI not being able to generate proper spelt 5 code. Well, luckily, just a few days ago, that problem has been solved thanks to the release of the spelt MCP server. All you have to do is install this bad boy in your favorite coding tool, like I'm using Claude Code here. And now, instead of going in blind, you can start a prompt with /spelt. This will automatically tell Claude how to get the right spelt documentation. And more importantly, use the spelt autofixer. It'll perform a static analysis on the code and delopify it when the LLM hallucinates random ReactJS code in your project. But if you're a front-end developer, the most time-conuming task is implementing your designer's Figma files into actual code. Well, not anymore. The Figma MCP server allows you to connect your local Figma app on the desktop or in the cloud. It'll pull a design file and automatically implement it in HTML and CSS. You can even generate React components, use Tailwind, or build iOS UI elements using Figma's more reliable tooling. Pretty cool. But what if you're building something like a payment system with a third-party API? If this is something you really can't afford to screw up, well, Stripe and many other APIs now have an MCP server that can fetch documentation for the exact API version you're using. Not only that, but it has a long list of tools you can use to access live data in Stripe, opening the door to all sorts of possibilities, like accidentally refunding 10,000 customers with a single prompt. Now, even if you leverage these tools, your code is still probably going to break in unexpected ways at runtime. If you use a monitoring tool like Sentry, you can access all of the issues and errors your AI assistant missed before deploying. Instead of trying to understand the slop you rolled out a few minutes ago, you just tell it to query the Sentry issues and fix them on the fly. That's helpful, but not all runtime issues can be caught. At other times, it might be the QA guy who worked at Blizzard for 7 years who assigns you a Jira ticket to fix some pointless edge case he found, in which case you'll want to have the Atlassian or GitHub MCP server installed. You can use it to automatically pull issues and tickets without ever needing to read them yourself. Just run a prompt that tells the AI to fix the issue and close the ticket while you sit on the train reading your favorite book. That's awesome. And if you follow this guide, you'll eventually have a billion-dollar app that requires more infrastructure to scale. There are now MCP servers for AWS, Cloudflare, Verscell, and many others that can let AI provision the actual resources you use in the cloud. In theory, the great thing about robots is that they won't forget to shut down an EC2 instance that will destroy your finances, but don't quote me on that. So far, all the examples we've looked at require the trust of a third party developer. So, you have to trust us. Just relax and fall. One, two, three. No. >> What's cool about this protocol, though, is that it's essentially standardized now. And you can use it to build your own highly specialized server. Like maybe you want a server that can look up custom data sources, manage your smartome, or really anything you can imagine. And they're easy to build because there's now an MCP framework for every major programming language out there. But after you build one, you'll need a place to deploy it. And an awesome platform you need to know about is Savala, the sponsor of today's video. It's a modern successor to Heroku that combines Google Kubernetes Engine with Cloudflare to give you a simple way to deploy full stack applications, databases, and static sites without drowning in YAML configs. We can easily ship our app by connecting a Git repo in the Savala dashboard or by selecting one of their pre-built templates. Once it's live, you get app analytics, environment variables, and everything else you need to scale your app. You also get real environment pipelines for preview, staging, and production, so your team can promote changes safely instead of just praying to the prod gods. So try out Savala for free with $50 in free credits using the link below. This has been the Code Report. Thanks for watching and I will see you in the next

Original Description

Deploy your app the easy way with Sevalla and get $50 in free credits - https://sevalla.com/fireship AI coding may be overhyped but Model Context Protocols are making it possible for experienced devs to vibe code responsibly. In today's video, we'll look at 7 MCP servers that make programming with AI suck less... #coding #programming #ai 💬 Chat with Me on Discord https://discord.gg/fireship 🔗 Resources - https://svelte.dev/docs/mcp/overview - https://www.figma.com/mcp-catalog/ - https://awslabs.github.io/mcp/ - https://docs.stripe.com/mcp - https://docs.sentry.io/product/sentry-mcp/ - https://github.com/github/github-mcp-server - https://github.com/sooperset/mcp-atlassian 📚 Chapters 1. Framework optimizers 2. Design implementers 3. API executers 4. Error catchers 5. QA terminators 6. Infra scalers 7. Build your own 🔥 Get More Content - Upgrade to PRO Upgrade at https://fireship.io/pro Use code YT25 for 25% off PRO access 🎨 My Editor Settings - Atom One Dark - vscode-icons - Fira Code Font 🔖 Topics Covered - What is an MCP server? - Vibe coding tips - Programming with ai - Best MCP servers for developers
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Fireship · Fireship · 0 of 60

← Previous Next →
1 Angular 4 Development and Production Environments with Firebase
Angular 4 Development and Production Environments with Firebase
Fireship
2 OAuth with Angular and Firebase Tutorial
OAuth with Angular and Firebase Tutorial
Fireship
3 Anonymous Authentication with Angular and Firebase - Lazy Registration
Anonymous Authentication with Angular and Firebase - Lazy Registration
Fireship
4 Angular Router Guards for Firebase Users
Angular Router Guards for Firebase Users
Fireship
5 Angular Firebase CRUD App with NoSQL Database Tutorial
Angular Firebase CRUD App with NoSQL Database Tutorial
Fireship
6 Upload Files from Angular to Firebase Storage
Upload Files from Angular to Firebase Storage
Fireship
7 How to Deploy an Angular App to Firebase Hosting
How to Deploy an Angular App to Firebase Hosting
Fireship
8 Sharing Data between Components in Angular
Sharing Data between Components in Angular
Fireship
9 Loading Spinners for Asynchronous Firebase Data
Loading Spinners for Asynchronous Firebase Data
Fireship
10 Angular 4 Transactional Email with Google Firebase Cloud Functions
Angular 4 Transactional Email with Google Firebase Cloud Functions
Fireship
11 Firebase Database Rules Tutorial
Firebase Database Rules Tutorial
Fireship
12 Autocomplete Search with Angular4 and Firebase
Autocomplete Search with Angular4 and Firebase
Fireship
13 Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Fireship
14 Angular Drag-and-Drop File Uploads to Firebase Storage
Angular Drag-and-Drop File Uploads to Firebase Storage
Fireship
15 Text Translation with Firebase Cloud Functions onWrite and Angular 4
Text Translation with Firebase Cloud Functions onWrite and Angular 4
Fireship
16 Custom Usernames with Firebase Authentication
Custom Usernames with Firebase Authentication
Fireship
17 Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Fireship
18 Simple Pagination with Firebase and Angular 4
Simple Pagination with Firebase and Angular 4
Fireship
19 How to Connect Firebase Users to their Data - 3 Methods
How to Connect Firebase Users to their Data - 3 Methods
Fireship
20 Add Toast Message Notifications to your Angular App
Add Toast Message Notifications to your Angular App
Fireship
21 Facebook-Inspired Reactions System with Angular and Firebase
Facebook-Inspired Reactions System with Angular and Firebase
Fireship
22 Learn NgModule in Angular with Examples
Learn NgModule in Angular with Examples
Fireship
23 Lazy Loading Components in Angular 4
Lazy Loading Components in Angular 4
Fireship
24 Stripe Checkout Payments with Angular and Firebase - Part 1
Stripe Checkout Payments with Angular and Firebase - Part 1
Fireship
25 Process Stripe Payments with Firebase Cloud Functions - Part 2
Process Stripe Payments with Firebase Cloud Functions - Part 2
Fireship
26 Selling Digital Content in Angular with Stripe Payments - Part 3
Selling Digital Content in Angular with Stripe Payments - Part 3
Fireship
27 Angular 4 Full Text Search with Algolia - Part 1
Angular 4 Full Text Search with Algolia - Part 1
Fireship
28 Algolia with Firebase Cloud Functions - Part 2
Algolia with Firebase Cloud Functions - Part 2
Fireship
29 Firebase Phone Authentication in Angular 4
Firebase Phone Authentication in Angular 4
Fireship
30 Top 7 RxJS Concepts for Angular Developers
Top 7 RxJS Concepts for Angular Developers
Fireship
31 Learn Angular Animations with 5 Examples
Learn Angular Animations with 5 Examples
Fireship
32 Advanced Firebase Data Filtering (Multi-Property)
Advanced Firebase Data Filtering (Multi-Property)
Fireship
33 Realtime Maps with Mapbox + Firebase + Angular
Realtime Maps with Mapbox + Firebase + Angular
Fireship
34 Angular Reactive Forms with Firebase Database Backend
Angular Reactive Forms with Firebase Database Backend
Fireship
35 Send Push Notifications in Angular with Firebase Cloud Messaging
Send Push Notifications in Angular with Firebase Cloud Messaging
Fireship
36 Top 7 Ways to Debug Angular 4 Apps
Top 7 Ways to Debug Angular 4 Apps
Fireship
37 Infinite Scroll with Angular and Firebase
Infinite Scroll with Angular and Firebase
Fireship
38 Use TypeScript with Firebase Cloud Functions
Use TypeScript with Firebase Cloud Functions
Fireship
39 Realtime Graphs and Charts with Plotly and Firebase
Realtime Graphs and Charts with Plotly and Firebase
Fireship
40 Role-Based User Permissions in Firebase
Role-Based User Permissions in Firebase
Fireship
41 User Presence System in Realtime - Online, Offline, Away
User Presence System in Realtime - Online, Offline, Away
Fireship
42 Location-based Queries with GeoFire and Angular Google Maps
Location-based Queries with GeoFire and Angular Google Maps
Fireship
43 Angular ngrx Redux Quick Start Tutorial
Angular ngrx Redux Quick Start Tutorial
Fireship
44 Angular Ngrx Effects with Firebase Database
Angular Ngrx Effects with Firebase Database
Fireship
45 Progressive Web Apps with Angular
Progressive Web Apps with Angular
Fireship
46 Angular Ngrx with Firebase Google OAuth User Authentication
Angular Ngrx with Firebase Google OAuth User Authentication
Fireship
47 RxJS Quick Start with Practical Examples
RxJS Quick Start with Practical Examples
Fireship
48 Send SMS Text Messages with Twilio and Firebase
Send SMS Text Messages with Twilio and Firebase
Fireship
49 Firebase Database Performance Profiling
Firebase Database Performance Profiling
Fireship
50 Native Desktop Apps with Angular and Electron
Native Desktop Apps with Angular and Electron
Fireship
51 Subscription Payments with Stripe, Angular, and Firebase
Subscription Payments with Stripe, Angular, and Firebase
Fireship
52 Firestore with AngularFire5 Quick Start Tutorial
Firestore with AngularFire5 Quick Start Tutorial
Fireship
53 Angular HTTP Client Quick Start Tutorial
Angular HTTP Client Quick Start Tutorial
Fireship
54 Google Sign-In with Firestore Custom User Data
Google Sign-In with Firestore Custom User Data
Fireship
55 Star Review System from Scratch with Firestore + Angular
Star Review System from Scratch with Firestore + Angular
Fireship
56 Angular Chatbot with Dialogflow (API.ai)
Angular Chatbot with Dialogflow (API.ai)
Fireship
57 Learn @ngrx/entity and Feature Modules
Learn @ngrx/entity and Feature Modules
Fireship
58 Infinite Scroll Pagination with Firestore
Infinite Scroll Pagination with Firestore
Fireship
59 Faster Firestore via Data Aggregation
Faster Firestore via Data Aggregation
Fireship
60 Contentful - CMS for Angular Progressive Web Apps
Contentful - CMS for Angular Progressive Web Apps
Fireship

Related Reads

📰
From "You Have a Bug" to "Here's the Root Cause" - Adding AI Code Analysis to My App Review Pipeline
Learn how to enhance your app review pipeline with AI code analysis to identify root causes of bugs and crashes
Dev.to · Ashish Mishra
📰
Tired of approving every Claude Code request?
Learn how to skip permissions for Claude Code requests using a simple command
Medium · Programming
📰
VideoRAE: Bridging Video Foundation Models and Generative AI
Learn about VideoRAE, a new representation autoencoder that bridges video foundation models and generative AI, enabling better semantic understanding in video generation
Dev.to AI
📰
How AI changed the way I pick frameworks, and the two places React survived
Learn how AI influenced framework selection for personal projects, leading to a shift from React to SolidJS and Tauri 2
Dev.to AI
Up next
Is coding becoming obsolete? | Find out what's the new fundamentals
SCALER
Watch →