This AI Builds Full Apps In 25 Minutes

Your next app might spin up faster than your espresso shot. In a viral video titled “Claude Code in the web can build anything (Vibecode.dev),” creator Riley Brown claims he built a complete, working app in just 25 minutes using Claude Code running in the browser via Vibecode. No local dev environment, no terminal acrobatics—just a web tab and a prompt.

Instead of a toy demo, Brown shows a very specific, creator-friendly tool: a thumbnail generator that clones the visual style of any YouTube video. Paste a YouTube link, and the app learns that aesthetic—colors, composition, vibe—and turns it into a reusable element you can apply to new thumbnails.

The workflow looks more like using Figma than writing code. Brown heads to the Elements tab in his Vibecode-built app, clicks YouTube, pastes a link, and names the new element “Mel thumbnail.” From there, generating new images becomes a one-line instruction: “Riley thumbnail in the style of Mel thumbnail about how insane Claude code is.”

Within seconds, the app spits out multiple thumbnail options of Brown, all matching the reference creator’s style. No manual Photoshop work, no fiddling with hex codes or fonts—just prompt, run, review, repeat. The system encourages rapid iteration: tweak the prompt, rerun, stack up variations.

Framed against traditional development, this looks like a serious jump in rapid prototyping. A solo creator can walk in with a vague idea—“I want a thumbnail factory that copies any channel’s look”—and walk out a single work session later with a functional product. Not a mockup, not a slide deck, but a deployed app they can actually use.

Crucially, Brown stresses this isn’t a single script duct-taped together. Vibecode uses Claude Code to generate what he calls “professional mobile apps with a front end and a backend,” all from that initial prompt. UI, backend logic, elements system, and thumbnail generation pipeline all emerge from the same agent, running entirely in the browser.

Command lines built modern software, but they also locked it behind a wall of arcane syntax. The classic developer setup still looks like a hacker movie: a terminal window, git commands, shell scripts, and a local stack only a backend engineer loves. Riley Brown’s Vibecode demo flips that script, putting Claude Code inside a clean browser UI that behaves more like Figma than Bash.

Instead of cloning a repo manually and wiring up environments, Vibecode spins up an Anthropic-managed VM in the background. Claude Code gets a full filesystem, internet access, and git, but the user just sees panels, buttons, and forms. You steer an AI agent with natural-language prompts, not `git rebase --onto`.

Brown calls terminal usage “for nerds,” and he’s not entirely joking. A browser-based interface means anyone who can use Notion or Webflow can now orchestrate a professional app build. No `npm`, no Homebrew, no PATH issues—just a URL and a login.

In the video, Brown builds a working thumbnail generator in about 25 minutes on Vibecode.dev. He pastes a YouTube link, adds it as an “element” named “Mel thumbnail,” and then prompts: “Riley thumbnail in the style of Mel thumbnail about how insane Claude code is.” Claude generates multiple styled thumbnails on demand, all coordinated through the web UI.

Because Vibecode runs in the browser, the same workflow carries to a phone or tablet. Brown explicitly says you can create “professional mobile apps with a front end and a backend” from your phone. That means: - Ship a feature from an iPad on a plane - Fix a bug from a coffee shop without a laptop - Spin up a prototype during a meeting, live

This shift quietly blows up the definition of “developer.” Product managers can tweak flows and copy while Claude Code edits files and pushes branches. Designers can experiment with layout and components without touching a terminal. Entrepreneurs can stand up MVPs themselves, using Claude as a full-stack pair programmer that happens to live in Safari or Chrome.

Riley Brown’s workflow starts with something deceptively simple: a URL. He copies the link to a YouTube thumbnail he likes, jumps into his Vibecode-built app, and heads to the Elements tab. There, he adds a new element, selects “YouTube,” pastes the link, names it “Mel thumbnail,” and saves it as a reusable building block.

That single action effectively turns a random image on the internet into a named design primitive. When he later generates assets, he taps the Elements menu and sees “Mel thumbnail” sitting alongside other components. One prompt — “@Riley thumbnail in the style of @Mel thumbnail about how insane Claude Code is” — now instructs the system to remix his own face into that exact visual language.

Under the hood, Vibecode turns those elements into a lightweight design system managed by AI. Each saved style, component, or pattern becomes a reference point Claude can reuse across screens, states, and platforms. Instead of manually documenting typography, colors, and layouts, you offload that memory work to the agent.

Scaled up, this looks less like a toy and more like a living style library. You could imagine elements for: - Brand color palettes - Button and card layouts - Onboarding flows and error states

Vibecode acts as the intelligent layer that translates those human-friendly tags and prompts into precise instructions for the Claude Code agent. You say “use the Mel thumbnail style for this new landing page hero,” and Claude quietly handles CSS, responsive layout, and asset generation. The abstraction wall moves up; you stay in the language of intent, not implementation.

Brown underscores that this isn’t a one-off stunt. He says he built the entire Vibecode app in about 25 minutes, end to end, powered by Claude Code running in the browser. Web and mobile frontends, backend logic, and thumbnail generation all flow from the same prompt-driven, component-aware stack.

For viewers who want to copy the setup, Brown flashes the exact, long-form prompt he used at the end of the video and explicitly invites screenshots. Anyone can paste that into Vibecode and, in theory, reproduce his workflow. For more on how the browser-based agent actually operates, Anthropic’s Claude Code on the Web - Official Documentation breaks down the environment, repo handling, and execution model.

Agents change the job description of coding assistants from autocomplete to co-worker. Instead of passively suggesting the next line, an agentic AI accepts a goal, figures out the steps, executes them across tools, and checks its own work. Claude Code sits in that category: a system Anthropic explicitly designed to operate a full development environment, not just decorate your editor with gray text.

Traditional helpers like GitHub Copilot excel at local pattern matching: complete this function, mirror that loop, scaffold a test. Claude Code, especially in Vibecode’s browser wrapper, behaves more like a junior engineer who can read the repo, search docs, and decide what to touch first. It has a file system, a shell, and network access, so it can plan, edit, run, and iterate in a tight loop.

Planning sits at the center of that behavior. Before writing a single line of code, Claude Code can generate a plan.md that breaks a vague prompt into concrete milestones, files, and tasks. For a “build me a full mobile and web app” request, it might outline data models, API endpoints, UI screens, auth flows, and deployment steps as a numbered checklist.

Sid Bharath, who has been stress-testing Claude Code on real products, calls out its advanced Plan Mode as the unlock. Ask it to “think hard” about a gnarly refactor and it will spend several minutes composing a multi-section strategy: current architecture analysis, risk matrix, migration path, and test coverage plan. Only after that does it start touching code, referring back to plan.md like a spec.

That planning loop matters when requests get large, fuzzy, or both. A simple autocomplete tool struggles with “rebuild onboarding to support teams, SSO, and usage-based billing” because the task spans multiple services, schemas, and UIs. Claude Code instead decomposes the problem, sequences work across backend and frontend, and keeps track of dependencies over dozens of edits.

Riley Brown’s 25-minute Vibecode demo only works because of that agentic backbone. Claude Code does not just spit out a React component; it scaffolds a backend, wires the thumbnail “elements” system, configures prompts, and hooks everything into a working app. Planning first, then executing against that plan, allows it to survive the kind of sprawling, ambiguous asks that would overwhelm simpler assistants and many human juniors alike.

Behind Vibecode’s glossy web UI, Claude Code quietly spins up an entire development box on your behalf. When you connect a GitHub repo, Anthropic’s backend clones it into a fresh, Anthropic-managed virtual machine, isolated per project or task. That VM becomes the AI’s workspace, not a toy sandbox but a real environment with a filesystem, processes, and logs.

Inside that VM, Claude gets a bash shell, a file editor, and direct access to the repo’s directory tree. It can run commands like `npm install`, `pytest`, or `pnpm dev`, edit source files, and write new ones, all without ever touching your laptop’s disk. Every change stays inside this walled garden until Claude proposes a pull request back to GitHub.

Security hinges on that isolation. Your local machine never exposes SSH keys, environment variables, or random dotfiles to the model. Credentials live in the cloud environment, scoped to that VM and repo, and Anthropic can lock down what Claude sees to only the files and secrets it actually needs.

Internet access inside this mini-computer is configurable. Teams can choose:

• 1No network for highly sensitive code
• 2Limited access to specific domains, package registries, or internal docs
• 3Full access so Claude can search, read docs, and pull dependencies

That dial matters when Claude needs to install a new library, debug a build error from a GitHub Action, or scan documentation from a framework it has not seen in the repo.

Functionally, Anthropic has handed Claude a dedicated computer and told it to work like a human developer. It checks out a branch, edits files, runs tests, and pushes commits, all from this controlled VM. The difference is that the entire workflow runs unattended in the background while you watch from a browser tab.

Riley Brown’s 25-minute Vibecode build rides directly on this setup. Claude sits in its own secure machine, grinding through frontends, backends, and thumbnail generators, while your actual computer just streams the results.

Claude Code’s “secret sauce” starts with a single file: CLAUDE.md. Anthropic treats it as a living spec sheet for the agent, not a throwaway README. Instead of one blob of text, they recommend a hierarchical setup: a root CLAUDE.md plus scoped versions in key folders like /frontend, /backend, and /infra.

Those files spell out architecture, goals, and landmines. You can encode things like “Next.js + Tailwind only,” “no direct DB access from React components,” or “target iOS and Android with a shared API layer.” Claude reads and re-reads these documents during a task, so the agent stops guessing and starts acting like a senior engineer who actually skimmed the design doc.

Anthropic’s own playbook pushes teams to treat CLAUDE.md as a contract. Update it when you change routing, swap ORMs, or add feature flags, and the agent will route new work through that mental model. Ignore it, and you get the same chaos as a human dev working off a stale spec.

On top of that context layer, Claude Code ships a “think hard” and “ultrathink” switch. Those modes force the agent to spend more tokens and time on planning, decomposing a feature into 10–30 concrete steps before it touches code. For multi-file refactors or greenfield features, that extra planning pass dramatically cuts the “rewrite it three times” loop.

Anthropic engineers describe ultrathink as a gear change: the agent drafts plan.md, enumerates risks, and decides where to start editing before it opens a single file. You trade a few extra minutes of compute for fewer broken builds and fewer “fix follow-up PR” cycles. On long-running tasks, that trade almost always wins.

Then there are Skills, which turn best practices into reusable automation. A Skill can encapsulate “run unit tests and lint before any commit,” “enforce our design token palette,” or “regenerate API clients after editing OpenAPI specs.” Claude can call these Skills as hooks whenever relevant files change.

Teams wire Skills into repeatable workflows: - Run pre-commit checks and formatters - Apply brand and layout guidelines to new UI - Trigger CI pipelines or GitHub Actions

Anthropic documents these patterns in Claude Code: Best Practices for Agentic Coding - Anthropic, which effectively reads like a style guide for running an AI engineer at scale.

Code generation only scratches the surface of what Claude Code does in Vibecode. Once it has a repo cloned into that Anthropic-managed VM, it behaves less like autocomplete and more like a DevOps crew on fast-forward, orchestrating everything from tests to deployments without demanding a single terminal command.

Ask it to ship a feature and Claude Code does not just write React components or API handlers. It wires up GitHub Actions workflows, configures environment variables, and targets platforms like Vercel or Netlify so a push to main or a tagged release automatically builds and deploys your app.

Those CI/CD setups are not toy examples. Claude Code can generate workflows that run unit tests, type checks, and linters; build production bundles; and deploy to: - Vercel with preview URLs per pull request - Netlify for static or serverless frontends - Generic Docker-based hosts using registry pushes and rollout steps

Inside Anthropic, engineers already treat Claude Code as the default interface to Git. Internal teams report that well over 90% of their git interactions now flow through Claude Code, which means the agent routinely searches commit history, inspects diffs, and proposes branches without a human touching the CLI.

Bug triage runs through the same system. Point Claude Code at an issue, and it traces stack traces, correlates them with recent commits, locates the offending file, and drafts a fix. It then opens a complete pull request with a human-readable description, test plan, and links back to the original issue or incident.

That pull request is not a skeleton. Claude Code can add or update tests, adjust CI configs if the pipeline fails, and iterate on feedback in review comments, turning code review into a conversation rather than a mechanical slog through style nits and missing checks.

All of this automation attacks the least glamorous parts of software development: wiring secrets, tweaking YAML, babysitting builds, and copying log snippets into tickets. Human developers stay focused on architecture decisions, product trade-offs, and weird edge cases while an AI quietly handles the glue work that used to fill entire sprints.

Code might be Claude Code’s party trick, but Anthropic clearly wants Claude to become a generalist agent that works across your entire desktop, not just your repo. Under the hood, the same Claude Agent SDK that drives Vibecode’s app factory can just as easily drive a spreadsheet analyst, a slide designer, or a research assistant that never gets bored.

Feed Claude a gnarly CSV and it does more than spit out a summary. It can load the file, run real shell commands and Python scripts, calculate metrics, generate charts, and then write a human-readable report that explains why last quarter’s revenue dipped 12% or which cohort churned fastest.

Those outputs don’t have to stay in a chat window. The agent can spin up a full PowerPoint or Google Slides deck: create a slide outline, draft speaker notes, generate charts from your data, and export a .pptx you can present without touching Keynote. You can ask for “10 slides, executive-ready, with 3 charts and 2 competitor quotes,” and it handles the file juggling behind the scenes.

Research work starts to look different too. Claude can crawl through PDFs, web pages, and transcripts, extract citations, cluster themes, and output a structured brief with sections, key claims, and counterarguments. Instead of copy‑pasting into Notion at 1 a.m., you review a pre-written literature summary and ask it to tighten the methodology section.

What makes this powerful is that the same agentic loop used for coding—plan, call tools, inspect results, iterate—applies cleanly to almost any computer task. If you can describe the workflow as “open files, run tools, transform content, save outputs,” Claude can likely automate large chunks of it.

Viewed that way, Claude stops looking like a chat bot and starts looking like an early digital colleague. One instance might live in your GitHub repo, another in your finance folder, another in your research workspace, all sharing the same planning brain but different tool belts. Today it builds apps in 25 minutes; tomorrow it quietly runs your weekly reporting, decks, and background research before you even open your laptop.

Anthropic’s own engineers quietly provide the strongest endorsement: they now run more than 90% of their Git interactions through Claude Code. That includes mundane chores like staging files and writing commit messages, plus gnarlier work like dissecting tangled histories or orchestrating multi-branch rebases.

A new workflow is emerging where human developers behave less like typists and more like architects. You describe the feature, constraints, and edge cases; Claude Code fans out into a plan, edits files in its isolated VM, runs tests, and comes back with a ready-to-review pull request.

Power users treat it like a small, tireless team. They: - Queue multiple bug tickets and have Claude Code patch them in parallel branches - Ask it to write regression tests for every reported issue before touching the code - Have it refactor legacy modules while they focus on product decisions

Test-first development gets a particularly sharp upgrade. You can instruct Claude Code to generate exhaustive unit and integration tests around a spec, then have it write only the code required to make those tests pass, iterating until CI turns green.

Git becomes less of a ritual and more of an API. Developers offload log spelunking, bisects, cherry-picks, and conflict resolution, while retaining control over branch strategy, release timing, and architectural direction.

Crucially, the most effective teams do not hand over the wheel completely. Humans still design systems, set quality bars, and perform final code review; Claude Code handles the repetitive implementation details, documentation updates, and cross-file consistency.

That collaboration pattern mirrors broader agent work built on the same stack. Anthropic’s own guide, Building Agents with the Claude Agent SDK - Anthropic, describes similar human-in-the-loop loops for research, data cleanup, and content workflows.

Professional developers who treat Claude Code as a senior implementation partner—not a replacement—are the ones quietly shipping more features, fixing more bugs, and burning out less.

Agentic AI running in a browser tab, not a terminal window, quietly rewrites what “being a developer” means. Tools like Claude Code inside Vibecode turn a URL, a prompt, and a few clicks into a working web or mobile app in under 25 minutes, complete with backend and UI. That shift moves coding from a specialist interface to something that feels closer to using Figma or Notion.

Today it’s thumbnails and CRUD apps; tomorrow it’s distributed systems, data pipelines, and multi-service architectures assembled by agents. Give an AI a repo, a CLAUDE.md, and a cloud VM, and it can already plan, write, test, and ship code with minimal human touch. Extend that with richer tools—Kubernetes APIs, billing systems, observability dashboards—and you get agents that design and maintain entire platforms, not just features.

That future does not erase humans; it rewires the org chart. New roles emerge around: - Prompt engineering and behavior design - Systems and security architecture for AI-run infra - Governance for data access, compliance, and audit trails Anthropic engineers already route 90%+ of their Git interactions through Claude Code, which hints at how quickly these “AI operators” become the default interface to production code.

Terminal workflows stay critical for low-level control, performance work, and debugging gnarly edge cases. But the browser offers reach: anyone with a laptop or phone can spin up an agent on Vibecode, connect GitHub, and have Claude Code ship a feature branch while they’re in a meeting. Web UIs become the control plane; shells become the escape hatch.

Expect the next era of software creation to fuse both worlds. Browsers orchestrate fleets of agents, terminals handle surgical intervention, and human developers move up a layer—less typing for-loops, more specifying systems and guardrails for the machines that do.

What is Claude Code?

Claude Code is an AI coding assistant from Anthropic that can autonomously write, test, and debug code. It functions as an AI agent capable of handling complex development tasks from start to finish.

How does Vibecode use Claude Code?

Vibecode is a web platform that provides a user-friendly interface to leverage Claude Code's power. It allows users to build full-stack applications from their browser or phone without needing a complex local setup.

Can Claude Code build professional-grade applications?

Yes. As demonstrated, it can build complete web and mobile applications with both a frontend and a backend, capable of being deployed for real-world use.

Is Claude Code better in the browser than the terminal?

The browser version, accessible via tools like Vibecode, excels at accessibility and running long, complex tasks autonomously. The terminal (CLI) version offers more hands-on control for active development sessions.