{}

{
    const ta = e.currentTarget;
    ta.style.height = "auto";
    ta.style.height = ta.scrollHeight + "px";
    updateAgentInputButtonState(findAgentInputContainer(ta));
  }} style={{
    display: "block",
    width: "100%",
    minHeight: "21px",
    maxHeight: "calc(14px * 1.5 * 10)",
    padding: 0,
    margin: 0,
    border: "none",
    outline: "none",
    resize: "none",
    fontSize: "14px",
    lineHeight: "1.5",
    color: "var(--ai-text-primary)",
    background: "transparent",
    fontFamily: "inherit",
    boxSizing: "border-box",
    overflowY: "auto"
  }} />
          </div>
          {}
          <div style={{
    position: "absolute",
    left: "8px",
    right: "8px",
    bottom: "8px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  }}>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    overflow: "hidden",
    minWidth: 0
  }}>
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Add attachment" type="button">
                {PlusIcon}
              </button>
              <div id="agent-input-pills" data-agent-input-role="pills" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    overflow: "hidden"
  }}></div>
            </div>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    flexShrink: 0
  }}>
              {highlightPlan ? <div className="ai-plan-wrap" onClick={e => {
    const wrap = e.currentTarget;
    wrap.classList.toggle("ai-plan-off");
  }}>
                  <label className="ai-plan-btn-highlight" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    height: "32px",
    padding: "0 8px",
    cursor: "pointer",
    fontSize: "12px",
    fontFamily: "inherit",
    transition: "background 120ms ease-out"
  }}>
                    <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" defaultChecked />
                    <span>Plan</span>
                  </label>
                </div> : <label className="ai-plan-checkbox-label">
                  <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" />
                  <span>Plan</span>
                </label>}
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Start voice input" type="button">
                {MicIcon}
              </button>
              {highlightStart ? <div className="ai-start-wrap">
                  <button data-agent-input-role="start-button" className="ai-icon-btn ai-start-btn-highlight" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    borderRadius: "6px",
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                    {ArrowUpIcon}
                  </button>
                </div> : <button data-agent-input-role="start-button" className="ai-icon-btn" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                  {ArrowUpIcon}
                </button>}
            </div>
          </div>
        </div>
      </div>
    </div>;
};

Agent is Replit's AI builder and your companion for turning ideas into software. Agent can plan changes, write code, explain behavior, debug issues, and improve your app.

[Vibe coding 101](/learn/foundations/vibe-coding-101) explains the mindset, while this page explains how to work with Agent in practice. [Effective prompting](/learn/effective-prompting) explains how to write clearer instructions.

Think of Agent as the quarterback on the field: it reads the situation, chooses a path, and moves the work forward. You are the coach: you set the strategy, call the play, review what happened, and decide the next move.

Agent can do a lot, but it works best when you lead the process: be specific, plan the work, add context, review and test, and use checkpoints when you need to recover.

## Five tips for building with Agent

Use these habits when you work with Agent:

1. Be specific.
2. Plan the work.
3. Add context.
4. Review and test.
5. Use checkpoints.

## Be specific

Agent can handle complex work, but it needs clear direction.

A useful request explains what you want, what matters, and what should stay the same. It does not need to describe every implementation detail, but it should give Agent enough direction to make good decisions.

Instead of:

<AiPrompt>
  Make my app better.
</AiPrompt>

Try:

<AiPrompt>
  Improve the signup page so visitors understand what the product does before creating an account.<br />
  Keep the current color palette, keep the form fields the same, and make the primary button more obvious.
</AiPrompt>

The second prompt gives Agent a goal, a focus area, and constraints.

When your request has several parts, say what matters most.

<AiPrompt>
  Add a simple admin view for managing catering requests.<br />
  The most important part is being able to see new requests, mark them as contacted, and filter by status.<br />
  Keep the first version simple.
</AiPrompt>

Agent can break that work into steps, but your direction tells it what success looks like.

For more examples of specific instructions, see [Effective prompting](/learn/effective-prompting).

## Plan the work

Planning helps when the work has uncertainty, multiple steps, tradeoffs, or anything you want to approve before files change.

You can ask Agent to make a plan in the conversation:

<AiPrompt>
  Before making changes, create a plan for adding online ordering.<br />
  Include the user flow, data needed, pages or components that will change, risks, and how I should test it.
</AiPrompt>

Use [Plan mode](/references/agent/plan-mode) when you want Agent to think first and wait for your approval before changing files. Toggle **Plan** in the prompt composer before submitting.

When Agent finishes thinking, you will see a **task plan is ready for review** banner with a **Review now** button.

## Add context

Context helps Agent understand what matters.

You can add context with text, screenshots, sketches, files, data, errors, or Canvas annotations. Use the format that best explains the problem.

Use text when the change is about behavior, goals, or constraints:

<AiPrompt>
  Context: this app is for parents ordering birthday cakes.<br />
  Keep the form short, make pickup details obvious, and avoid anything that feels corporate.
</AiPrompt>

Use screenshots or sketches when layout is hard to describe in words:

<AiPrompt>
  Use this screenshot as layout direction for the request form.<br />
  Match the overall structure, but keep the existing fields and submission behavior.
</AiPrompt>

Use [Canvas](/learn/design/canvas) annotations when the change is visual and you want to point to a specific part of the app.

<AiPrompt>
  Use my Canvas annotations to update the hero section.<br />
  Apply the notes to the headline, image, and primary button only.<br />
  Do not change the catering request form.
</AiPrompt>

Good context also includes what should not change. That helps Agent improve one area without accidentally rewriting another.

## Review and test

Agent may propose a plan before building, and it may summarize what changed afterward. Read both.

Open the plan by selecting **View** on the task plan card. The expanded plan shows what Agent intends to build, the success criteria, what is out of scope, and the steps Agent will follow.

Before Agent builds, review the plan:

* Does this solve the right problem?
* Is anything missing?
* Is anything out of scope?
* Is there a smaller version to build first?
* Does it explain how you should test the result?

If the plan is too broad, ask Agent to reduce it.

<AiPrompt>
  This plan is too broad.<br />
  Reduce it to the smallest version I can test today.<br />
  Move everything else into a future improvements list.
</AiPrompt>

After Agent builds, test the app yourself. Open Preview and use it like the person it is for.

Check:

* Can someone complete the main action?
* Did the requested change happen?
* Does the app still work on mobile?
* Did any important behavior break?
* Did Agent change something unrelated?
* Is the result good enough to keep building on?

If something is wrong, describe what you saw.

Instead of:

Try:

<AiPrompt>
  When I submit the catering request form, the success message appears, but the form still shows the old text.<br />
  Clear the form after submission and keep the success message visible.
</AiPrompt>

Specific feedback helps Agent fix the right issue.

## Use checkpoints

Checkpoints help you recover when a change goes in the wrong direction.

Use focused feedback when the result is close:

<AiPrompt>
  This is close, but the form is now too long.<br />
  Keep the new visual style, remove the optional notes field, and make the pickup date easier to scan.
</AiPrompt>

Use a checkpoint when the app is worse than before, important behavior broke, or Agent changed more than expected.

Open **History** in the Agent panel to see checkpoints. Each checkpoint shows what changed, with **Rollback here** and **Changes** controls.

When you select **Rollback here**, Agent confirms what will be restored before applying the rollback.

If you are unsure whether to fix forward or roll back, ask Agent to help compare.

<AiPrompt>
  The last change made the app worse.<br />
  Compare the current version to the previous working version.<br />
  Tell me whether it is safer to fix forward or roll back, and explain why.
</AiPrompt>

Wrong turns are normal. Checkpoints let you explore without losing the ability to return to a safer version.

For more recovery guidance, see [Checkpoints and rollbacks](/references/version-control/checkpoints-and-rollbacks).

## What good Agent collaboration feels like

You are on the right track when:

* Your requests explain the goal and constraints
* Agent's plan is clear enough to review
* You add screenshots, files, or Canvas notes when words are not enough
* You test important flows after changes
* You give focused feedback when something is off
* You use checkpoints instead of trying to untangle a bad change forever

## Next step

<CardGroup cols={2}>
  <Card icon="comment-dots" href="/learn/effective-prompting">
    Learn how to write clearer instructions that Agent can act on confidently.
  </Card>

<Card title="Build and publish your first app" icon="rocket" href="/build/your-first-app">
    Practice working with Agent from first prompt to published app.
  </Card>

<Card title="Checkpoints and rollbacks" icon="rotate-left" href="/references/version-control/checkpoints-and-rollbacks">
    Learn how to return to a safer state when needed.
  </Card>
</CardGroup>