For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.
Reflex Logo
Docs Logo
AI

/

Overview

/

Tutorial

Your First Reflex Build App

In this tutorial, you will create an employee dashboard, improve it through focused prompts, test the main workflow, and prepare it to share.

1. Create the App

Open a project, select Builder, and start from the Your Apps tab. Enter this prompt:

Before sending the prompt, you can attach a visual reference, choose a design system, set the app visibility, or add an integration. Keep Agent Effort on Auto unless you know the task needs more or less reasoning.

Reflex Build dashboard with the app creation prompt

2. Check the First Result

When generation finishes, use Preview to interact with the app. Check that the table and chart render and that the page works at different widths.

If the result is close, keep it and ask for one targeted improvement at a time.

The first generated employee dashboard shown in Preview

3. Add Filtering

Confirm that the table and chart stay in sync for a name search, a department selection, and the combined filters.

The employee dashboard with its department filter open

4. Add Employee Management

This prompt explicitly requests create, edit, and delete behavior. If the generated app uses only sample in-memory data, ask the agent to connect a database before relying on the data in production.

The Add employee form generated for the employee dashboard

5. Add a Second Page

Use the route selector in Preview to check both pages and verify that navigation works in each direction.

The generated Chat page open in Preview

6. Review the Result

Open Preview and test the result. Switch Preview to a desktop width so Review mode is available. For feedback tied to a specific visual area, select Review mode, draw around the chart spacing and title, and add a comment such as:

Select Send review to send the annotation and marked screenshot to the agent. Wait for the follow-up generation to finish, then check the same area again. Use a normal chat prompt for feedback that does not point to a specific UI region.

See Code and Review for the complete workflow.

7. Test the Main Workflow

Select Testing in the app workspace and create a browser test in plain language:

Generate the test, run it, and use the result to fix any broken interaction. See Testing for the complete workflow.

Passing tests in the Reflex Build Testing panel

8. Share or Deploy

Use the menu next to Deploy to copy or download the app. Public apps can also be shared with a read-only link. When the app is ready for production, select Deploy and follow the deployment steps.

You now have a useful first version and a repeatable workflow: create, preview, refine, test, and ship.

Built with Reflex