Skip to content

[codex] update README example sections #6511

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Alek99 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[codex] update README example sections #6511

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 35 additions & 71 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@
---

> [!NOTE]
> 🚀 **Try [Reflex Build](https://build.reflex.dev/)** – our AI-powered app builder that generates full-stack Reflex applications in seconds.
> Build faster with Reflex:
>
> - **[AI Builder](https://build.reflex.dev/)** - Generate full-stack Reflex apps in seconds.
> - **[Agent Toolkit](https://reflex.dev/docs/ai/integrations/ai-onboarding/)** - Connect MCP and Skills to your coding assistant.
> - **[App Management](https://reflex.dev/hosting)** - Deploy and manage your Reflex apps.

---

Expand All @@ -33,7 +37,6 @@ Key features:

- **Pure Python** - Write your app's frontend and backend all in Python, no need to learn Javascript.
- **Full Flexibility** - Reflex is easy to get started with, but can also scale to complex apps.
- **Deploy Instantly** - After building, deploy your app with a [single command](https://reflex.dev/docs/hosting/deploy-quick-start/) or host it on your own server.

See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) to learn how Reflex works under the hood.

Expand All @@ -43,66 +46,22 @@ See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architectu

## 🥳 Create your first app

### 1. Create the project directory
Create a project, add Reflex, and start the development server with [uv](https://docs.astral.sh/uv/):

Replace `my_app_name` with your project name:

```bash
```shell
mkdir my_app_name
cd my_app_name
```

### 2. Install uv

Reflex recommends [uv](https://docs.astral.sh/uv/) for managing your project environment and dependencies.
See the [uv installation docs](https://docs.astral.sh/uv/getting-started/installation/) for your platform.

```bash
# macOS/Linux
curl -LsSf https://astral.sh/uv/install.sh | sh

# Windows (PowerShell)
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
```

### 3. Initialize the Python project

```bash
uv init
```

### 4. Add Reflex

Reflex requires Python 3.10+:

```bash
uv add reflex
```

### 5. Initialize the project

This command initializes a template app in your new directory:

```bash
uv run reflex init
```

### 6. Run the app

You can run this app in development mode:

```bash
uv run reflex run
```

You should see your app running at http://localhost:3000.

Now you can modify the source code in `my_app_name/my_app_name.py`. Reflex has fast refreshes so you can see your changes instantly when you save your code.

### Troubleshooting

If the `reflex` command is not on your PATH, run it through uv instead: `uv run reflex init` and `uv run reflex run`

## 🫧 Example App

Build an image generation app in Python with Reflex: define the UI, manage state in a class, and call an image model from an event handler.
Expand All @@ -115,41 +74,46 @@ Build an image generation app in Python with Reflex: define the UI, manage state
</video>
</div>

## 📑 Resources
```python
import reflex as rx
import openai

<div align="center">
client = openai.OpenAI()

📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;

</div>

## ✅ Status

Reflex launched in December 2022 with the name Pynecone.

🚀 Introducing [Reflex Build](https://build.reflex.dev/) — Our AI-Powered Builder
Reflex Build uses AI to generate complete full-stack Python applications. It helps you quickly create, customize, and refine your Reflex apps — from frontend components to backend logic — so you can focus on your ideas instead of boilerplate code. Whether you’re prototyping or scaling, Reflex Build accelerates development by intelligently scaffolding and optimizing your app’s entire stack.
class State(rx.State):
prompt: str = ""
image_url: str = ""
processing: bool = False

Alongside this, [Reflex Cloud](https://cloud.reflex.dev) launched in 2025 to offer the best hosting experience for your Reflex apps. We’re continuously improving the platform with new features and capabilities.
@rx.event
def set_prompt(self, value: str):
self.prompt = value

Reflex has new releases and features coming every week! Make sure to :star: star and :eyes: watch this repository to stay up to date.
@rx.event
def generate(self):
self.processing = True
yield
response = client.images.generate(model="gpt-image-1.5", prompt=self.prompt)
self.image_url = f"data:image/png;base64,{response.data[0].b64_json}"
self.processing = False

## Contributing

We welcome contributions of any size! Below are some good ways to get started in the Reflex community.
def index():
return rx.vstack(
rx.heading("Image Generator"),
rx.input(placeholder="Enter a prompt...", on_change=State.set_prompt),
rx.button("Generate", on_click=State.generate, loading=State.processing),
rx.image(src=State.image_url),
)
Comment thread
Alek99 marked this conversation as resolved.

- **Join Our Discord**: Our [Discord](https://discord.gg/T5WSbC2YtQ) is the best place to get help on your Reflex project and to discuss how you can contribute.
- **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.

We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
app = rx.App()
app.add_page(index, title="Reflex:Image Generation")
```

## All Thanks To Our Contributors:

<a href="https://github.com/reflex-dev/reflex/graphs/contributors">
<img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
</a>

## License

Reflex is open-source and licensed under the [Apache License 2.0](https://raw.githubusercontent.com/reflex-dev/reflex/main/LICENSE).
Loading