|
| 1 | +# AI Onboarding |
| 2 | + |
| 3 | +```python exec |
| 4 | +import reflex as rx |
| 5 | + |
| 6 | + |
| 7 | +def _resource_card(title: str, body: str, href: str, action: str) -> rx.Component: |
| 8 | + return rx.el.a( |
| 9 | + rx.el.div( |
| 10 | + rx.el.h3(title, class_name="text-base font-semibold text-slate-12"), |
| 11 | + rx.el.p(body, class_name="text-sm leading-6 text-slate-10"), |
| 12 | + rx.el.div(action, class_name="text-sm font-semibold text-violet-10"), |
| 13 | + class_name="flex h-full flex-col gap-2 rounded-lg border border-slate-4 bg-slate-1 p-4 transition-colors hover:bg-slate-2", |
| 14 | + ), |
| 15 | + href=href, |
| 16 | + class_name="no-underline", |
| 17 | + ) |
| 18 | + |
| 19 | + |
| 20 | +def onboarding_resources() -> rx.Component: |
| 21 | + return rx.el.div( |
| 22 | + _resource_card( |
| 23 | + "Docs for Agents", |
| 24 | + "Give your agent current Reflex documentation as Markdown, llms.txt, or structured MCP context.", |
| 25 | + "/llms.txt", |
| 26 | + "Open llms.txt", |
| 27 | + ), |
| 28 | + _resource_card( |
| 29 | + "MCP", |
| 30 | + "Connect supported AI tools to Reflex documentation and component information through MCP.", |
| 31 | + "/ai/integrations/mcp-overview/", |
| 32 | + "View MCP overview", |
| 33 | + ), |
| 34 | + _resource_card( |
| 35 | + "Skills", |
| 36 | + "Install Reflex Agent Skills so assistants follow Reflex-specific workflows for docs, setup, and process management.", |
| 37 | + "/ai/integrations/skills/", |
| 38 | + "Install skills", |
| 39 | + ), |
| 40 | + _resource_card( |
| 41 | + "Reflex Build", |
| 42 | + "Use Reflex Build when you want an AI-native environment for creating, editing, previewing, and shipping apps.", |
| 43 | + "/ai/overview/best-practices/", |
| 44 | + "Read best practices", |
| 45 | + ), |
| 46 | + class_name="grid grid-cols-1 gap-3 md:grid-cols-2 my-6", |
| 47 | + ) |
| 48 | +``` |
| 49 | + |
| 50 | +Everything you need to onboard your AI coding assistant to Reflex. |
| 51 | + |
| 52 | +If you are building Reflex apps with AI, combine current docs, structured MCP context, and local skills so the assistant can plan, code, run, and debug with the same assumptions as the Reflex docs. |
| 53 | + |
| 54 | +```python eval |
| 55 | +onboarding_resources() |
| 56 | +``` |
| 57 | + |
| 58 | +## Prerequisite: Choose Your Workflow |
| 59 | + |
| 60 | +You do not need an API key to read Reflex documentation. Start by deciding how your assistant will work with Reflex: |
| 61 | + |
| 62 | +- For local app development, use Python 3.10 or newer and a project virtual environment. |
| 63 | +- For current documentation context, give the assistant Markdown docs or `llms.txt`. |
| 64 | +- For structured tool access, use the Reflex MCP integration. |
| 65 | +- For repeatable agent behavior, install Reflex Agent Skills. |
| 66 | +- For a browser-based AI builder, use Reflex Build. |
| 67 | + |
| 68 | +## Reflex Docs for Agents |
| 69 | + |
| 70 | +You can give your assistant current Reflex documentation in a few ways. |
| 71 | + |
| 72 | +`````md tabs |
| 73 | + |
| 74 | +## Markdown Pages |
| 75 | + |
| 76 | +Every docs page has a Markdown version that agents can read directly. Add `.md` to the docs path: |
| 77 | + |
| 78 | +```text |
| 79 | +https://reflex.dev/docs/ai/integrations/ai-onboarding.md |
| 80 | +``` |
| 81 | + |
| 82 | +Use this when an agent needs one focused page. |
| 83 | + |
| 84 | + |
| 85 | +## llms.txt |
| 86 | + |
| 87 | +Use the generated docs index when an agent needs a broad map of Reflex docs: |
| 88 | + |
| 89 | +```text |
| 90 | +https://reflex.dev/docs/llms.txt |
| 91 | +``` |
| 92 | + |
| 93 | +The index groups docs by section and links to agent-friendly Markdown assets. |
| 94 | + |
| 95 | + |
| 96 | +## MCP |
| 97 | + |
| 98 | +Use MCP when your editor or agent can call tools for structured documentation and component lookup: |
| 99 | + |
| 100 | +```text |
| 101 | +https://mcp.reflex.dev/mcp |
| 102 | +``` |
| 103 | + |
| 104 | +See the [MCP overview](/docs/ai/integrations/mcp-overview/) and [MCP installation](/docs/ai/integrations/mcp-installation/) guides for details. |
| 105 | + |
| 106 | +````` |
| 107 | + |
| 108 | +## Reflex MCP |
| 109 | + |
| 110 | +The Reflex MCP integration gives supported AI tools structured access to Reflex framework docs and component information. Use it when your assistant can connect to an MCP server and benefit from tool-assisted lookup while editing code. |
| 111 | + |
| 112 | +```md alert warning |
| 113 | +# The Reflex MCP integration is currently only available for enterprise customers. Please [book a demo](https://reflex.dev/pricing/) to discuss access. |
| 114 | +``` |
| 115 | + |
| 116 | +## Reflex Agent Skills |
| 117 | + |
| 118 | +Reflex Agent Skills are local instruction packs that teach AI assistants how to work with Reflex projects. They cover: |
| 119 | + |
| 120 | +- Current Reflex docs and concept lookup. |
| 121 | +- Python environment setup for Reflex projects. |
| 122 | +- Reflex compile, run, restart, and debugging workflows. |
| 123 | + |
| 124 | +Install the skill pack from the [reflex-dev/agent-skills](https://github.com/reflex-dev/agent-skills) repository, or follow the [Skills installation guide](/docs/ai/integrations/skills/). |
| 125 | + |
| 126 | +```bash |
| 127 | +npx skills add reflex-dev/agent-skills |
| 128 | +``` |
| 129 | + |
| 130 | +## Quick Start Prompts |
| 131 | + |
| 132 | +Use these prompts to give your agent a strong starting point. |
| 133 | + |
| 134 | +`````md tabs |
| 135 | + |
| 136 | +## New App |
| 137 | + |
| 138 | +```text |
| 139 | +Create a new Reflex app. Use current Reflex documentation, set up a Python 3.10+ virtual environment, initialize the project, and validate it with reflex compile --dry before handing it back. |
| 140 | +``` |
| 141 | + |
| 142 | + |
| 143 | +## Existing App |
| 144 | + |
| 145 | +```text |
| 146 | +Work on this existing Reflex app. First inspect the project structure and current dependencies. Use Reflex docs for current APIs, make the requested change, then run reflex compile --dry or the project's existing test command. |
| 147 | +``` |
| 148 | + |
| 149 | + |
| 150 | +## Debugging |
| 151 | + |
| 152 | +```text |
| 153 | +Debug this Reflex app. Read the error and relevant logs, identify whether the failure is in imports, state, event handlers, routing, components, or runtime setup, then apply the smallest fix and re-run validation. |
| 154 | +``` |
| 155 | + |
| 156 | +````` |
| 157 | + |
| 158 | +## Reflex Build |
| 159 | + |
| 160 | +Reflex Build is the AI-native way to create Reflex apps in the browser. Use it when you want to generate, edit, preview, and share apps without setting up a local environment first. |
| 161 | + |
| 162 | +Start with the [Reflex Build best practices](/docs/ai/overview/best-practices/) guide, then use MCP and Skills when you want your local assistant to keep working with the same Reflex concepts. |
| 163 | + |
| 164 | +## Recommended Validation |
| 165 | + |
| 166 | +Ask your assistant to validate Reflex changes before it hands work back: |
| 167 | + |
| 168 | +```bash |
| 169 | +reflex compile --dry |
| 170 | +``` |
| 171 | + |
| 172 | +For running apps, pair that with the process-management workflow from Reflex Agent Skills so the assistant restarts only the server process it owns. |
0 commit comments