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

# Conversations and projects

> Understand when to continue work in a Conversation and when to use a Project for substantial build or design work.

export const ConversationsProjectsCover = ({handoff = false}) => <div className="chat-mkt" role="img" aria-label={handoff ? "A Replit Conversation flowing into a structured Project window" : "A frosted Replit Conversation window linked to a structured Project window"} 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: "relative",
  zIndex: 1,
  display: "flex",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "inherit",
  alignItems: "center",
  justifyContent: "center",
  gap: handoff ? "clamp(5px, 1vw, 13px)" : "clamp(3px, .8vw, 10px)",
  padding: "clamp(10px, 1.6vw, 18px)"
}}>
        <div style={{
  position: "relative",
  flex: handoff ? "0 1 38%" : "0 1 45%",
  width: handoff ? "38%" : "45%",
  minWidth: 0,
  maxWidth: "none"
}}>
          <div aria-hidden="true" style={{
  position: "absolute",
  width: "84%",
  height: "82%",
  left: "10%",
  top: "9%",
  transform: "rotate(3deg)",
  border: "1px solid rgba(255,255,255,.28)",
  borderRadius: 20,
  opacity: 0.52
}} />
          <div aria-hidden="true" style={{
  position: "relative",
  display: "flex",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "clamp(138px, 20vw, 190px)",
  gap: "clamp(7px, 1.5vw, 14px)",
  padding: "clamp(10px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "grid",
  width: "clamp(20px, 4vw, 36px)",
  minWidth: "clamp(20px, 4vw, 36px)",
  alignContent: "start",
  gap: 8,
  paddingRight: "clamp(6px, 1vw, 11px)",
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 4,
  background: "rgba(255,255,255,.9)"
}} />
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 4,
  border: "1px solid rgba(255,255,255,.66)",
  background: "rgba(255,255,255,.12)"
}} />
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 999,
  border: "1px solid rgba(255,255,255,.48)"
}} />
            </div>
            <div style={{
  display: "grid",
  minWidth: 0,
  flex: "1 1 auto",
  alignContent: "space-between",
  gap: 8
}}>
              <div style={{
  display: "grid",
  gap: 7
}}>
                <span style={{
  width: "66%",
  height: 17,
  border: "1px solid rgba(255,255,255,.44)",
  borderRadius: "10px 10px 10px 3px",
  background: "rgba(255,255,255,.17)"
}} />
                <span style={{
  justifySelf: "end",
  width: "56%",
  height: 17,
  borderRadius: "10px 10px 3px 10px",
  background: "rgba(255,255,255,.76)"
}} />
                <span style={{
  width: "76%",
  height: 21,
  border: "1px solid rgba(255,255,255,.4)",
  borderRadius: "10px 10px 10px 3px",
  background: "rgba(255,255,255,.14)"
}} />
              </div>
              <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: 6,
  padding: "7px 8px",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 10,
  background: "rgba(255,255,255,.14)"
}}>
                <span style={{
  width: "65%",
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.7)"
}} />
                <span style={{
  width: 14,
  height: 14,
  borderRadius: 5,
  background: "rgba(255,255,255,.88)"
}} />
              </div>
            </div>
          </div>
        </div>

        <div aria-hidden="true" style={{
  position: "relative",
  width: handoff ? "clamp(30px, 9vw, 92px)" : "clamp(24px, 7vw, 76px)",
  minWidth: handoff ? "clamp(30px, 9vw, 92px)" : "clamp(24px, 7vw, 76px)",
  height: "clamp(38px, 6vw, 56px)"
}}>
          <span style={{
  position: "absolute",
  left: 0,
  right: 0,
  top: "50%",
  width: "100%",
  height: 2,
  borderRadius: 999,
  background: "linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.86), rgba(255,255,255,.18))",
  boxShadow: "0 0 12px rgba(255,255,255,.36)"
}} />
          <span style={{
  position: "absolute",
  left: handoff ? "7%" : "13%",
  top: "calc(50% - 5px)",
  width: handoff ? 7 : 10,
  height: handoff ? 7 : 10,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999,
  background: "rgba(255,255,255,.18)",
  boxShadow: "0 0 10px rgba(255,255,255,.24)"
}} />
          <span style={{
  position: "absolute",
  left: handoff ? "39%" : "46%",
  top: handoff ? "calc(50% - 6px)" : "calc(50% - 8px)",
  width: handoff ? 12 : 16,
  height: handoff ? 12 : 16,
  border: "1px solid rgba(255,255,255,.86)",
  borderRadius: 999,
  background: "rgba(255,255,255,.28)",
  boxShadow: "0 0 14px rgba(255,255,255,.34)"
}} />
          <span style={{
  position: "absolute",
  right: handoff ? "3%" : "8%",
  top: handoff ? "calc(50% - 9px)" : "calc(50% - 5px)",
  width: handoff ? 18 : 10,
  height: handoff ? 18 : 10,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999,
  background: handoff ? "rgba(255,255,255,.42)" : "rgba(255,255,255,.18)",
  boxShadow: handoff ? "0 0 18px rgba(255,255,255,.46)" : "0 0 10px rgba(255,255,255,.24)"
}} />
        </div>

        <div style={{
  position: "relative",
  flex: handoff ? "0 1 52%" : "0 1 45%",
  width: handoff ? "52%" : "45%",
  minWidth: 0,
  maxWidth: "none",
  transform: handoff ? "translateX(1%)" : undefined
}}>
          <div aria-hidden="true" style={{
  position: "absolute",
  width: "84%",
  height: "82%",
  right: "10%",
  top: "9%",
  transform: "rotate(-3deg)",
  border: "1px solid rgba(255,255,255,.28)",
  borderRadius: 20,
  opacity: 0.52
}} />
          <div aria-hidden="true" style={{
  position: "relative",
  display: "grid",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "clamp(138px, 20vw, 190px)",
  gridTemplateRows: "auto 1fr",
  gap: "clamp(9px, 1.8vw, 15px)",
  padding: "clamp(10px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.92)"
}} />
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.52)"
}} />
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.32)"
}} />
              <span style={{
  width: "34%",
  height: 6,
  marginLeft: 6,
  borderRadius: 999,
  background: "rgba(255,255,255,.62)"
}} />
            </div>
            <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(18px, .45fr) minmax(0, 1fr)",
  gap: "clamp(7px, 1.5vw, 14px)",
  minWidth: 0
}}>
              <div style={{
  display: "grid",
  alignContent: "start",
  gap: 7,
  paddingRight: "clamp(5px, 1vw, 10px)",
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
                <span style={{
  width: "80%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.8)"
}} />
                <span style={{
  width: "64%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.42)"
}} />
                <span style={{
  width: "74%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.26)"
}} />
              </div>
              <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
  gridTemplateRows: "repeat(2, minmax(0, 1fr))",
  gap: 7,
  minWidth: 0
}}>
                <span style={{
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 9,
  background: "rgba(255,255,255,.2)"
}} />
                <span style={{
  border: "1px solid rgba(255,255,255,.32)",
  borderRadius: 9,
  background: "rgba(255,255,255,.1)"
}} />
                <span style={{
  gridColumn: "span 2",
  border: "1px solid rgba(255,255,255,.4)",
  borderRadius: 9,
  background: "rgba(255,255,255,.16)"
}} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </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>;
};

<ConversationsProjectsCover handoff />

You have researched the neighborhood, connected your tools, and built a launch
plan. Now it is time to let people know about your coffee shop. For that, you
will create an opening site.

Before you begin, it helps to understand the two places where this work lives in
Replit: conversations and projects.

## From plan to project

The coffee-shop launch began in a conversation. That is where you shaped the
idea, researched the market, connected tools, and created a Routine.

Now you are ready to build an opening site. A project is the place for that
substantial design and build work. Replit can use the context already in the
conversation, so you do not need to start again from scratch.

## What is a conversation?

A **conversation** is a single thread where you ask questions, explore
information, run Routines, and continue work through follow-ups. In this story,
it holds the coffee-shop research and launch plan.

## What is a project?

A **project** is a durable, structured space for substantial build and design
work. In this story, it is where you will create and refine the opening site.

## How they work together

| Area      | Conversation                                                                     | Project                                                                |
| --------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| Best for  | Exploring the idea, researching competitors, and running the weekly market watch | Designing and building the opening site                                |
| Structure | A single thread with your research, decisions, and follow-ups                    | A structured space for the site, its design, and other build artifacts |
| Routines  | Create and manage recurring research                                             | Use the results that return to the conversation                        |
| Context   | Holds the launch plan that got you here                                          | Starts with the direction you established in the conversation          |

Start in a conversation when you want to ask or explore. Move into a project
when you are ready to build. The handoff keeps the direction you have already
created.

## Related

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

    <div className="chat-example-tag">Ask and explore</div>
    <div className="chat-card-title">Conversations</div>

    <p>
      Learn how Conversations support questions, exploration, Routines, and
      outcomes.
    </p>

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

  <a className="chat-example has-visual" href="/features/projects-and-artifacts/projects">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-icon">
        {chatIcon("PanelsTopLeft", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Build and organize</div>
    <div className="chat-card-title">Projects</div>

    <p>
      Learn how Projects organize substantial build and design work with
      multiple artifacts.
    </p>

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

## Next

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/home/design-an-opening-site">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-window">
        <b />

        <b />

        <b />
      </div>
    </div>

    <div className="chat-example-tag">Opening site</div>
    <div className="chat-card-title">Design the opening site</div>
    <p>Use the conversation and launch plan to create a site for your café.</p>
    <div className="chat-card-link">Continue →</div>
  </a>
</section>