Agent modes

Higher-performance models for more complex work. Best for larger changes, deeper reasoning, and longer builds.

{featureRow("appTesting", "App testing", "Agent tests your app automatically")} {featureRow("codeOptimization", "Code optimization", "Agent reviews code for bugs and improvements")}

{featureRow("turbo", "Turbo", "Fastest models, up to 2.5x speed and 6x cost", "turbo")}

; }; export const AgentInput = ({defaultPrompt = "", highlightPlan = false, highlightStart = false, showTypewriter = true}) => { const AGENT_INPUT_TYPEWRITER_SCRIPT_ID = "replit-docs-typewriter-core"; const AGENT_INPUT_TYPEWRITER_SRC = "https://unpkg.com/typewriter-effect@2.18.2/dist/core.js"; const AGENT_INPUT_TYPEWRITER_PROMPTS = ["Build a project tracker for my team", "Design a landing page for my coffee shop", "Add Stripe payments to my app"]; const AGENT_INPUT_TYPING_SPEED = 40; const AGENT_INPUT_DELETE_SPEED = 20; const AGENT_INPUT_PAUSE_AFTER = 2000; const AGENT_INPUT_START_DELAY = 500; const getAgentInputTypewriterLoader = () => { if (typeof window === "undefined") { return null; } if (!window.__replitDocsAgentInputTypewriterLoader) { window.__replitDocsAgentInputTypewriterLoader = {}; } return window.__replitDocsAgentInputTypewriterLoader; }; const ensureAgentInputTypewriterCore = () => { if (typeof window === "undefined" || typeof document === "undefined") { return Promise.resolve(null); } if (window.Typewriter) { return Promise.resolve(window.Typewriter); } const loader = getAgentInputTypewriterLoader(); if (loader.promise) { return loader.promise; } loader.promise = new Promise((resolve, reject) => { const handleLoad = () => { if (window.Typewriter) { resolve(window.Typewriter); return; } loader.promise = null; reject(new Error("Typewriter core loaded without a global Typewriter export.")); }; const handleError = () => { loader.promise = null; reject(new Error("Failed to load typewriter core.")); }; const existingScript = document.getElementById(AGENT_INPUT_TYPEWRITER_SCRIPT_ID); if (existingScript) { existingScript.addEventListener("load", handleLoad, { once: true }); existingScript.addEventListener("error", handleError, { once: true }); return; } const script = document.createElement("script"); script.id = AGENT_INPUT_TYPEWRITER_SCRIPT_ID; script.src = AGENT_INPUT_TYPEWRITER_SRC; script.async = true; script.addEventListener("load", handleLoad, { once: true }); script.addEventListener("error", handleError, { once: true }); document.head.appendChild(script); }); return loader.promise; }; const getAgentInputTypewriterRegistry = () => { if (typeof window === "undefined") { return null; } if (!window.__replitDocsAgentInputTypewriters) { window.__replitDocsAgentInputTypewriters = new WeakMap(); } return window.__replitDocsAgentInputTypewriters; }; const findAgentInputContainer = node => node?.closest?.("[data-agent-input-container]") || null; const getAgentInputElements = container => ({ textarea: container?.querySelector?.('[data-agent-input-role="textarea"]') || null, startButton: container?.querySelector?.('[data-agent-input-role="start-button"]') || null, pillsContainer: container?.querySelector?.('[data-agent-input-role="pills"]') || null }); const getAgentInputPromptValue = container => { const {textarea} = getAgentInputElements(container); return textarea?.value?.trim() || ""; }; const updateAgentInputButtonState = container => { const {startButton} = getAgentInputElements(container); if (!startButton) { return; } const hasText = getAgentInputPromptValue(container).length > 0; startButton.style.opacity = hasText ? "1" : "0.4"; startButton.style.cursor = hasText ? "pointer" : "not-allowed"; }; const stopAgentInputTypewriter = (textarea, {placeholder, clearDemo = false} = {}) => { if (typeof window === "undefined" || !textarea) { return; } const registry = getAgentInputTypewriterRegistry(); const record = registry?.get(textarea); if (!record) { if (placeholder) { textarea.setAttribute("placeholder", placeholder); } return; } record.stopped = true; if (record.startTimer) { window.clearTimeout(record.startTimer); } if (record.writeFrame) { window.cancelAnimationFrame(record.writeFrame); } if (record.typewriter?.stop) { record.typewriter.stop(); } textarea.removeEventListener("focus", record.handleFocus); textarea.removeEventListener("pointerdown", record.handlePointerDown); textarea.removeEventListener("input", record.handleInput); if (clearDemo && textarea.value === record.pendingValue) { textarea.value = ""; } textarea.setAttribute("placeholder", placeholder || ""); updateAgentInputButtonState(record.container); registry.delete(textarea); }; const startAgentInputTypewriter = (container, {defaultPrompt, placeholder, showTypewriter}) => { if (typeof window === "undefined" || typeof document === "undefined" || !container) { return; } const {textarea} = getAgentInputElements(container); if (!textarea) { return; } if (!showTypewriter || defaultPrompt) { stopAgentInputTypewriter(textarea, { placeholder }); textarea.setAttribute("placeholder", placeholder); updateAgentInputButtonState(container); return; } const registry = getAgentInputTypewriterRegistry(); const existingRecord = registry.get(textarea); if (existingRecord && !existingRecord.stopped) { updateAgentInputButtonState(container); return; } textarea.setAttribute("placeholder", ""); if (textarea.value) { textarea.value = ""; } updateAgentInputButtonState(container); const record = { container, element: textarea, pendingValue: "", renderedValue: "", stopped: false, startTimer: null, writeFrame: null, typewriter: null, handleFocus: null, handlePointerDown: null, handleInput: null }; const queueValue = nextValue => { record.pendingValue = nextValue; if (record.writeFrame) { return; } record.writeFrame = window.requestAnimationFrame(() => { record.writeFrame = null; if (record.stopped || registry.get(textarea) !== record || !textarea.isConnected) { return; } if (textarea.value !== record.pendingValue) { textarea.value = record.pendingValue; } updateAgentInputButtonState(container); }); }; const stopDemo = () => { stopAgentInputTypewriter(textarea, { placeholder, clearDemo: true }); }; record.handleFocus = stopDemo; record.handlePointerDown = stopDemo; record.handleInput = stopDemo; registry.set(textarea, record); textarea.addEventListener("focus", record.handleFocus, { once: true }); textarea.addEventListener("pointerdown", record.handlePointerDown, { once: true }); textarea.addEventListener("input", record.handleInput, { once: true }); record.startTimer = window.setTimeout(() => { ensureAgentInputTypewriterCore().then(Typewriter => { if (!Typewriter || record.stopped || registry.get(textarea) !== record || !textarea.isConnected) { return; } const typewriter = new Typewriter(null, { loop: true, delay: AGENT_INPUT_TYPING_SPEED, deleteSpeed: AGENT_INPUT_DELETE_SPEED, cursor: "", skipAddStyles: true, wrapperClassName: "", cursorClassName: "", onCreateTextNode: character => { record.renderedValue += character; queueValue(record.renderedValue); return null; }, onRemoveNode: () => { record.renderedValue = record.renderedValue.slice(0, -1); queueValue(record.renderedValue); } }); AGENT_INPUT_TYPEWRITER_PROMPTS.forEach(prompt => { typewriter.typeString(prompt).pauseFor(AGENT_INPUT_PAUSE_AFTER).deleteAll(AGENT_INPUT_DELETE_SPEED).pauseFor(400); }); record.typewriter = typewriter; typewriter.start(); }).catch(() => { stopAgentInputTypewriter(textarea, { placeholder }); }); }, AGENT_INPUT_START_DELAY); }; if (typeof document !== "undefined" && !window.LZString) { const script = document.createElement("script"); script.src = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"; document.head.appendChild(script); } const placeholder = "Describe your idea, Replit will bring it to life..."; const outputTypes = [{ name: "Web", iconSvg: '', icon: }, { name: "Mobile", iconSvg: '', icon: }, { name: "Slides", iconSvg: '', icon: }, { name: "Animation", iconSvg: '', icon: }, { name: "Design", iconSvg: '', icon: }]; const checkSvg = ''; if (typeof document !== "undefined" && !document.getElementById("agent-input-styles")) { const style = document.createElement("style"); style.id = "agent-input-styles"; style.textContent = ` /* Theme variables - light mode */ [data-agent-input-container] { --ai-surface-bg: var(--replit-docs-bg, #F6F6F4); --ai-surface-higher: var(--replit-docs-bg-elevated, #F1F1EE); --ai-border-default: var(--replit-docs-border, #DEDAD5); --ai-border-strong: var(--replit-docs-border-strong, #CAC4BE); --ai-text-secondary: var(--replit-docs-text-muted, #5C5C5C); --ai-text-tertiary: var(--replit-docs-text-subtle, #858585); --ai-text-primary: var(--replit-docs-text, #1D1D1D); --ai-button-bg: var(--replit-docs-bg-muted, #F1F1EE); --ai-button-bg-hover: var(--replit-docs-bg-elevated, #F1F1EE); --ai-icon-default: var(--replit-docs-text-subtle, #858585); --ai-icon-hover: var(--replit-docs-text-muted, #5C5C5C); --ai-shadow: 0 2px 6px #00000005; --ai-option-bg: var(--replit-docs-bg-elevated, #F1F1EE); --ai-option-border: var(--replit-docs-border, #DEDAD5); --ai-option-hover-bg: var(--replit-docs-bg-muted, #F1F1EE); --ai-option-selected-bg: var(--replit-docs-bg-muted, #F1F1EE); --ai-pill-bg: #CDDCF1; --ai-pill-text: var(--replit-docs-text-muted, #5C5C5C); } /* Theme variables - dark mode */ .dark [data-agent-input-container], html.dark [data-agent-input-container], [data-theme="dark"] [data-agent-input-container] { --ai-surface-bg: var(--replit-docs-bg, #1E1E1F); --ai-surface-higher: var(--replit-docs-bg-elevated, #222223); --ai-border-default: var(--replit-docs-border, #39393D); --ai-border-strong: var(--replit-docs-border-strong, #4A4A50); --ai-text-secondary: var(--replit-docs-text-muted, #B8B8BE); --ai-text-tertiary: var(--replit-docs-text-subtle, #8E8F97); --ai-text-primary: var(--replit-docs-text, #F5F5F5); --ai-button-bg: var(--replit-docs-bg-elevated, #222223); --ai-button-bg-hover: var(--replit-docs-bg-muted, #222223); --ai-icon-default: var(--replit-docs-text-subtle, #8E8F97); --ai-icon-hover: var(--replit-docs-text-muted, #B8B8BE); --ai-shadow: 0 2px 6px #00000020; --ai-option-bg: var(--replit-docs-bg-elevated, #222223); --ai-option-border: var(--replit-docs-border, #39393D); --ai-option-hover-bg: var(--replit-docs-bg-muted, #222223); --ai-option-selected-bg: var(--replit-docs-bg-muted, #222223); --ai-pill-bg: #2A3A4D; --ai-pill-text: #D0D8E4; } .agent-input-container { box-sizing: border-box; } /* Entry animation */ @keyframes agent-input-fade-in-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Hover state for input box */ [data-agent-input-container]:has([data-agent-input-role="inner"]:hover) [data-agent-input-role="inner"] { border-color: #85C7FF !important; } /* Focus state for input box */ [data-agent-input-container]:has([data-agent-input-role="inner"]:focus-within) [data-agent-input-role="inner"] { border-color: #0079F2 !important; } /* Icon button hover */ @media (hover: hover) { [data-agent-input-container] .ai-icon-btn:hover { background: var(--ai-button-bg-hover); } [data-agent-input-container] .ai-icon-btn:hover svg { color: var(--ai-icon-hover); } [data-agent-input-container] .ai-option-btn:not([data-selected="true"]):hover { background: var(--ai-option-hover-bg); } [data-agent-input-container] .ai-plan-btn:hover { background: var(--ai-button-bg-hover); } [data-agent-input-container] .ai-nav-btn:hover svg { color: var(--ai-icon-hover); } [data-agent-input-container] .ai-pill-close:hover { opacity: 0.7; } } @keyframes plan-border-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } [data-agent-input-container] .ai-plan-wrap { position: relative; border-radius: 32px; padding: 2px; overflow: hidden; } [data-agent-input-container] .ai-plan-wrap::before { content: ''; position: absolute; inset: -50%; background: conic-gradient( #3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981, #3b82f6 ); animation: plan-border-spin 1s linear infinite; } [data-agent-input-container] .ai-plan-wrap .ai-plan-btn-highlight { position: relative; background: var(--ai-surface-higher); color: var(--ai-text-primary); font-weight: 400; border: none; border-radius: 32px; z-index: 1; } [data-agent-input-container] .ai-plan-wrap.ai-plan-off::before { animation: none; background: transparent; } [data-agent-input-container] .ai-plan-wrap.ai-plan-off .ai-plan-btn-highlight { background: var(--ai-button-bg); color: var(--ai-text-secondary); } /* Plan checkbox styles */ [data-agent-input-container] .ai-plan-checkbox-label { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: var(--border-radius-6, 6px); background: var(--ai-button-bg); cursor: pointer; font-size: 12px; font-family: inherit; color: var(--ai-text-secondary); transition: background 120ms ease-out; user-select: none; } @media (hover: hover) { [data-agent-input-container] .ai-plan-checkbox-label:hover { background: var(--ai-button-bg-hover); } } [data-agent-input-container] .ai-plan-checkbox-input { width: 20px; height: 20px; margin: 0; accent-color: #0079F2; cursor: pointer; } [data-agent-input-container] .ai-start-wrap { position: relative; display: inline-flex; padding: 3px; border-radius: 8px; overflow: hidden; } [data-agent-input-container] .ai-start-wrap::before { content: ''; position: absolute; inset: -50%; background: conic-gradient( #3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981, #3b82f6 ); animation: plan-border-spin 1s linear infinite; } [data-agent-input-container] .ai-start-wrap .ai-start-btn-highlight { position: relative; background: var(--ai-surface-higher); border: none; border-radius: 6px; z-index: 1; } `; document.head.appendChild(style); } const getLink = (container, promptOverride) => { if (typeof document === "undefined" || !window.LZString) return ""; const prompt = promptOverride || getAgentInputPromptValue(container); if (!prompt) return ""; const encoded = window.LZString.compressToEncodedURIComponent(prompt); const utm = "utm_source=replit-docs&utm_medium=docs&utm_campaign=docs-intro-agent-input&utm_content=homepage-prompt-box"; return `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`; }; const handleStartClick = e => { e.preventDefault(); const container = findAgentInputContainer(e.currentTarget); const link = getLink(container); if (link) window.open(link, "_blank"); }; const toggleOutputType = name => { const btn = document.querySelector(`[data-option-name="${name}"]`); const pillsContainer = document.getElementById("agent-input-pills"); if (!btn || !pillsContainer) return; const isSelected = btn.dataset.selected === "true"; if (isSelected) { btn.dataset.selected = "false"; btn.style.background = "var(--ai-option-bg)"; const iconEl = btn.querySelector(".option-icon"); const type = outputTypes.find(t => t.name === name); if (iconEl && type) iconEl.innerHTML = type.iconSvg; const pill = document.getElementById(`pill-${name}`); if (pill) pill.remove(); } else { document.querySelectorAll('[data-option-name][data-selected="true"]').forEach(prevBtn => { const prevName = prevBtn.dataset.optionName; prevBtn.dataset.selected = "false"; prevBtn.style.background = "var(--ai-option-bg)"; const prevIconEl = prevBtn.querySelector(".option-icon"); const prevType = outputTypes.find(t => t.name === prevName); if (prevIconEl && prevType) prevIconEl.innerHTML = prevType.iconSvg; const prevPill = document.getElementById(`pill-${prevName}`); if (prevPill) prevPill.remove(); }); btn.dataset.selected = "true"; btn.style.background = "var(--ai-option-selected-bg)"; const iconEl = btn.querySelector(".option-icon"); if (iconEl) iconEl.innerHTML = checkSvg; const type = outputTypes.find(t => t.name === name); if (type) { const pill = document.createElement("span"); pill.id = `pill-${name}`; pill.style.cssText = "display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 8px;border-radius:32px;background:var(--ai-pill-bg);color:var(--ai-pill-text);font-size:14px;white-space:nowrap;cursor:default;"; pill.innerHTML = `", "")}${name}`; pill.querySelector(`[data-pill-remove="${name}"]`).addEventListener("click", () => toggleOutputType(name)); pillsContainer.appendChild(pill); } } }; const PlusIcon = ; const MicIcon = ; const ArrowUpIcon = ; const ArrowLeftIcon = ; const ArrowRightIcon = ; const iconBtnStyle = { display: "flex", alignItems: "center", justifyContent: "center", width: "28px", height: "28px", border: "none", borderRadius: "6px", background: "transparent", cursor: "pointer", color: "var(--ai-icon-default)", padding: 0, transition: "background 120ms ease-out" }; const optionIconStyle = { display: "flex", alignItems: "center", justifyContent: "center", width: "48px", height: "48px", border: "1px solid var(--ai-option-border)", borderRadius: "12px", background: "var(--ai-option-bg)", cursor: "pointer", color: "var(--ai-text-secondary)", padding: 0, transition: "background 120ms ease-out", flexShrink: 0 }; const initAgentInput = container => { if (!container) { return; } updateAgentInputButtonState(container); startAgentInputTypewriter(container, { defaultPrompt, placeholder, showTypewriter }); const ta = container.querySelector('[data-agent-input-role="textarea"]'); if (ta && ta.value) { requestAnimationFrame(() => { ta.style.height = "auto"; ta.style.height = ta.scrollHeight + "px"; }); } }; return

{}

{
    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>;
};

## Replit Agent란 무엇인가요?

Agent는 여러분의 창의적인 파트너입니다. Agent는 여러분의 아이디어를 받아 구체화하고 실제로 만들어 줍니다. 질문에만 답하는 챗봇과 달리, Agent는 직접 행동합니다. 프로젝트를 설정하고, 애플리케이션을 만들고, 결과물을 검토하며, 문제가 생기면 스스로 수정합니다.

원하는 것을 일상적인 언어로 설명하세요. 코드나 기술적인 지식은 필요하지 않습니다. Agent가 기획부터 배포까지 모든 것을 처리합니다.

## Replit Agent 사용 방법

### 시작하기

<Steps>
  <Step title="원하는 것을 설명하세요">
    [프로젝트 편집기](/learn/projects-and-artifacts/project-editor)에서 바로 채팅을 시작하세요. 만들고 싶은 앱을 설명하거나, 질문하거나, 주제를 조사하거나, BigQuery, Slack, Notion 같은 [연결된 서비스](/references/agent/general-agent)에서 데이터를 가져오세요. 제한이 없습니다. Replit Agent가 무엇이든 처리합니다.

<Step title="만들 것을 선택하세요">
    선택적으로 프로젝트 유형을 선택할 수 있습니다. 웹 앱, 모바일 앱, 슬라이드, 디자인, 데이터 시각화 등이 있습니다. 1단계에서 이미 원하는 것을 설명했다면 Agent가 적합한 설정을 자동으로 파악합니다.

<Step title="Agent가 만들어 줍니다">
    Agent가 코드를 작성하고, 인프라를 구성하고, 결과물을 테스트합니다. 프로젝트에 들어온 후에는 [Agent 모드](#agent-modes)를 전환하여 빌드 방식을 조절할 수 있습니다.
  </Step>

<Step title="반복, 테스트, 배포">
    Agent와 채팅하며 프로젝트를 개선하고, 준비가 되면 게시하세요. 모든 아티팩트가 함께 배포됩니다.
  </Step>
</Steps>

<Note>하나의 유형에 국한되지 않습니다. 웹 앱으로 시작하고 나중에 모바일 앱, 슬라이드, 또는 동영상을 추가할 수 있습니다. 모두 같은 프로젝트 안에서 가능합니다.</Note>

### Plan 모드

Plan 모드를 활성화하면 Agent가 코드나 데이터를 변경하기 전에 아이디어를 구상하고, 질문하고, 프로젝트를 계획할 수 있습니다. Plan 모드에서 Agent는 다음을 수행합니다.

* **복잡한 프로젝트를** 순서가 있는 작업 목록으로 **분해합니다**
* **다양한 접근 방식을 탐색**하고 장단점을 비교합니다
* 코드가 작성되기 전에 **검토하고 개선**합니다

채팅 입력란에서 "Plan"을 클릭하거나 Agent에게 직접 요청하여 Plan 모드로 전환하세요. 예시: "팀을 위한 프로젝트 트래커 빌드 계획을 세워줘"

Agent가 검토하고 수정할 수 있는 순서 있는 작업 목록을 만들어 줍니다. 계획이 마음에 들면 승인하고 Agent가 빌드를 시작합니다.

자세한 내용은 [Plan 모드 가이드](/references/agent/plan-mode)를 참고하세요.

### Agent 모드

Agent가 프로젝트를 빌드하는 방식을 선택하세요.

* **Lite**: 가볍고 저렴한 변경을 빠르게 처리합니다. Lite 모드는 시각적 조정, 버그 수정, 범위가 정해진 기능에 적합합니다.
* **Economy**: 일상적인 작업에 비용 최적화 모델을 사용합니다. **고급 설정**을 펼쳐 앱 테스트 및 High effort 같은 기능을 관리하세요.
* **Power**: 더 어려운 문제, 대규모 변경, 긴 빌드 작업에 Agent의 가장 강력한 모델을 사용합니다. **고급 설정**에서 **Turbo**를 켜면 더 높은 비용으로 최대 2.5배 빠른 빌드를 이용할 수 있습니다 (Pro 및 Enterprise).

Economy와 Power 모두에서 [High effort](/references/agent/agent-modes#high-effort-mode)를 켜면 Agent가 가장 복잡한 작업에 가장 강력한 프론티어 모델을 사용합니다.

<Note>팁: \*\*[Plan 모드](/references/agent/plan-mode)\*\*를 활성화하면 빌드가 시작되기 전에 Agent의 계획을 검토하고 반복할 수 있습니다. Max 모드는 더 이상 제공되지 않습니다. 가장 강력한 표준 빌드에는 Power를 사용하세요.</Note>

## Replit Agent로 만들 수 있는 것

* **웹 앱, 모바일 앱, 데이터 대시보드, AI 기반 도구**
* **시각적 디자인과 프로토타입** — 코드를 작성하기 전에 [Design Canvas](/learn/design/canvas)에서 목업을 탐색하세요
* **하나의 프로젝트에서 여러 결과물** — 웹 앱, 모바일 앱, 슬라이드, 동영상이 같은 백엔드를 공유합니다
* **파일과 문서** — CSV, PDF, PowerPoint 파일, Markdown 문서
* **연결된 서비스 쿼리** — 채팅에서 직접 BigQuery, Linear, Slack, Notion 등의 데이터를 가져옵니다

<Card title="지금 바로 만들기" icon="arrow-up-right" href="https://replit.com">
  아이디어를 설명하면 Agent가 실현해 드립니다. 설정이 필요 없습니다.
</Card>

## 자주 묻는 질문

<Accordion title="코딩을 알아야 하나요?">
  아니요. Agent가 모든 기술적인 작업을 처리합니다. 코드 작성, 인프라 구성, 데이터베이스 설정 등 모두 포함됩니다. 원하는 것을 일상적인 언어로 설명하면 Agent가 만들어 줍니다.
</Accordion>

<Accordion title="Lite, Economy, Power의 차이점은 무엇인가요?">
  **Lite**는 빠르고 목표가 명확한 변경(10\~60초)에 적합합니다. 시각적 조정, 버그 수정, 범위가 정해진 기능 등이 해당합니다. **Economy**는 비용과 품질의 균형을 원할 때 대부분의 빌드에 가장 좋은 기본 선택입니다. **Power**는 더 어려운 작업에 가장 강력한 모델을 사용하며, **Turbo**는 가장 빠른 실행이 필요할 때 고급 설정에서 켤 수 있는 Power 전용 옵션입니다. Economy와 Power 모두에서 [High effort](/references/agent/agent-modes#high-effort-mode)를 켜면 Agent가 가장 복잡한 작업에 가장 강력한 프론티어 모델을 적용합니다.
</Accordion>

<Accordion title="프로젝트에서 두 가지 이상을 만들 수 있나요?">
  네. 웹 앱, 모바일 앱, 슬라이드, 동영상, 데이터 시각화를 [같은 프로젝트](/references/projects-and-artifacts/artifacts#multiple-artifacts-in-one-project)에 추가할 수 있으며, 모두 같은 백엔드와 데이터를 공유합니다.
</Accordion>

<Accordion title="Agent가 실수를 하면 어떻게 되나요?">
  Agent는 정기적으로 자체적으로 작업을 테스트합니다. 또한 작업하면서 체크포인트를 만들기 때문에 이전 상태로 되돌릴 수 있습니다. 무엇이 잘못되었는지 Agent에게 설명하면 문제를 수정해 줍니다.
</Accordion>

## 이용 가능 여부

| 기능              | Core | Pro |
| --------------- | ---- | --- |
| Agent 채팅 및 빌드   | ✅    | ✅   |
| Lite 모드         | ✅    | ✅   |
| Economy 모드      | ✅    | ✅   |
| Power 모드        | ✅    | ✅   |
| Design Canvas   | ✅    | ✅   |
| Multi-Artifacts | ✅    | ✅   |
| 활성 백그라운드 작업     | 1    | 10  |
| Turbo           | ❌    | ✅   |

Turbo는 모든 플랜에서 기본적으로 꺼져 있으며, 필요할 때 프로젝트별로 켜면 됩니다. Enterprise에서는 관리자가 조직에 대해 활성화하기 전까지 사용할 수 없습니다.

자세한 요금 정보는 [Agent 청구](/billing/ai-billing#agent-billing)를 참고하세요.

## 다음 단계

<CardGroup cols={2}>
  <Card title="Agent Skills" icon="puzzle-piece" href="/references/agent/skills">
    Agent에게 전문 지식을 가르치세요. 미리 만들어진 Skills를 사용하거나 직접 만드세요.
  </Card>

<Card title="작업 시스템" icon="list-check" href="/core-concepts/agent/task-system">
    Kanban 계획, 백그라운드 작업, 기본 버전에 적용되는 변경 사항.
  </Card>

<Card title="Connectors" icon="plug" href="/references/agent/general-agent">
    BigQuery, Linear, Slack, Notion 등을 연결하세요.
  </Card>

<Card title="청구" icon="credit-card" href="/billing/ai-billing#agent-billing">
    Agent 요금, 플랜 비교, 지출 관리.
  </Card>