> ## 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.

# Navigating Replo

> How to navigate Replo: the chat, the workspace tabs, Home, and the app launcher.

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 <div style={{
    position: "relative",
    width: "100%",
    borderRadius: "12px",
    overflow: "hidden",
    boxSizing: "border-box",
    display: "flex",
    justifyContent: "center"
  }}>
      {}
      <svg style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    zIndex: 0,
    pointerEvents: "none"
  }} viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
        <g clipPath="url(#clip0_5067_2569)">
          <rect width="1920" height="1080" fill="black" />
          <g opacity="0.9" filter="url(#filter0_fn_5067_2569)">
            <mask id="mask0_5067_2569" style={{
    maskType: "alpha"
  }} maskUnits="userSpaceOnUse" x="539" y="-367" width="2018" height="1261">
              <rect x="539" y="-367" width="2017.6" height="1261" fill="#C4C4C4" />
            </mask>
            <g mask="url(#mask0_5067_2569)">
              <g filter="url(#filter1_f_5067_2569)">
                <path d="M880.949 82.6474L1798.19 -385.441L2215.11 -385.441L2725.35 -260.618L936.539 437.057L880.949 82.6474Z" fill="url(#paint0_linear_5067_2569)" />
              </g>
              <g filter="url(#filter2_f_5067_2569)">
                <ellipse cx="462.152" cy="150.719" rx="462.152" ry="150.719" transform="matrix(0.914846 -0.403803 0.330497 0.943807 1250.96 112.228)" fill="#FEBC2E" />
              </g>
              <g filter="url(#filter3_f_5067_2569)">
                <path d="M1687.1 56.3942C2102.4 -149.497 2274.54 -159.301 2672.61 -80.8668L2803.87 183.851L884.491 784.367C849.346 777.831 951.195 612.791 1228.77 362.78C1281.1 315.653 1271.81 262.285 1687.1 56.3942Z" fill="url(#paint1_linear_5067_2569)" />
              </g>
              <g opacity="0.7" filter="url(#filter4_f_5067_2569)">
                <path d="M1975.09 -76.9728C2367.51 -238.299 2270.38 -191.657 2637.67 -120.329L2758.78 120.402L1001.73 662.047C969.304 656.104 932.244 530.091 1043.42 349.988C1182.4 124.86 1518.29 110.824 1975.09 -76.9728Z" fill="#B7FEAE" fillOpacity="0.5" />
              </g>
              <g filter="url(#filter5_f_5067_2569)">
                <path d="M2052.63 99.5535C2383.11 16.7587 2366.44 -59.7112 2665.61 -7.17013L2707.81 170.156L1276.64 569.14C1250.23 564.762 1220.04 471.939 1310.6 339.273C1423.8 173.44 1803.59 161.946 2052.63 99.5535Z" fill="#EF196E" />
              </g>
              <g opacity="0.4" filter="url(#filter6_f_5067_2569)">
                <ellipse cx="462.152" cy="218.806" rx="462.152" ry="218.806" transform="matrix(0.914846 -0.403803 0.330497 0.943807 1152.46 417.938)" fill="#FFEB80" />
              </g>
              <g filter="url(#filter7_f_5067_2569)">
                <ellipse cx="462.152" cy="150.719" rx="462.152" ry="150.719" transform="matrix(0.914846 -0.403803 0.330497 0.943807 1913.18 237.904)" fill="#B7FEAE" />
              </g>
              <g filter="url(#filter8_f_5067_2569)">
                <g opacity="0.4" filter="url(#filter9_f_5067_2569)">
                  <path d="M1551.1 493.269L2619.23 -0.477507L3125.23 -71.2418L3756.49 -67.6927L1652.68 739.798L1551.1 493.269Z" fill="url(#paint2_linear_5067_2569)" />
                </g>
              </g>
              <g filter="url(#filter10_f_5067_2569)">
                <g opacity="0.4" filter="url(#filter11_f_5067_2569)">
                  <path d="M1696.12 652.03L2820.04 310.947L3330.91 310.947L3956.12 401.903L1764.24 910.278L1696.12 652.03Z" fill="url(#paint3_linear_5067_2569)" />
                </g>
                <g opacity="0.4" filter="url(#filter12_f_5067_2569)">
                  <path d="M1628.55 727.676L2843.38 257.743L3271.53 195.271L3903.03 210.271L1788.72 978.91L1628.55 727.676Z" fill="url(#paint4_linear_5067_2569)" />
                </g>
              </g>
            </g>
          </g>
        </g>
        <defs>
          <filter id="filter0_fn_5067_2569" x="637.809" y="-607" width="2158.79" height="1741" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="120" result="effect1_foregroundBlur_5067_2569" />
            <feTurbulence type="fractalNoise" baseFrequency="1 1" stitchTiles="stitch" numOctaves="3" result="noise" seed="7978" />
            <feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
            <feComponentTransfer in="alphaNoise" result="coloredNoise1">
              <feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 " />
            </feComponentTransfer>
            <feComposite operator="in" in2="effect1_foregroundBlur_5067_2569" in="coloredNoise1" result="noise1Clipped" />
            <feFlood floodColor="rgba(0, 0, 0, 0.25)" result="color1Flood" />
            <feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
            <feMerge result="effect2_noise_5067_2569">
              <feMergeNode in="effect1_foregroundBlur_5067_2569" />
              <feMergeNode in="color1" />
            </feMerge>
          </filter>
          <filter id="filter1_f_5067_2569" x="878.4" y="-387.991" width="1849.5" height="827.597" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="1.27461" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter2_f_5067_2569" x="1129.77" y="-334.846" width="1187.61" height="805.41" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="84.0203" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter3_f_5067_2569" x="855.856" y="-148.194" width="1969.97" height="954.514" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="10.9761" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter4_f_5067_2569" x="958.113" y="-196.498" width="1811.26" height="869.143" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="5.29875" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter5_f_5067_2569" x="1149.75" y="-124.443" width="1658.06" height="793.583" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter6_f_5067_2569" x="1098.27" y="39.191" width="1098.61" height="797.277" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="60.1484" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter7_f_5067_2569" x="1886.85" y="-114.306" width="997.881" height="615.684" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="36.5888" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter8_f_5067_2569" x="1540.3" y="-82.0399" width="2226.99" height="832.636" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="5.39908" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter9_f_5067_2569" x="1547.97" y="-74.3651" width="2211.64" height="817.287" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="1.56172" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter10_f_5067_2569" x="1598.84" y="165.553" width="2387" height="843.074" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="14.8586" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter11_f_5067_2569" x="1693" y="307.824" width="2266.24" height="605.577" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="1.56172" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <filter id="filter12_f_5067_2569" x="1617.84" y="184.562" width="2295.9" height="805.057" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
            <feGaussianBlur stdDeviation="5.35445" result="effect1_foregroundBlur_5067_2569" />
          </filter>
          <linearGradient id="paint0_linear_5067_2569" x1="1803.15" y1="-385.441" x2="1040.5" y2="259.543" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FF7D54" />
            <stop offset="1" stopColor="white" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="paint1_linear_5067_2569" x1="2283.14" y1="-17.1385" x2="1351.98" y2="310.625" gradientUnits="userSpaceOnUse">
            <stop stopColor="#B7FEAE" />
            <stop offset="0.65537" stopColor="#EF196E" />
            <stop offset="1" stopColor="#274AE2" />
          </linearGradient>
          <linearGradient id="paint2_linear_5067_2569" x1="2625.25" y1="-1.32004" x2="2201.56" y2="820.649" gradientUnits="userSpaceOnUse">
            <stop stopColor="#3A4CF0" />
            <stop offset="1" stopColor="#F5FAD9" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="paint3_linear_5067_2569" x1="2826.12" y1="310.947" x2="2295.81" y2="1065.13" gradientUnits="userSpaceOnUse">
            <stop stopColor="#EF196E" />
            <stop offset="1" stopColor="white" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="paint4_linear_5067_2569" x1="2452.05" y1="509.031" x2="2135.78" y2="1074.58" gradientUnits="userSpaceOnUse">
            <stop offset="0.166667" stopColor="#EF196E" />
            <stop offset="0.541667" stopColor="#FFEB80" stopOpacity="0.25" />
            <stop offset="1" stopColor="#274AE2" stopOpacity="0" />
          </linearGradient>
          <clipPath id="clip0_5067_2569">
            <rect width="1920" height="1080" fill="white" />
          </clipPath>
        </defs>
      </svg>

      {}
      <div style={{
    position: "relative",
    zIndex: 1,
    padding: "clamp(24px, 4vw, 48px)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  }}>
        <img src={src} alt={finalAltText} style={{
    width: imageWidth,
    maxWidth: "100%",
    height: "auto",
    display: "block",
    borderRadius: "8px",
    boxShadow: shadow ? "0 20px 60px rgba(0, 0, 0, 0.3)" : "none"
  }} />
      </div>
    </div>;
};

When you open a project, the chat is on the left, where you talk to Replo. On the right is a tabbed workspace, like a browser, where Home and each app you open get their own tab. Learn these few pieces and you can find your way around everything else.

<Screenshot src="/images/cropped/agent-home.png" altText="The Replo workspace: chat on the left, and Home on the right with a greeting and a grid of widgets from your apps, including Website Builder, Plans, Brand Studio, Assets, and Files" />

## The chat

The chat on the left is where you talk to Replo. You type a request, and Replo streams its work back as it happens, so you can see what it is doing and step in at any time. When you start a fresh chat, Replo offers a few starter suggestions to get you going.

What you say in the chat is also what opens apps. When a request calls for one, Replo opens the right app on the right side and brings it to the front, ask it to edit your site and the Website Builder opens, ask it to connect a tool and Integrations opens, ask for a brand and Brand Studio opens. Most of the time, it is the conversation that opens the right app and drives what happens in it.

<Screenshot src="/images/cropped/chat-opens-app.png" altText="A chat request to create a skill, with the Skills app opening on the right in its own tab to show the new skill" />

Conversations are saved. You can close the tab and come back later, and Replo picks up where you left off. You can also attach images and other files to a message, and point Replo at specific things with @-mentions. See [Sessions & Mentions](/sessions-and-history) for more.

## Home

Home is the tab you land on when you open a project. It greets you by name and shows a grid of **widgets**, each a live snapshot from one of your apps, like recommended improvements from the Website Builder, your recent plans, your brand, a mosaic of your assets, and your files. Click a widget to jump into that app. You can rearrange the grid and add or remove widgets with the **Edit** controls, so Home shows what matters to you. It is the home base you return to between tasks.

Scheduled tasks surface here through the **Tasks** widget, so you can see what Replo will do next without opening the app. See [Tasks](/apps/tasks) for how to schedule them.

<Screenshot src="/images/cropped/agent-home-only.png" altText="Home: a greeting and a grid of widgets from your apps, including Website Builder, Plans, Brand Studio, Assets, and Files" />

## The workspace tabs

The right side is a tabbed workspace. Home is one tab, and every app you open gets its own tab, the same way browser tabs work. When Replo starts working in an app, that app opens in a tab and comes to the front. You are always looking at the same workspace Replo is acting on, not a separate copy, and you can switch tabs to work alongside it.

<Screenshot src="/images/cropped/workspace-tabs.png" altText="The workspace tab bar with tabs for Home, Launchpad, and the Website Builder, an open page tab, a plus button to open a new tab, and the project menu on the right" />

## Switching projects

Each project is one store. The project menu in the top right shows the project you are in and lets you search your projects, create a new one, or switch to a different workspace. Use it to move between stores without leaving Replo.

<Screenshot src="/images/cropped/new-project-menu.png" altText="The project menu open in the top right, showing project search, the current project, other projects, a New Project option, and a switch workspace option" />

## The app launcher

Click the **+** in the tab bar, or press <kbd>Cmd</kbd>+<kbd>K</kbd> (<kbd>Ctrl</kbd>+<kbd>K</kbd> on Windows), to open the app launcher, then pick an app to open it in a tab. The keyboard shortcut works like Spotlight on a Mac: a fast way to move between apps without leaving the keyboard.

<Screenshot src="/images/cropped/app-launcher.png" altText="The Cmd+K app launcher open, showing app tiles and a search field" />

## The apps

Each app handles one part of running your store. Replo opens the right one for whatever you ask, but you can also open any of them yourself, anytime.

<Screenshot src="/images/cropped/app-launcher-closeup.png" altText="The app launcher open over the workspace: a search field above a grid of app icons for Brand Studio, Assets, Files, Draw, Integrations, Settings, Website Builder, Skills, Tasks, Insights, Plans, and Launchpad" width="760" />

<CardGroup cols={3}>
  <Card title="Launchpad" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/launchpad.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=f375989d37238342d08931c93ef669c3" href="/apps/launchpad" width="1024" height="1024" data-path="images/app-icons/launchpad.png">A guided setup that ends with your first build running.</Card>
  <Card title="Website Builder" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/site-builder.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=b39f80120b1266906639b05f041e5d3a" href="/apps/website-builder" width="1024" height="1024" data-path="images/app-icons/site-builder.png">Watch pages take shape live, then publish with one click.</Card>
  <Card title="Integrations" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/integrations.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=b8701aad85efa2706caa1bb67992188f" href="/apps/integrations" width="1024" height="1024" data-path="images/app-icons/integrations.png">Plug in Shopify, analytics, email, and the rest of your stack.</Card>
  <Card title="Insights" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/insights.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=7d83e74a504593d3604fee22a806b89d" width="1024" height="1024" data-path="images/app-icons/insights.png">Dashboards for traffic, sales, and what actually converts. (Coming soon)</Card>
  <Card title="Brand Studio" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/brand-library.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=e4a49ee331a17747e803aff8c014f5a7" href="/apps/brand-studio" width="512" height="512" data-path="images/app-icons/brand-library.png">Capture your brand once; every page follows it.</Card>
  <Card title="Assets" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/assets.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=4f262749bf51800429774301a7c44554" href="/apps/assets" width="1024" height="1024" data-path="images/app-icons/assets.png">Every image, video, and font, searchable in one place.</Card>
  <Card title="Files" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/files.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=bf077f05a38fb83935796469179ccf76" href="/apps/files" width="1536" height="1024" data-path="images/app-icons/files.png">Your project's filing cabinet: briefs, docs, and exports.</Card>
  <Card title="Products" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/products.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=99018bdaf30b7ec283d9733e0355cfc7" width="1024" height="1024" data-path="images/app-icons/products.png">Your catalog, synced from Shopify and ready to sell. (Coming soon)</Card>
  <Card title="Skills" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/skills.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=d50d01b4fb1ceacc21f5b972de0f2183" href="/apps/skills" width="1024" height="1024" data-path="images/app-icons/skills.png">Teach Replo routines it can repeat on demand.</Card>
  <Card title="Tasks" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/tasks.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=a307145f4c3e2b3c721df1f70852a006" href="/apps/tasks" width="1024" height="1024" data-path="images/app-icons/tasks.png">Put Replo on a schedule: reports, checks, refreshes.</Card>
  <Card title="Plans" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/plans.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=ac174e0f20c30bf601357b309251cd75" href="/plans" width="1024" height="1024" data-path="images/app-icons/plans.png">Big builds scoped into checklists you approve first.</Card>
  <Card title="Settings" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/settings.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=03dbce0d1ee6c76d8187756260001334" href="/apps/settings" width="1024" height="1024" data-path="images/app-icons/settings.png">Project, workspace, account, and billing in one spot.</Card>
  <Card title="Reploverse" icon="https://mintcdn.com/replo-agent-docs/OPJtEy-zSFLCF1g2/images/app-icons/reploverse.png?fit=max&auto=format&n=OPJtEy-zSFLCF1g2&q=85&s=1087399abd630a6cad8a9da21d882c71" href="/apps/reploverse" width="1024" height="1024" data-path="images/app-icons/reploverse.png">Explore the multiplayer pixel world.</Card>
</CardGroup>
