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

# Integrate tools

> Connect the files and tools that give Replit the context to build a coffee shop launch plan.

export const IntegrateYourToolsCover = () => <div className="chat-mkt" role="img" aria-label="Supported service context connecting into a central Replit workspace" 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% -16%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.47), 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,.13), rgba(255,255,255,0) 50%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  width: "100%",
  minHeight: "inherit",
  placeItems: "center",
  padding: "clamp(14px, 3vw, 28px)",
  boxSizing: "border-box"
}}>
        <div style={{
  position: "absolute",
  left: "clamp(13px, 8%, 82px)",
  top: "26%",
  display: "grid",
  width: "clamp(42px, 8vw, 64px)",
  height: "clamp(42px, 8vw, 64px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 16,
  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 viewBox="0 0 24 24" width="56%" 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: "absolute",
  left: "clamp(22px, 12%, 112px)",
  bottom: "clamp(18px, 9%, 44px)",
  display: "grid",
  width: "clamp(38px, 7vw, 58px)",
  height: "clamp(38px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.14)",
  backdropFilter: "blur(5px)"
}}>
          <div style={{
  display: "grid",
  gap: 3,
  width: "48%"
}}>
            {[0, 1, 2].map(line => <span key={line} style={{
  display: "block",
  height: 4,
  borderRadius: 999,
  background: line === 0 ? "rgba(255,255,255,.84)" : "rgba(255,255,255,.44)"
}} />)}
          </div>
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(13px, 8%, 82px)",
  top: "26%",
  display: "grid",
  width: "clamp(42px, 8vw, 64px)",
  height: "clamp(42px, 8vw, 64px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 16,
  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={{
  width: "46%",
  height: "40%",
  border: "1px solid rgba(255,255,255,.86)",
  borderRadius: 4,
  boxSizing: "border-box"
}} />
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(22px, 12%, 112px)",
  bottom: "clamp(18px, 9%, 44px)",
  display: "grid",
  width: "clamp(38px, 7vw, 58px)",
  height: "clamp(38px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.14)",
  backdropFilter: "blur(5px)"
}}>
          <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, 1fr)",
  gap: 3,
  width: "48%",
  height: "48%"
}}>
            {[0, 1, 2, 3].map(cell => <span key={cell} style={{
  borderRadius: 3,
  background: cell === 0 ? "rgba(255,255,255,.84)" : "rgba(255,255,255,.38)"
}} />)}
          </div>
        </div>
        <div style={{
  position: "relative",
  display: "grid",
  width: "clamp(124px, 24vw, 194px)",
  height: "clamp(124px, 24vw, 194px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.68)",
  borderRadius: 28,
  background: "linear-gradient(145deg, rgba(255,255,255,.4), rgba(255,255,255,.12))",
  boxShadow: "0 24px 44px rgba(67,21,7,.24)",
  backdropFilter: "blur(8px)"
}}>
          <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, 16px)",
  gap: 7
}}>
            {[0, 1, 2, 3].map(tile => <span key={tile} style={{
  width: 16,
  height: 16,
  borderRadius: 5,
  background: tile === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.46)",
  boxShadow: tile === 0 ? "0 0 14px rgba(255,255,255,.42)" : "none"
}} />)}
          </div>
          <div style={{
  position: "absolute",
  bottom: "16%",
  display: "flex",
  gap: 5
}}>
            {[0, 1, 2].map(node => <span key={node} style={{
  width: 5,
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.52)"
}} />)}
          </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>;
};

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

<IntegrateYourToolsCover />

Now that you have learned about integrations, let’s apply them to the
coffee-shop launch.

You have chosen a direction: build a **neighborhood café**, not a station-edge
commuter bar. Give Replit the material it needs to turn that direction into a
plan you can act on.

Integrations connect Replit to the tools and files you already use. They let
Replit bring in relevant information or take the actions needed for the task.
You can connect services such as **[Slack](/features/integrations/overview#connectors)**,
**[Google Drive](/features/integrations/overview#connectors)**,
**[Notion](/features/integrations/overview#connectors)**, or
**[Salesforce](/features/integrations/overview#connectors)**, plus more than
450 other services.

For the coffee shop, Google Drive gives Replit access to a budget, location
notes, menu ideas, photos, and visual references. Notion gives it a place to
document the launch plan, decisions, and open questions.

Learn more about [integrating your tools](/chat/integrate-your-tools).

<Steps>
  <Step title="Ask Replit to bring the materials together">
    Start with the request below. Replit checks what it needs to complete the
    plan and asks you to connect a service when it needs access.

    <AiPrompt>
      Use my café files to create a first-month launch plan for the neighborhood
      café. Update the relevant assumptions, then document the concept, key
      decisions, open questions, and launch checklist in Notion.
    </AiPrompt>
  </Step>

  <Step title="Connect Google Drive when Replit asks">
    Approve the Google Drive connection so Replit can inspect the materials you
    want it to use. It opens the connection request directly in the
    Conversation.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/connect-google-drive.png" alt="Replit asking to connect Google Drive so it can inspect café files" />
  </Step>

  <Step title="Connect Notion when Replit needs to document the plan">
    Approve Notion when Replit asks to create the launch brief. It can then
    record the concept, decisions, open questions, and checklist in one place.
  </Step>
</Steps>

Google Drive gives Replit evidence to work from. Notion keeps the evolving plan
in one place as you answer new questions and make decisions.

Learn more about [adding context](/chat/add-context), [uploading files](/chat/upload-and-use-files), and [integrating your tools](/chat/integrate-your-tools).

## Next

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

    <div className="chat-example-tag">Routines</div>
    <div className="chat-card-title">Keep an eye on the competition</div>
    <p>Set up a Routine to watch for changes while you prepare to launch.</p>
    <div className="chat-card-link">Continue →</div>
  </a>
</section>