> ## Documentation Index > Fetch the complete documentation index at: https://beta-docs.replo.app/llms.txt > Use this file to discover all available pages before exploring further. # Plans > Where Replo's plans live: browse them, edit them, and hand them to Replo to build. export const TryPromptButton = ({prompt, imageSrc, imageAlt = "Template preview", imageStyles = {}, buttonCta = "Build in Replo"}) => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const API_BASE = "https://api.replo.app"; const APP_URL = "https://dashboard.replo.app"; const LoaderIcon = ; const ChevronIcon = ; async function postJSON(url, body, headers = {}, timeoutMs = 120000) { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), timeoutMs); try { const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", ...headers }, body: JSON.stringify(body ?? ({})), signal: controller.signal }); const responseText = await response.text(); if (!response.ok) throw new Error(`API Error: ${response.status}`); return responseText ? JSON.parse(responseText) : {}; } finally { clearTimeout(timeoutId); } } async function handleTryPrompt(event) { event.preventDefault(); event.stopPropagation(); setIsLoading(true); setError(null); try { const body = { prompt, file: null }; const {seed} = await postJSON(`${API_BASE}/api/v1/marketing/issue-marketing-site-jwt`, body); if (!seed) throw new Error("No seed returned from API"); const url = new URL(APP_URL); url.searchParams.set("type", "agent"); url.hash = `seed=${encodeURIComponent(seed)}`; window.open(url.toString(), "_blank"); setIsLoading(false); } catch (caughtError) { console.error("Failed to generate prompt:", caughtError); const message = caughtError instanceof Error ? caughtError.message : null; setError(message ?? "Something went wrong. Please try again."); setIsLoading(false); } } return
{} {imageSrc && {imageAlt}} {}
{} {} {error &&
{error}
}
; }; export const Screenshot = ({src, altText, width, shadow = true}) => { const generateAltText = imageSrc => { if (!imageSrc) return "Screenshot"; const filename = imageSrc.split("/").pop() ?? ""; const nameWithoutExt = filename.replace(/\.[^/.]+$/, ""); const readable = nameWithoutExt.replace(/[-_]/g, " ").replace(/\b\w/g, char => char.toUpperCase()); return readable === "" ? "Screenshot" : readable; }; const finalAltText = altText ?? generateAltText(src); const imageWidth = width ? `${width}px` : "100%"; return
{} {}
{finalAltText}
; }; A plan is Replo's checklist for a piece of work: the steps it intends to take, written down before it starts. The Plans app is where those plans live. You can browse every plan in your project, read and edit them, create your own, and hand a plan to Replo to build, watching it check off steps as it goes. You can reach Plans from the **+** in the tab bar or the Cmd+K menu. ## Browse your plans Plans Home lists every plan in your project. Switch between a **List** view and an **Icon** view, search by title or filename, and open any plan to read it. Plans you have not opened yet are marked with a **New** badge, and each shows when it was last modified. ## Where plans come from Plans arrive two ways: * **Replo drafts one.** For anything beyond a small change, Replo writes a plan before it starts so you can see its approach first. You can also ask for one directly in chat. * **You create one.** Use **New plan** to either ask Replo to draft a plan from a prompt, or start a **blank** plan and write it yourself. To have Replo draft one, describe the work in chat: ```text theme={null} Draft a plan to add a customer reviews section and an FAQ to my homepage. ``` A blank plan opens to a fresh page. Give it a title, then jot the steps as todos. For example, a from-scratch plan to add social proof to your store might look like: ```text theme={null} Title: Add a customer reviews section to the homepage Todos: - Add a "What cat parents are saying" section below the hero - Include three reviews with names, star ratings, and a photo - Use the cream and green brand colors - Link to the section from the homepage navigation ``` When it is ready, click **Build** and Replo works through your steps. ## Build a plan A plan is an editable document, not a static list, so before you build you can correct Replo's intended approach: reword a step, add a missing one, or delete something you do not want. Catching a wrong turn in the plan is far cheaper than fixing it after Replo has built the wrong thing. When a plan looks right, hand it to Replo with the **Build** button in the header. Replo picks up the plan and carries it out, checking off the todos as it completes them, and the work streams into the chat thread. The Build button reflects where the plan is in its lifecycle: * **Build**: the plan is a draft (or you have edited it since the last build). Click to start. * **Pause**: a build is running. Pause it to edit the plan or send a follow-up in chat, then build again. * **Built**: the most recent build finished. Add or edit a step and it flips back to **Build** so you can re-run with your changes. When a build finishes, the header shows the **Built** badge and the completed steps are checked off, while the chat wraps up with a summary of everything that shipped. ## Related Write prompts that produce good plans. Run prompts on a schedule in the background.