> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Describe your idea

> Use a Conversation to turn an early coffee shop idea into a focused concept and launch questions.

export const PromptingCover = () => <div className="chat-mkt" role="img" aria-label="Prompt box with context cues and a generated result, representing prompting in Replit" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "absolute",
  width: "min(76%, 560px)",
  height: "64%",
  left: "50%",
  top: "18%",
  transform: "translateX(-50%) rotate(-4deg)",
  opacity: 0.42,
  border: "1px solid rgba(255,255,255,.34)",
  borderRadius: 26
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "flex",
  width: "100%",
  minHeight: "inherit",
  alignItems: "center",
  justifyContent: "center",
  padding: "clamp(14px, 3vw, 28px)"
}}>
        <div style={{
  width: "clamp(260px, 66%, 680px)",
  maxWidth: "calc(100% - 20px)",
  boxSizing: "border-box"
}}>
          <div style={{
  display: "flex",
  justifyContent: "center",
  gap: 10,
  marginBottom: 12
}}>
            <span style={{
  width: 18,
  height: 18,
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 6,
  background: "rgba(255,255,255,.18)"
}} />
            <span style={{
  width: 18,
  height: 18,
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 999,
  background: "rgba(255,255,255,.14)"
}} />
            <span style={{
  width: 18,
  height: 18,
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 5,
  background: "rgba(255,255,255,.12)"
}} />
          </div>
          <div style={{
  padding: "clamp(18px, 4vw, 30px)",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 24,
  background: "linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "grid",
  gap: 9
}}>
              <span style={{
  width: "55%",
  height: 9,
  borderRadius: 999,
  background: "rgba(255,255,255,.84)"
}} />
              <span style={{
  width: "88%",
  height: 9,
  borderRadius: 999,
  background: "rgba(255,255,255,.42)"
}} />
            </div>
            <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: 12,
  marginTop: "clamp(22px, 4vw, 32px)",
  padding: "13px 14px",
  border: "1px solid rgba(255,255,255,.64)",
  borderRadius: 16,
  background: "rgba(255,255,255,.18)"
}}>
              <span style={{
  width: "68%",
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.78)"
}} />
              <span style={{
  display: "grid",
  width: 27,
  height: 27,
  placeItems: "center",
  flex: "0 0 auto",
  borderRadius: 9,
  background: "rgba(255,255,255,.9)",
  color: "#4b5563",
  fontSize: 16,
  fontWeight: 700
}}>
                ↑
              </span>
            </div>
          </div>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 10,
  width: "74%",
  margin: "14px auto 0",
  padding: "10px 12px",
  border: "1px solid rgba(255,255,255,.46)",
  borderRadius: 14,
  background: "rgba(255,255,255,.14)"
}}>
            <span style={{
  display: "grid",
  width: 20,
  height: 20,
  placeItems: "center",
  flex: "0 0 auto",
  borderRadius: 999,
  background: "rgba(255,255,255,.86)",
  color: "#4b5563",
  fontSize: 13,
  fontWeight: 700
}}>
              ✓
            </span>
            <span style={{
  width: "68%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.68)"
}} />
          </div>
        </div>
      </div>
    </div>
  </div>;

export const PromptingCardVisual = () => <div className="chat-use-case-visual" aria-hidden="true" style={{
  background: "radial-gradient(circle at 48% -30%, rgba(255,255,255,.78), transparent 54%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
    <div style={{
  position: "relative",
  width: "72%",
  margin: "auto",
  padding: 12,
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.2)"
}}>
      <span style={{
  display: "block",
  width: "66%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.8)"
}} />
      <span style={{
  display: "block",
  width: "92%",
  height: 7,
  marginTop: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.38)"
}} />
      <span style={{
  display: "block",
  width: "82%",
  height: 22,
  marginTop: 12,
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: 8,
  background: "rgba(255,255,255,.16)"
}} />
    </div>
  </div>;

export const chatIcon = (name, size = 19) => {
  const paths = {
    MessageCircle: <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />,
    ChartNoAxesCombined: <>
        <path d="M12 16v5" />
        <path d="M16 14v7" />
        <path d="M20 10v11" />
        <path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.708 0L2 15" />
        <path d="M4 18v3" />
        <path d="M8 14v7" />
      </>,
    Workflow: <>
        <rect width="8" height="8" x="3" y="3" rx="2" />
        <path d="M7 11v4a2 2 0 0 0 2 2h4" />
        <rect width="8" height="8" x="13" y="13" rx="2" />
      </>,
    Lightbulb: <>
        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
        <path d="M9 18h6" />
        <path d="M10 22h4" />
      </>,
    Code2: <>
        <path d="m18 16 4-4-4-4" />
        <path d="m6 8-4 4 4 4" />
        <path d="m14.5 4-5 16" />
      </>,
    Presentation: <>
        <path d="M2 3h20" />
        <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
        <path d="m7 21 5-5 5 5" />
      </>,
    PanelsTopLeft: <>
        <rect width="18" height="18" x="3" y="3" rx="2" />
        <path d="M3 9h18" />
        <path d="M9 21V9" />
      </>,
    Keyboard: <>
        <rect width="20" height="14" x="2" y="5" rx="2" />
        <path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 17h8" />
      </>,
    Layers3: <>
        <path d="m12 2 9 5-9 5-9-5 9-5Z" />
        <path d="m3 12 9 5 9-5M3 17l9 5 9-5" />
      </>,
    CalendarClock: <>
        <path d="M16 2v4M8 2v4M3 10h18" />
        <rect width="18" height="19" x="3" y="4" rx="2" />
        <path d="M12 14v3l2 1" />
      </>,
    ConversationProject: <>
        <path d="M3 4h8v6H6l-3 2V4Z" />
        <rect width="9" height="9" x="12" y="11" rx="1.5" />
        <path d="M12 14h9M15 11v9" />
      </>,
    CursorDesign: <>
        <path d="m5 3 13 7-6 2-2 6L5 3Z" />
        <path d="M15 16h6M18 13v6" />
      </>,
    AppWindow: <>
        <rect width="20" height="18" x="2" y="3" rx="2" />
        <path d="M2 8h20M6 5.5h.01M9 5.5h.01" />
      </>,
    CloudUpload: <>
        <path d="M12 13v8M8 17l4-4 4 4" />
        <path d="M20 16.5A5 5 0 0 0 18 7h-1.3A7 7 0 0 0 3.3 9.4 4.5 4.5 0 0 0 5 18h2" />
      </>,
    Image: <>
        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
        <circle cx="9" cy="9" r="2" />
        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
      </>,
    FileUp: <>
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
        <path d="M12 12v6" />
        <path d="m15 15-3-3-3 3" />
      </>,
    Search: <>
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </>,
    Sparkles: <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />,
    Briefcase: <>
        <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
        <rect width="20" height="14" x="2" y="6" rx="2" />
      </>,
    WandSparkles: <>
        <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" />
        <path d="m14 7 3 3" />
        <path d="M5 6v4" />
        <path d="M19 14v4" />
        <path d="M10 2v2" />
        <path d="M7 8H3" />
        <path d="M21 16h-4" />
        <path d="M11 3H9" />
      </>
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] ?? paths.Sparkles}
    </svg>;
};

export const CoffeeShopScreenshotFrame = ({src, alt}) => <div style={{
  margin: "28px 0",
  overflow: "hidden",
  borderRadius: "24px",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)",
  boxShadow: "0 16px 32px rgba(112,36,13,.18)"
}}>
    <div style={{
  padding: "clamp(10px, 2vw, 18px)",
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}}>
      <a href={src} target="_blank" rel="noreferrer" aria-label={`Open ${alt} at full size`} style={{
  display: "block",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: "16px",
  background: "rgba(255,255,255,.96)",
  boxShadow: "0 12px 28px rgba(55,27,18,.2)",
  cursor: "zoom-in"
}}>
        <img src={src} alt={alt} style={{
  display: "block",
  width: "100%",
  height: "auto"
}} />
      </a>
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

<PromptingCover />

You have started a conversation. Now give Replit a clear place to begin.

For this project, the goal is to open a neighborhood coffee shop that feels
warm, calm, and welcoming. You will describe that idea, answer Replit's
questions, and use the result to decide what to explore next.

## Write your first prompt

Start simple. You do not need a complete business plan before you begin. A good
first prompt names the outcome you want, shares the context you already have,
and sets useful boundaries.

This first prompt is not the whole plan. It gives Replit enough direction to
ask useful questions and help you shape the idea.

<AiPrompt>
  <span
    style={{
  backgroundColor: "#FDE9D9",
  borderRadius: "0.25rem",
  padding: "0.05rem 0.25rem",
}}
  >
    I want to open a neighborhood coffee shop. Help me shape the concept and
    make a launch plan.
  </span>

  {" "}

  <span
    style={{
  backgroundColor: "#FEF3C7",
  borderRadius: "0.25rem",
  padding: "0.05rem 0.25rem",
}}
  >
    I am considering a location near \[your neighborhood], and I want the café to
    feel warm, calm, and welcoming.
  </span>

  {" "}

  <span
    style={{
  backgroundColor: "#DCFCE7",
  borderRadius: "0.25rem",
  padding: "0.05rem 0.25rem",
}}
  >
    I will use the result to decide what to research and plan next.
  </span>
</AiPrompt>

This prompt starts with an **outcome**, shares useful **context**, and sets
clear **boundaries**. It also explains how you will use the response. You do
not need to ask every question at once.

## Answer Replit's questions

Replit asks questions when it needs more context. The questions will vary with
your idea. For the coffee shop, it asked:

* Who needs to love this place first?
* What pricing position feels right?
* How ambitious should the food offer be?
* What constraints do you need to plan around?

Answer the questions that matter most to your plan. Each answer gives Replit
more context for the next response.

<CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/follow-up-question.png" alt="Replit asks how ambitious the coffee shop food offer should be, with options for a small cold menu, a broader breakfast menu, or a full brunch kitchen" />

## Review the first result

With the prompt and answers, Replit created an editable launch workbook. It
included a 12-month model, a \$100k budget, a location scorecard, a launch
checklist, and official regulatory sources.

<CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/launch-workbook.png" alt="Editable spreadsheet workbook for a coffee shop launch with a concept summary and experience-by-daypart table" />

The base case included a \$5k owner salary. It estimated that the café would:

* Need roughly 110–120 daily transactions to break even
* Reach \$46.4k in monthly sales at 170 transactions a day
* Keep at least \$17.6k in cash reserve during the opening ramp

It also identified the premises as the biggest risk and offered to score a
listing or address before a visit. Your early idea is now a set of assumptions
you can test.

Replit also used current web research and source links to test those
assumptions. The next follow-up narrows the research to the local market.

## Continue the conversation

Use the result to choose your next question. Here, the next follow-up tests the
concept against the local market, nearby alternatives, and the assumptions in
the launch plan:

<AiPrompt>
  Research the local market, nearby alternatives, and the assumptions behind my
  coffee shop concept. Tell me what looks promising, what needs validation, and
  what I should decide next.
</AiPrompt>

## Use the research to choose a direction

Replit continues the conversation with current research and source links. In
this example, the research found local demand, but showed that the original
concept was not yet distinct enough to justify a lease.

That result led to a new decision: validate a faster station-edge bar, a
neighborhood café, or both before committing to a site.

<CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/choose-neighborhood-model.png" alt="Replit asks whether to validate a station-edge commuter bar, a neighborhood café, or both before deciding" />

We selected the **Neighborhood café** model. You now have a direction for the
launch plan and can start adding more context.

Learn more about [Web Search](/features/agent/web-search).

## Related

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/home/integrations">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-icon">
        {chatIcon("Paperclip", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Next</div>
    <div className="chat-card-title">Integrations</div>

    <p>
      Learn how to connect the tools and information behind your launch plan.
    </p>

    <div className="chat-card-link">Continue →</div>
  </a>

  <a className="chat-example has-visual" href="/prompting">
    <PromptingCardVisual />

    <div className="chat-example-tag">Prompting</div>
    <div className="chat-card-title">Learn more about prompting</div>
    <p>Use a few simple techniques to make every follow-up more useful.</p>
    <div className="chat-card-link">Learn more →</div>
  </a>

  <a className="chat-example has-visual" href="/features/agent/web-search">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-icon">
        {chatIcon("Search", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Web Search</div>
    <div className="chat-card-title">Research with current sources</div>
    <p>Use web research to test an idea against current information.</p>
    <div className="chat-card-link">Learn more →</div>
  </a>
</section>
