Written by Fatih Kadir Akın, on June 18, 2025
---

# Building a React Hook with AI: A Vibecoding Tutorial (Example Blog Post Using prompts.chat/embed)

> **Note:** This is an example blog post demonstrating how to use [prompts.chat/embed](https://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

1. **Start Simple**: Begin with basic functionality and iterate
2. **Use Diffs Correctly**: Show the current state as a diff, then request the next changes
3. **Be Specific**: Give clear requirements for each improvement
4. **Build Incrementally**: Add one feature at a time
5. **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](https://prompts.chat/embed).

Happy vibecoding! 🚀