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

# Add context

> Give Replit the relevant files, sources, connected tools, and existing work needed to understand a Conversation.

export const IntegrationsCardVisual = () => <CardScene>
    <div style={{
  position: "relative",
  width: 132,
  height: 100
}}>
      <Panel style={{
  position: "absolute",
  left: 41,
  top: 26,
  width: 50,
  height: 50,
  display: "grid",
  placeItems: "center"
}}>
        <DotGrid />
      </Panel>
      {[[0, 4], [86, 4], [43, 75]].map(([left, top]) => <span key={`${left}-${top}`} style={{
  position: "absolute",
  left,
  top,
  width: 30,
  height: 30,
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 9,
  background: "rgba(255,255,255,.22)"
}} />)}
    </div>
  </CardScene>;

export const ImportProjectCardVisual = () => <CardScene>
    <div style={{
  display: "flex",
  alignItems: "center",
  gap: 10
}}>
      <Panel style={{
  width: 58,
  height: 70,
  padding: 10
}}>
        {["100%", "73%", "86%"].map(width => <i key={width} style={{
  display: "block",
  width,
  height: 5,
  marginBottom: 8,
  borderRadius: 99,
  background: "rgba(255,255,255,.66)"
}} />)}
      </Panel>
      <span style={{
  width: 20,
  height: 2,
  background: "rgba(255,255,255,.72)"
}} />
      <Panel style={{
  width: 70,
  height: 70,
  padding: 11
}}>
        <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, 1fr)",
  gap: 6
}}>
          {Array.from({
  length: 4
}, (_, index) => <i key={index} style={{
  height: 18,
  borderRadius: 4,
  background: "rgba(255,255,255,.55)"
}} />)}
        </div>
      </Panel>
    </div>
  </CardScene>;

export const FigmaCardVisual = () => <CardScene>
    <Panel style={{
  width: 104,
  height: 92,
  display: "grid",
  placeItems: "center"
}}>
      <svg width="45" height="60" viewBox="0 0 24 24" fill="rgba(255,255,255,.88)">
        <path d="M12 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0zM4 20a4 4 0 0 1 4-4h4v4a4 4 0 1 1-8 0zM12 0v8h4a4 4 0 1 0 0-8h-4zM4 4a4 4 0 0 0 4 4h4V0H8a4 4 0 0 0-4 4zM4 12a4 4 0 0 0 4 4h4V8H8a4 4 0 0 0-4 4z" />
      </svg>
    </Panel>
  </CardScene>;

export const FilesCardVisual = () => <CardScene>
    <Panel style={{
  width: 86,
  height: 104,
  padding: 14
}}>
      <div style={{
  display: "grid",
  gap: 9
}}>
        {["76%", "100%", "62%", "86%"].map(width => <i key={width} style={{
  width,
  height: 5,
  borderRadius: 99,
  background: "rgba(255,255,255,.7)"
}} />)}
      </div>
    </Panel>
  </CardScene>;

export const AddContextCover = () => <div className="chat-mkt" role="img" aria-label="File, image, Figma, and Slack context cues around a Replit Conversation prompt" 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: "grid",
  width: "100%",
  minHeight: "inherit",
  placeItems: "center",
  padding: "clamp(12px, 2.5vw, 24px)",
  boxSizing: "border-box"
}}>
        <div style={{
  position: "absolute",
  left: "clamp(12px, 6%, 62px)",
  top: "29%",
  display: "grid",
  width: "clamp(34px, 7vw, 58px)",
  height: "clamp(42px, 9vw, 72px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 13,
  background: "linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,255,255,.12))",
  boxShadow: "0 12px 24px rgba(55,27,18,.16)",
  backdropFilter: "blur(5px)"
}}>
          <div style={{
  position: "relative",
  width: "48%",
  height: "58%",
  border: "1px solid rgba(255,255,255,.86)",
  borderRadius: 4
}}>
            <span style={{
  position: "absolute",
  top: 5,
  left: 4,
  right: 4,
  height: 2,
  borderRadius: 999,
  background: "rgba(255,255,255,.76)"
}} />
            <span style={{
  position: "absolute",
  top: 11,
  left: 4,
  right: 7,
  height: 2,
  borderRadius: 999,
  background: "rgba(255,255,255,.48)"
}} />
          </div>
        </div>

        <div style={{
  position: "absolute",
  left: "clamp(18px, 10%, 88px)",
  bottom: "clamp(18px, 9%, 44px)",
  display: "grid",
  width: "clamp(34px, 7vw, 56px)",
  height: "clamp(34px, 7vw, 56px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 15,
  background: "linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,255,255,.12))",
  boxShadow: "0 12px 24px rgba(55,27,18,.16)",
  backdropFilter: "blur(5px)"
}}>
          <svg aria-hidden="true" viewBox="0 0 24 24" width="55%" fill="rgba(255,255,255,.88)">
            <path d="M12 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0zM4 20a4 4 0 0 1 4-4h4v4a4 4 0 1 1-8 0zM12 0v8h4a4 4 0 1 0 0-8h-4zM4 4a4 4 0 0 0 4 4h4V0H8a4 4 0 0 0-4 4zM4 12a4 4 0 0 0 4 4h4V8H8a4 4 0 0 0-4 4z" />
          </svg>
        </div>

        <div style={{
  position: "absolute",
  right: "clamp(12px, 6%, 62px)",
  top: "20%",
  display: "grid",
  width: "clamp(38px, 8vw, 66px)",
  height: "clamp(34px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 13,
  background: "linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,255,255,.12))",
  boxShadow: "0 12px 24px rgba(55,27,18,.16)",
  backdropFilter: "blur(5px)"
}}>
          <div style={{
  position: "relative",
  width: "58%",
  height: "54%",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.82)",
  borderRadius: 5
}}>
            <span style={{
  position: "absolute",
  top: "22%",
  right: "18%",
  width: 5,
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.88)"
}} />
            <span style={{
  position: "absolute",
  left: "-7%",
  right: "-7%",
  bottom: "-18%",
  height: "72%",
  transform: "rotate(28deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.18)"
}} />
          </div>
        </div>

        <div style={{
  position: "absolute",
  right: "clamp(16px, 9%, 84px)",
  bottom: "clamp(18px, 8%, 42px)",
  display: "grid",
  width: "clamp(34px, 7vw, 56px)",
  height: "clamp(34px, 7vw, 56px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 999,
  background: "linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,255,255,.12))",
  boxShadow: "0 12px 24px rgba(55,27,18,.16)",
  backdropFilter: "blur(5px)"
}}>
          <svg aria-hidden="true" viewBox="0 0 24 24" width="58%" fill="rgba(255,255,255,.88)">
            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.527 2.527 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
          </svg>
        </div>

        <div style={{
  position: "relative",
  width: "min(56%, 520px)",
  minWidth: "clamp(230px, 46%, 360px)",
  minHeight: "clamp(142px, 22vw, 196px)",
  padding: "clamp(13px, 2.4vw, 22px)",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 22,
  background: "linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.11))",
  boxShadow: "0 20px 38px rgba(55,27,18,.22)",
  backdropFilter: "blur(6px)",
  boxSizing: "border-box"
}}>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 7
}}>
            <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)"
}} />
          </div>
          <div style={{
  display: "grid",
  gap: 8,
  marginTop: "clamp(16px, 3vw, 24px)"
}}>
            <span style={{
  width: "52%",
  height: 9,
  borderRadius: 999,
  background: "rgba(255,255,255,.55)"
}} />
            <span style={{
  width: "72%",
  height: 9,
  borderRadius: 999,
  background: "rgba(255,255,255,.28)"
}} />
          </div>
          <div style={{
  position: "absolute",
  left: "clamp(13px, 2.4vw, 22px)",
  right: "clamp(13px, 2.4vw, 22px)",
  bottom: "clamp(13px, 2.4vw, 22px)",
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: 8,
  padding: "9px 10px 9px 12px",
  border: "1px solid rgba(255,255,255,.6)",
  borderRadius: 14,
  background: "rgba(255,255,255,.15)"
}}>
            <span style={{
  width: "62%",
  height: 6,
  borderRadius: 999,
  background: "rgba(255,255,255,.72)"
}} />
            <span style={{
  width: 22,
  height: 22,
  borderRadius: 8,
  background: "rgba(255,255,255,.9)"
}} />
          </div>
        </div>
      </div>
    </div>
  </div>;

<AddContextCover />

Add relevant context and tools when they help Replit understand your request. Useful context gives Replit clearer intent and improves the quality of the outcome.

## How do I add context?

Select the **plus** menu in the prompt box to upload a file, import existing work, use a Skill or design system, or add an integration.

<Frame>
  <img src="https://mintcdn.com/replit/teDUL4A-lNO7dv1O/images/chat/prompt-box-plus-menu.png?fit=max&auto=format&n=teDUL4A-lNO7dv1O&q=85&s=7fd877ec8f84f73ec684181b9ec4f7b3" alt="Prompt box plus menu with Upload a file, Create something new, Import an existing project, Use a skill, Use a design system, and Add an integration" width="1558" height="556" data-path="images/chat/prompt-box-plus-menu.png" />
</Frame>

## Choose context for the task

You can add files, screenshots and images, web sources and research, and connected tools. Choose the sources that help with the current task:

* **[Files, screenshots, and images](/chat/upload-and-use-files):** Add documents, spreadsheets, exports, screenshots, or visual references that contain useful evidence or requirements.
* **[Web sources and research](/features/agent/web-search):** Ask Replit to search the web when current information or outside perspectives would improve the result.
* **[Integrations](/chat/integrate-your-tools):** Connect the tools you need, then name the services, channels, records, or other information Replit should consider.
* **[Design context](/chat/work-with-figma):** Attach a Figma frame when layout, hierarchy, or visual direction matters.
* **[Existing work](/chat/import-a-project):** Import a Project when you want to continue building from code, a design, or work created elsewhere. Importing a Project is different from attaching a file as evidence.

You can also paste a relevant link into your request or ask Replit to search the web.

## Choose a context source

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/chat/upload-and-use-files">
    <FilesCardVisual />

    <span>
      <Icon icon="file-arrow-up" size={19} />
    </span>

    <div className="chat-card-title">Upload and use files</div>
    <p>Ask questions about an uploaded file or use it as evidence.</p>
    <div className="chat-card-link">Explore →</div>
  </a>

  <a className="chat-example has-visual" href="/chat/work-with-figma">
    <FigmaCardVisual />

    <span>
      <Icon icon="figma" size={19} />
    </span>

    <div className="chat-card-title">Work with Figma</div>
    <p>Use a specific frame when the visual direction matters.</p>
    <div className="chat-card-link">Explore →</div>
  </a>

  <a className="chat-example has-visual" href="/chat/integrate-your-tools">
    <IntegrationsCardVisual />

    <span>
      <Icon icon="plug" size={19} />
    </span>

    <div className="chat-card-title">Integrate your tools</div>
    <p>Connect services that hold relevant information or support actions.</p>
    <div className="chat-card-link">Explore →</div>
  </a>

  <a className="chat-example has-visual" href="/chat/import-a-project">
    <ImportProjectCardVisual />

    <span>
      <Icon icon="file-import" size={19} />
    </span>

    <div className="chat-card-title">Import an existing Project</div>

    <p>
      Continue building from existing code, a design, or other project work.
    </p>

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

For current public information, follow the [Web Search guide](/features/agent/web-search). [MCP](/chat/connect-through-mcp) is a separate extension path for compatible tools and clients.
