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

# Intégrations

> Connectez vos outils, ajoutez des Compétences réutilisables, et étendez Replit avec MCP.

export const IntegrationsOverviewCover = () => <div className="chat-mkt" role="img" aria-label="A frosted integrations catalog with connected service cards" 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",
  gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
  gap: "clamp(10px, 2vw, 18px)",
  width: "min(720px, 82%)",
  minHeight: "inherit",
  alignItems: "center",
  margin: "auto"
}}>
        {["48%", "74%", "58%"].map((lineWidth, index) => <div key={lineWidth} style={{
  display: "grid",
  gap: 10,
  minHeight: "clamp(122px, 20vw, 164px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 18,
  background: index === 1 ? "linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.16))" : "rgba(255,255,255,.16)",
  boxShadow: "0 16px 30px rgba(55,27,18,.16)",
  backdropFilter: "blur(6px)"
}}>
            <span style={{
  width: 26,
  height: 26,
  borderRadius: 8,
  background: index === 1 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.42)"
}} />
            <span style={{
  width: "88%",
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.74)"
}} />
            <span style={{
  width: lineWidth,
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.38)"
}} />
          </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>;
};

<IntegrationsOverviewCover />

Votre recherche sur le café vous a donné une direction. Avant de transformer
cette direction en un plan de lancement détaillé, apprenez à connecter
Replit aux outils et fichiers qui contiennent les informations dont vous avez
besoin.

## Pourquoi utiliser les intégrations ?

Les intégrations apportent dans Replit les informations des outils que vous
utilisez déjà. Connectez un service, puis demandez à Replit de trouver un
contexte pertinent, de répondre à une question, ou d'aider à accomplir une
tâche dans la même conversation.

Pour le lancement du café, vous utiliserez Google Drive comme source pour
les notes budgétaires, les recherches d'emplacement, les idées de menu, et
les références visuelles. Vous utiliserez Notion pour documenter le plan en
évolution. Voici d'abord comment fonctionne la connexion d'une intégration.

## Connectez une intégration

Replit prend en charge des connecteurs pour la communication, l'e-mail, les
calendriers, les fichiers, les fiches clients, la gestion de projet, et plus
encore. Le catalogue de connecteurs dans votre Espace de travail affiche ce
qui est disponible sur votre plan.

### Connectez une intégration

<Steps>
  <Step title="Ouvrez Intégrations">
    Depuis votre Espace de travail, sélectionnez **Intégrations** dans la
    barre latérale.

    <Frame>
      <img src="https://mintcdn.com/replit/teDUL4A-lNO7dv1O/images/chat/integrations-open-from-workspace.jpg?fit=max&auto=format&n=teDUL4A-lNO7dv1O&q=85&s=c0febc56b64d0ae9223249a2f8bb7cf9" alt="Accueil de l'Espace de travail Replit anonymisé avec Intégrations mis en évidence dans la barre latérale gauche" width="1451" height="1084" data-path="images/chat/integrations-open-from-workspace.jpg" />
    </Frame>
  </Step>

  <Step title="Sélectionnez une intégration">
    Parcourez ou recherchez dans la bibliothèque d'intégrations, puis
    sélectionnez le service dont vous avez besoin.

    <Frame>
      <img src="https://mintcdn.com/replit/teDUL4A-lNO7dv1O/images/chat/integrations-library-sanitized.jpg?fit=max&auto=format&n=teDUL4A-lNO7dv1O&q=85&s=c7c02cdd6628fda3018d08ee7a05ab8f" alt="Bibliothèque d'intégrations Replit anonymisée affichant les intégrations recommandées et disponibles" width="1606" height="979" data-path="images/chat/integrations-library-sanitized.jpg" />
    </Frame>
  </Step>

  <Step title="Connectez-la">
    Passez en revue ce à quoi l'intégration peut accéder, puis poursuivez le
    flux de connexion et d'autorisations du fournisseur. Salesforce est
    illustré ici. D'autres intégrations peuvent différer.

    <Frame>
      <img src="https://mintcdn.com/replit/teDUL4A-lNO7dv1O/images/chat/salesforce-connect-permissions-sanitized.jpg?fit=max&auto=format&n=teDUL4A-lNO7dv1O&q=85&s=428570b45b627f40db0ba56dc4579254" alt="Boîte de dialogue de connexion Salesforce anonymisée décrivant l'authentification, la confidentialité, les permissions et le bouton Continue to Salesforce" width="1455" height="1081" data-path="images/chat/salesforce-connect-permissions-sanitized.jpg" />
    </Frame>
  </Step>
</Steps>

Les services connectés respectent les permissions du compte que vous
utilisez pour vous connecter. Replit ne peut accéder qu'aux informations
auxquelles ce compte peut accéder.

## Explorez davantage

Les intégrations sont un moyen de connecter Replit à d'autres applications.
Vous pouvez aussi utiliser les Compétences pour des instructions réutilisables
ou MCP pour des connexions supplémentaires.

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

    <div className="chat-example-tag">Instructions réutilisables</div>
    <div className="chat-card-title">Explorez les Compétences</div>

    <p>
      Donnez à Replit une approche répétable, des instructions, et des
      fichiers d'appui.
    </p>

    <div className="chat-card-link">Explorer les Compétences →</div>
  </a>

  <a className="chat-example has-visual" href="/fr/features/mcp/overview">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-icon">
        {chatIcon("Plug", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Plus de connexions</div>
    <div className="chat-card-title">Explorez MCP</div>
    <p>Connectez Replit à des outils et sources de données supplémentaires via MCP.</p>
    <div className="chat-card-link">Explorer MCP →</div>
  </a>
</section>

### Découvrez un flux de travail d'intégration

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/fr/use-cases/prepare-for-a-customer-call">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <b />

        <b />

        <b />
      </div>

      <div className="chat-use-case-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <circle cx="11" cy="11" r="7" />

          <path d="m20 20-4-4" />

          <path d="M8 11h6M11 8v6" />
        </svg>
      </div>
    </div>

    <span>
      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />

        <path d="m20 20-4-4" />

        <path d="M8 11h6M11 8v6" />
      </svg>
    </span>

    <div className="chat-example-tag">Rechercher et analyser</div>
    <div className="chat-card-title">Se préparer pour un appel client</div>

    <p>
      Réunissez le contexte de Salesforce, Slack, et Google Drive avant une
      conversation client.
    </p>

    <div className="chat-card-link">Explorer le cas d'usage →</div>
  </a>
</section>

## Suivant

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

    <div className="chat-example-tag">Projet café</div>
    <div className="chat-card-title">Intégrez des outils</div>

    <p>
      Connectez Drive et Notion, puis demandez à Replit de réunir vos plans.
    </p>

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