From App Idea to First Feature: DevReady.Ai + Lovable Live Demo

What happens when you take a simple app idea, plan it properly, then hand that structured context to an AI coding tool?

In this live demo, Anthony Sapountzis, Founder and CTO of Aerion Technologies and DevReady.Ai, starts with a simple idea for an approval management app called ApprovalMate.

He uses DevReady.Ai to expand the idea, generate the project brief, map the capabilities and features, define the requirements and acceptance criteria, and prepare the first feature for development.

He then connects the project to Lovable through MCP, sends the feature into the Build Queue and starts building the first part of the app.

A quick note before you watch

This demo was recorded before the public launch of DevReady.Ai, so some parts of the interface may look slightly different from the version you see today.

The core workflow remains the same.

This particular demo focuses on building with Lovable. We’ll be adding more demos and dedicated integration guides for other supported development tools.

What You’ll See in This Demo

The walkthrough takes ApprovalMate through the complete journey from an initial idea to its first working feature.

1. Start With a One-Line App Idea

Anthony begins with a very simple concept: a business system for managing internal approval requests.

Rather than trying to describe every requirement upfront, he starts with the basic idea and uses Improve with AI to give it more context.

DevReady.Ai expands that initial prompt into a clearer explanation of what ApprovalMate should do and the types of approvals it may need to support.

This is an important part of the DevReady.Ai approach: you do not need to know everything about your product before you start planning it.

2. Generate and Review the Project Survey

DevReady.Ai then generates a survey based on the ApprovalMate idea.

The AI helps answer the questions using the information already available about the project. Anthony can then:

  • Edit an answer directly
  • Regenerate it
  • Refine it with additional instructions
  • Accept it and continue

The survey explores the idea from several angles, including stakeholders, use cases, goals, pain points and the problem the product is intended to solve.

This gives DevReady.Ai more context before it begins defining the software itself.

3. Generate the DevReady Brief

Once the survey is complete, DevReady.Ai generates the DevReady Brief.

The brief turns the information gathered so far into a structured overview of the product, including areas such as:

  • Who the users are
  • The core problem
  • Key features
  • Architecture requirements
  • How the platform should work
  • The main system flow
  • Potential future features

Anthony describes this as the top-level planning layer for the product before moving into the roadmap. Pasted text

4. Generate the Capability Map

Next, the project moves into the roadmap.

DevReady.Ai can generate the major capabilities required for the software. These represent the larger areas of functionality within the product.

For ApprovalMate, the generated capability map includes areas such as:

  • Centralised approval management
  • Enhanced communication
  • Reporting and analytics
  • Mobile accessibility
  • Customisable user permissions

The platform can generate only the top-level capabilities and features, or go further and create the supporting requirements, rules and acceptance criteria as well.

5. Prioritise the Features

Within each capability, the features can then be reviewed and organised into the product roadmap.

For the first ApprovalMate capability, Anthony works through features including:

  • Submission form
  • Approval dashboard
  • Automated notifications
  • Real-time status updates
  • Priority indicators
  • Deadline alerts
  • Role-based access control
  • Customisable approval workflows

For the demo, Anthony chooses the Submission Form as the first feature to build.

Features can be arranged based on what should be worked on first, what can come later and what should remain as an idea for now. Pasted text

For the demo, Anthony chooses the Submission Form as the first feature to build.

Go Beyond a Feature Description

Opening the Submission Form shows why planning before coding matters.

Instead of giving Lovable a prompt that simply says: Build me an approval tracker, DevReady.Ai builds out the information the coding tool will need to understand what the feature is expected to do.

For the Submission Form, this includes detailed requirements such as:

  • Pre-filled forms
  • Editing pre-filled data
  • Clearing pre-filled data
  • Auto-filling user information
  • Saving drafts
  • Accessing and editing drafts
  • Role-based access
  • Submission confirmation
  • Deadlines and due-date validation

DevReady.Ai also generates the rules that sit beneath those requirements. For example, a due date may need to use a date picker and be restricted to dates in the future.

Define the Acceptance Criteria Before Building

The feature also includes acceptance criteria.

These define what needs to be true before the feature can be considered complete.

Anthony explains that this gives the coding tool clear goalposts. Instead of simply generating something that looks roughly right, the tool has requirements, rules and criteria it can work against.

This creates a much clearer path from:

What should this feature do?

to

How will we know it has been built correctly?

Move the Feature to DevReady

Once the Submission Form has been planned and reviewed, Anthony changes its status to DevReady.

That signals that the feature is ready to move out of planning.

From there, he selects Send to Build Queue, placing the feature into the build pipeline.

This is the handoff point between planning and implementation.

Connect DevReady.Ai to Lovable Through MCP

The next step is connecting ApprovalMate to Lovable.

For this demo, Anthony copies the DevReady.Ai MCP URL and adds it inside Lovable under its connector and MCP settings.

He gives the connection a name, authorises it and allows Lovable to access the relevant DevReady.Ai information.

Once connected, Lovable can retrieve the planning context from DevReady.Ai rather than relying on Anthony to reproduce it manually in another prompt.

That includes information from the project brief, features and supporting requirements.

Build the First Feature in Smaller Pieces

DevReady.Ai breaks larger features into smaller implementation units, or slices.

Instead of asking Lovable to build the entire approval management platform in one go, the first feature can be implemented piece by piece.

In the demo, Lovable identifies those slices and begins with the first part of the Submission Form.

This means the build process becomes more controlled:

Feature
↓
Smaller implementation requirements
↓
Build one piece
↓
Review progress
↓
Continue

Track Build Progress in DevReady.Ai

Once Lovable begins building, the Build Queue updates inside DevReady.Ai.

Anthony shows the feature moving into In Progress, with visibility into:

  • The requirement currently being built
  • How many requirementss remain
  • The current build status
  • The details of the feature being implemented

The MCP connection updates this information as the AI coding tool works.

This allows the planning and build process to stay connected rather than becoming two completely separate workflows.

See the First Part of ApprovalMate Take Shape

As Lovable works through the first slice, the ApprovalMate interface begins to appear.

The first version of the approval request form becomes the starting point for the application, and the build can then continue slice by slice.

The important part of the demo is that Lovable is building from a plan containing:

  • Product context
  • Feature requirements
  • Rules
  • Acceptance criteria
  • Smaller implementation slices

rather than interpreting a short prompt on its own.

Verify the Completed Feature Against the Plan

Planning does not stop once code has been generated.

When the feature reaches completion, the acceptance criteria become available for review inside DevReady.Ai.

You can check whether each requirement has actually been satisfied.

If something is missing, you know which criterion has not been met and can return to your AI coding tool with more precise information about what needs to change.

The workflow then becomes repeatable:

Plan → DevReady → Build Queue → Build → Verify → Next Feature

Can You Use DevReady.Ai With an Existing Project?

Yes.

During the Q&A, Anthony also discusses using DevReady.Ai when software already exists.

A GitHub project can be used as a starting point so DevReady.Ai can analyse the existing software and help identify its feature set, requirements, rules and context.

From there, you can continue planning future work inside DevReady.Ai rather than starting again from scratch.

What This Demo Shows

By the end of the session, ApprovalMate has moved through:

That is the core DevReady.Ai workflow this demo is designed to show. Pasted text

Recorded Before the DevReady.Ai Launch

This session was recorded while DevReady.Ai was still preparing for launch.

You may therefore notice some differences between the interface shown in the video and the current version of the platform.

We’re also creating more up-to-date demos and guides as DevReady.Ai evolves.

This walkthrough focuses specifically on the DevReady.Ai + Lovable workflow.

For help with other supported development tools, visit our Integrations guides.

Ready to Plan Your Own Build?

Your idea does not need to begin as a technical specification.

Start with what you know. DevReady.Ai can help you turn it into a clearer software plan, work through the functionality and prepare features for your build workflow.

Key Takeaways

  • You can begin DevReady.Ai with a simple one-line software idea.
  • AI helps expand the initial idea and generate a tailored project survey.
  • The DevReady Brief turns that information into a structured product overview.
  • Capabilities and features organise the product into manageable areas of functionality.
  • Requirements, rules and acceptance criteria provide more detail before coding begins.
  • A feature can be marked DevReady and sent to the Build Queue when it is ready for implementation.
  • MCP allows Lovable to access structured project context from DevReady.Ai.
  • Build progress can be tracked inside DevReady.Ai and completed features checked against their acceptance criteria.

FAQs

Does this demo use the current version of DevReady.Ai?

The demo was recorded before the public launch of DevReady.Ai, so some elements of the interface may now look different. The overall planning-to-build workflow remains relevant.

Which coding tool is used in this demo?

This walkthrough specifically demonstrates Lovable connected to DevReady.Ai through MCP.

Does DevReady.Ai generate the requirements for a feature?

Yes. The demo shows DevReady.Ai generating requirements, rules and acceptance criteria for the ApprovalMate Submission Form before the feature moves into development.

What happens when a feature is ready to build?

The feature can be moved to DevReady and then sent to the Build Queue.

What does MCP do in this workflow?

MCP allows Lovable to access the project information available through DevReady.Ai so it can work from the structured planning context rather than relying entirely on a new prompt.

Can DevReady.Ai be used for an existing software project?

The demo shows that an existing GitHub project can be analysed to help reconstruct the feature set, requirements and context so future work can be planned in DevReady.Ai.