Note: This is an example blog post demonstrating how to use prompts.chat/embed embed features for interactive AI-powered tutorials. The vibecoding workflow shown here illustrates how developers can iteratively build and improve code with AI assistance.
In this tutorial, we’ll demonstrate the power of vibecoding by building a React hook from scratch. We’ll start with a simple idea and iteratively improve it using AI assistance, showing each step with interactive embeds and diffs.
Step 1: Starting from Nothing
Let’s begin by asking AI to create a basic React hook for fetching data:
Great! The AI creates our initial hook. Now we have something to work with.
Step 2: The AI Created Our Basic Hook
Here’s what the AI generated - a simple hook with basic functionality. Now let’s add TypeScript:
The diff shows our starting point - a basic JavaScript hook. Let’s add TypeScript types to make it more robust.
Step 3: TypeScript Added Successfully
The AI has added TypeScript types. Now let’s improve the error handling:
Good! We now have TypeScript types. Notice the diff showing the Product interface and typed state variables. But the error handling is still basic - let’s make it more robust.
Step 4: Enhanced Error Handling Complete
The AI has improved our error handling with a custom ApiError class. Now let’s add filtering and pagination:
Excellent! The diff shows our improved error handling with ApiError and retry functionality. Now let’s extend it to support filtering and pagination.
Step 5: Filtering and Pagination Added
Great progress! We now have options support. Let’s add request cancellation for better cleanup:
The diff shows our hook now accepts options and builds query strings. Let’s add proper request cancellation to handle component unmounting gracefully.
Step 6: Request Cancellation Implemented
Perfect! Now let’s add simple caching as the final touch:
Excellent! The diff shows we’ve added AbortController support. Now for the final enhancement - simple caching.
Step 7: Final Touch - Caching
Perfect! We’ve added caching to our hook. The journey is complete!
The Final Result
Through this iterative vibecoding process, we’ve built a production-ready React hook with:
- ✅ TypeScript support
- ✅ Robust error handling with custom ApiError
- ✅ Filtering and pagination
- ✅ Request cancellation with AbortController
- ✅ Simple in-memory caching
- ✅ Retry mechanism
Each step showed the current state as a diff, making it easy to see exactly what changed at each iteration.
More Examples: Planning & Architecture with ChatGPT
Let’s explore how vibecoding works for planning and architecture decisions using ChatGPT with a light theme:
Example 1: Planning a Microservices Architecture
Example 2: Database Schema Design
When planning database structures, AI can help visualize relationships and suggest optimizations:
Example 3: API Design and Documentation
Planning RESTful APIs with proper documentation:
Example 4: System Architecture Review
Get architectural feedback and suggestions:
Example 5: Technology Stack Selection
Let AI help you choose the right tools for your project:
Tips for Effective Vibecoding
- Start Simple: Begin with basic functionality and iterate
- Use Diffs Correctly: Show the current state as a diff, then request the next changes
- Be Specific: Give clear requirements for each improvement
- Build Incrementally: Add one feature at a time
- Review Each Step: Check the diff before moving to the next iteration
Try It Yourself
You can create your own vibecoding sessions using the embed designer at prompts.chat/embed.
Happy vibecoding! 🚀