From e26a1b161d4cb349b6e3584944da6228f6422a9f Mon Sep 17 00:00:00 2001 From: Alek Petuskey Date: Thu, 14 May 2026 13:47:59 -0700 Subject: [PATCH] update readme example sections --- README.md | 106 ++++++++++++++++++------------------------------------ 1 file changed, 35 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index 7b9c175478f..2e3b7361527 100644 --- a/README.md +++ b/README.md @@ -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. --- @@ -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. @@ -43,55 +46,15 @@ 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 ``` @@ -99,10 +62,6 @@ 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. @@ -115,41 +74,46 @@ Build an image generation app in Python with Reflex: define the UI, manage state -## πŸ“‘ Resources +```python +import reflex as rx +import openai -
+client = openai.OpenAI() -πŸ“‘ [Docs](https://reflex.dev/docs/getting-started/introduction)   |   πŸ—žοΈ [Blog](https://reflex.dev/blog)   |   πŸ“± [Component Library](https://reflex.dev/docs/library)   |   πŸ–ΌοΈ [Templates](https://reflex.dev/templates/)   |   πŸ›Έ [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)   -
- -## βœ… 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), + ) -- **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: - -## License - -Reflex is open-source and licensed under the [Apache License 2.0](https://raw.githubusercontent.com/reflex-dev/reflex/main/LICENSE).