Fable 5 vs Opus 4.8: Built the Same App Time, Cost, Code | Code with Beto

This video compares two AI models from Anthropic's Claude family: the new Fable 5 and the older Opus 4.8. Both models were tasked with building the exact same React Native Expo habit tracker app from scratch, including a home screen widget, local notifications, haptics, and a GitHub-style heat graph.

I tracked every second, token, and dollar spent to see which model delivers better results in time, cost, and code quality. This is for developers interested in AI-assisted React Native app development and evaluating the tradeoffs between model capabilities and pricing.

What's inside

Same plan, same prompts, same MCP server setup
Avoiding manual prompts with skip permissions flag
Using the MCP server to provide real production UI examples
Installing skills and tooling to speed up AI coding
Running both models simultaneously and monitoring progress
Comparing session cost, token usage, and code size
Reviewing generated code quality and architecture
Testing the final app on a physical device and fixing issues

Same plan, same prompts, same MCP server setup

I used the exact same project setup for both models: brand new React Native Expo projects with no pre-installed dependencies. Both Fable 5 and Opus 4.8 received the same prompt to build a complete habit tracker app with streaks, haptics, local notifications, and a home screen widget.

To steer the AI towards a production-ready UI, I used my MCP (Model Control Panel) server, which provides the models with access to real UI components and code examples from my Platano template and other projects. This ensures both models have an even playing field with access to trusted packages and patterns.

Avoiding manual prompts with skip permissions flag

Normally, Claude models require manual confirmation for permissions during code generation, which interrupts the flow. To avoid this, I started both models with the flag. This allowed the AI to run uninterrupted without needing me to hit enter for each permission request, speeding up the process.

I also set the effort level to "extra high" for both models to encourage thorough and high-quality code generation.

Using the MCP server to provide real production UI examples

The MCP server is a key part of this test. It gives the models access to real production UI examples, including my Platano template, lessons, videos, and transcripts. This helps the AI generate code that follows best practices and looks like something I would ship.

Both models referenced the MCP server during generation, checking examples before writing code. This approach avoids generic AI UI outputs and guides the models to produce cleaner, more maintainable code.

Installing skills and tooling to speed up AI coding

I installed the same custom skills on both projects, such as an app icon generator skill. This allows the models to generate assets like app icons automatically, reducing boilerplate and manual work.

The tooling setup was identical to ensure the models spent time generating meaningful code instead of setup tasks.

Running both models simultaneously and monitoring progress

I ran both models side by side, starting with Opus 4.8 first since it is the older model. I monitored their progress, watching how they referenced the MCP, generated onboarding flows, and built the Expo widget.

Fable 5 surprised me by compiling and installing the app directly on my iPhone 17 Pro within about 40 minutes. Opus 4.8 took longer and only ran the app on a simulator, never reaching the physical device stage after nearly 50 minutes, so I stopped it.

Comparing session cost, token usage, and code size

Using the command, I checked the total session cost for both models. Opus 4.8 cost about $21, while Fable 5 cost $33, reflecting Fable's higher token pricing.

Opus generated around 4,100 lines of code, whereas Fable produced about 3,200 lines. This indicates Fable 5 created better abstractions and less code overall, which I consider a big win since less code means less maintenance and complexity.

Reviewing generated code quality and architecture

I reviewed the code from both models. Opus 4.8 produced decent code but placed screens directly inside routes, which is a bad pattern I would avoid in real projects. Fable 5 generated cleaner code with better abstractions, likely influenced by the MCP examples from my AI tattoo app and Platano template.

Fable 5 also handled Expo UI modifiers well and produced a better app icon. I rated Opus code an 8/10 and Fable code a 9/10 for cleanliness and maintainability.

Testing the final app on a physical device and fixing issues

I tested Fable 5's app on my iPhone. The splash screen, onboarding, dark mode compatibility, animations, and haptics all worked smoothly. The app had personality with the name "Ember" and a nicer empty state UI.

There was a missing header issue preventing habit creation, but I prompted Fable 5 to fix it by using Expo Router's stack toolbar API for a native header. After the fix, habit creation worked perfectly with reminders and animations.

Fable 5 also handled errors and warnings quickly after prompting, showing good responsiveness.

Resources

PlatanoShip a launch-ready React Native app this weekend

See AI-assisted code generation in a real production template with payments and store assets wired up.

CourseReact Native course

Learn fundamentals through shipping, including AI-assisted development concepts.

Let's connect!