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

# Connections

> Use Auth0 connections to enable AI Agents to access and call third-party APIs on the user's behalf through Token Vault.

export const SearchAndFilterGrid = ({items = [], filters = []}) => {
  const fuzzySearch = (needle, haystack) => {
    if (!needle || !haystack) return false;
    const needleLower = needle.toLowerCase();
    const haystackLower = haystack.toLowerCase();
    return haystackLower.includes(needleLower);
  };
  const [searchTerm, setSearchTerm] = useState("");
  const [filter, setFilter] = useState(null);
  const filterButtonsRef = useRef(null);
  const indicatorRef = useRef(null);
  useEffect(() => {
    if (!filterButtonsRef.current || !indicatorRef.current) return;
    const activeButton = filterButtonsRef.current.querySelector(".custom-grid-filter-button.active");
    const container = filterButtonsRef.current;
    const indicator = indicatorRef.current;
    if (activeButton) {
      const containerRect = container.getBoundingClientRect();
      const buttonRect = activeButton.getBoundingClientRect();
      const left = buttonRect.left - containerRect.left - 2;
      const width = buttonRect.width;
      indicator.style.transform = `translateX(${left}px)`;
      indicator.style.width = `${width}px`;
      indicator.style.opacity = "1";
    }
  }, [filter]);
  const filteredItems = useMemo(() => {
    let filtered = items;
    if (searchTerm.trim()) {
      filtered = filtered.filter(item => {
        return fuzzySearch(searchTerm, item.title) || fuzzySearch(searchTerm, item.description);
      });
    }
    if (filter) {
      filtered = filtered.filter(item => item.type === filter);
    }
    return filtered;
  }, [searchTerm, filter]);
  const sortedItems = useMemo(() => {
    return [...filteredItems].sort((a, b) => {
      if (a.status === "Available" && b.status === "Coming Soon") return -1;
      if (a.status === "Coming Soon" && b.status === "Available") return 1;
      return a.title.localeCompare(b.title);
    });
  }, [filteredItems]);
  return <div className="custom-grid-container">
      <div className="custom-grid-search-container">
        <div className="custom-grid-search-filter-wrapper">
          <div className="custom-grid-search-input-wrapper">
            <input type="text" placeholder="Search..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="custom-grid-search-input" />
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="custom-grid-search-icon">
              <circle cx="11" cy="11" r="8" stroke="currentColor" strokeWidth="2" />
              <path d="m21 21-4.35-4.35" stroke="currentColor" strokeWidth="2" />
            </svg>
          </div>
          <div className="custom-grid-filter-buttons-wrapper">
            <div className="custom-grid-filter-buttons" ref={filterButtonsRef}>
              <button onClick={() => setFilter(null)} className={`custom-grid-filter-button ${filter === null ? "active" : ""}`}>
                All
              </button>
              {filters.map(filterOption => <button key={filterOption} onClick={() => setFilter(filterOption)} className={`custom-grid-filter-button ${filter === filterOption ? "active" : ""}`}>
                  {filterOption}
                </button>)}
              <span ref={indicatorRef} className="custom-grid-filter-buttons-indicator" />
            </div>
          </div>
        </div>
      </div>

      <Columns cols={2}>
        {sortedItems.map(item => <CustomCard item={item} key={item.id} />)}
      </Columns>

      {sortedItems.length === 0 && <div className="custom-grid-no-results">
          <div className="custom-grid-no-results-icon">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="sc-cpUzJl">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10 2a8 8 0 104.87 14.348l5.423 5.423 1.414-1.415-5.415-5.415A8 8 0 0010 2zm-6 8a6 6 0 1112 0 6 6 0 01-12 0z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 className="custom-grid-no-results-title">No results found</h3>
          <p className="custom-grid-no-results-text">
            {searchTerm ? `No results for "${searchTerm}". ` : ""}Try adjusting
            your search or filter criteria.
          </p>
        </div>}
    </div>;
};

export const CustomCard = ({item}) => {
  const isComingSoon = item.status === 'Coming Soon';
  const cardContent = <div className="custom-card">
      <div className="custom-card-header">
        <span className={`custom-card-icon ${isComingSoon ? 'coming-soon' : ''}`}>
          <img src={item.icon} alt={`${item.title} icon`} style={{
    ...item.styles
  }} />
        </span>
        <h3 className={`custom-card-title ${isComingSoon ? 'coming-soon' : ''}`}>
          {item.title}
        </h3>
      </div>

      <p className={`custom-card-description ${isComingSoon ? 'coming-soon' : ''}`}>
        {item.description}
      </p>

      <div className="custom-card-footer">
        <span className={`custom-card-type-tag ${isComingSoon ? 'coming-soon' : ''}`}>
          {item.type}
        </span>

        {isComingSoon && <em className="custom-card-coming-soon">
            Coming Soon
          </em>}
      </div>
    </div>;
  return <Card href={item.href} disabled={isComingSoon}>
      {cardContent}
    </Card>;
};

export const integrationTypes = ["Social", "Enterprise"];

export const integrations = [{
  id: "gmail",
  title: "Gmail",
  icon: "/ai/docs/img/integrations/gmail-avatar.png",
  href: "/integrations/google",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, create, and send Gmail emails."
}, {
  id: "google-calendar",
  title: "Google Calendar",
  icon: "/ai/docs/img/integrations/google-calendar-avatar.png",
  href: "/integrations/google",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, schedule, and update events in Google Calendar."
}, {
  id: "google-drive",
  title: "Google Drive",
  icon: "/ai/docs/img/integrations/google-drive-avatar.png",
  href: "/integrations/google",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, create, and modify files in Google Drive."
}, {
  id: "google-sheets",
  title: "Google Sheets",
  icon: "/ai/docs/img/integrations/google-sheets-avatar.png",
  href: "/integrations/google",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, create, and modify spreadsheets in Google Sheets."
}, {
  id: "google-slides",
  title: "Google Slides",
  icon: "/ai/docs/img/integrations/google-slides-avatar.png",
  href: "/integrations/google",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, create, and modify slides in Google Slides."
}, {
  id: "google-contacts",
  title: "Google Contacts",
  icon: "/ai/docs/img/integrations/google-contacts-avatar.png",
  href: "/integrations/google",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, create, and modify contacts in Google Contacts."
}, {
  id: "google-tasks",
  title: "Google Tasks",
  icon: "/ai/docs/img/integrations/google-tasks-avatar.png",
  href: "/integrations/google",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, create, and modify tasks in Google Tasks."
}, {
  id: "google-workspace",
  title: "Google Workspace",
  icon: "/ai/docs/img/integrations/google-avatar.png",
  href: "/integrations/google-workspace",
  status: "Available",
  type: "Enterprise",
  description: "Allow your AI agents to access your Google Workspace services including Gmail, Google Calendar, Drive, and more."
}, {
  id: "youtube",
  title: "YouTube",
  icon: "/ai/docs/img/integrations/youtube-avatar.png",
  href: "/integrations/google",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, create, and manage YouTube videos."
}, {
  id: "microsoft",
  title: "Microsoft",
  icon: "/ai/docs/img/integrations/microsoft-avatar.png",
  href: "/integrations/microsoft",
  status: "Available",
  type: "Social",
  description: "Connect to your users via their Microsoft Account."
}, {
  id: "microsoft-azure",
  title: "Microsoft Entra (Azure AD)",
  icon: "/ai/docs/img/integrations/microsoft-avatar.png",
  href: "/integrations/microsoft-azure",
  status: "Available",
  type: "Enterprise",
  description: "Allow your AI agents to connect to Microsoft Entra (Azure AD) services including Outlook, Teams, OneDrive, and more."
}, {
  id: "github",
  title: "GitHub",
  icon: "/ai/docs/img/integrations/github-avatar.png",
  href: "/integrations/github",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to create and manage GitHub issues and pull requests.",
  styles: {
    filter: "var(--github-logo-filter, none)"
  }
}, {
  id: "slack",
  title: "Sign in with Slack",
  icon: "/ai/docs/img/integrations/slack-avatar.png",
  href: "/integrations/slack",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to send and receive Slack messages."
}, {
  id: "box",
  title: "Box",
  icon: "/ai/docs/img/integrations/box-avatar.png",
  href: "/integrations/box",
  status: "Available",
  type: "Social",
  description: "Allow your AI agents to search, create, and modify files in Box."
}, {
  id: "oauth2",
  title: "OAuth2",
  icon: "/ai/docs/img/integrations/oauth2-avatar.png",
  href: "/integrations/oauth2",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to connect with any OAuth2 compliant identity provider or service."
}, {
  id: "oidc",
  title: "OpenID Connect",
  icon: "/ai/docs/img/integrations/oidc-avatar.png",
  href: "/integrations/oidc",
  status: "Available",
  type: "Enterprise",
  description: "Allow your AI agent to connect with any OpenID Connect (OIDC) compliant identity provider."
}, {
  id: "discord",
  title: "Discord",
  icon: "/ai/docs/img/integrations/discord-avatar.png",
  href: "/integrations/discord",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to welcome new members, play music, manage user roles, and integrate with other services to post notifications."
}, {
  id: "figma",
  title: "Figma",
  icon: "/ai/docs/img/integrations/figma-avatar.png",
  href: "/integrations/figma",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to export assets, apply changes to design files programmatically, and comment on prototypes to automate design feedback loops."
}, {
  id: "freshbooks",
  title: "FreshBooks",
  icon: "/ai/docs/img/integrations/fresh-books-avatar.png",
  href: "/integrations/freshbooks",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to create and send invoices, track expenses from receipts, and manage client information."
}, {
  id: "snapchat",
  title: "Snapchat",
  icon: "/ai/docs/img/integrations/snapchat-avatar.png",
  href: "/integrations/snapchat",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to share content (photos, videos, links) directly to a user's Snapchat account."
}, {
  id: "spotify",
  title: "Spotify",
  icon: "/ai/docs/img/integrations/spotify-avatar.png",
  href: "/integrations/spotify",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to discover music, create and modify playlists based on user taste, control playback on devices, and add songs to the user's library."
}, {
  id: "stripe",
  title: "Stripe Connect",
  icon: "/ai/docs/img/integrations/stripe-avatar.png",
  href: "/integrations/stripe-connect",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to act as a platform finance agent that can onboard new sellers, facilitate payments between customers and sellers, manage payouts, and handle marketplace financial operations."
}, {
  id: "tumblr",
  title: "Tumblr",
  icon: "/ai/docs/img/integrations/tumblr-avatar.png",
  href: "/integrations/tumblr",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to create and schedule new posts (text, photo, video), reblog content, and manage a user's blog theme and settings."
}, {
  id: "amazon",
  title: "Amazon",
  icon: "/ai/docs/img/integrations/amazon-avatar.png",
  href: "/integrations/amazon",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent as an Amazon seller to manage inventory, update product listings, and track sales performance. Or, as a consumer, a shopping agent that tracks product prices and availability."
}, {
  id: "basecamp",
  title: "Basecamp",
  icon: "/ai/docs/img/integrations/basecamp-avatar.png",
  href: "/integrations/basecamp",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to manage projects, to-do lists, messages, schedules, and team collaboration in Basecamp."
}, {
  id: "digitalocean",
  title: "DigitalOcean",
  icon: "/ai/docs/img/integrations/digitalocean-avatar.png",
  href: "/integrations/digitalocean",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to provision and manage cloud infrastructure, Droplets, Kubernetes clusters, and automate deployment workflows."
}, {
  id: "salesforce",
  title: "Salesforce",
  icon: "/ai/docs/img/integrations/salesforce-avatar.png",
  href: "/integrations/salesforce",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to access customer records, manage sales opportunities, and automate CRM workflows in Salesforce."
}, {
  id: "twitch",
  title: "Twitch",
  icon: "/ai/docs/img/integrations/twitch-avatar.png",
  href: "/integrations/twitch",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to access Twitch streaming data, manage broadcasts, and integrate with gaming workflows."
}, {
  id: "twitter",
  title: "X (Twitter)",
  icon: "/ai/docs/img/integrations/x-avatar.png",
  href: "/integrations/twitter",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to post tweets, manage followers, and integrate with social media workflows."
}, {
  id: "bitbucket",
  title: "Bitbucket",
  icon: "/ai/docs/img/integrations/bitbucket-avatar.png",
  href: "/integrations/bitbucket",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to manage Bitbucket repositories, track issues, and automate work with code repositories."
}, {
  id: "dropbox",
  title: "Dropbox",
  icon: "/ai/docs/img/integrations/dropbox-avatar.png",
  href: "/integrations/dropbox",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to manage files, share Dropbox content for analysis, and automate document processing."
}, {
  id: "fitbit",
  title: "Fitbit",
  icon: "/ai/docs/img/integrations/fitbit-avatar.png",
  href: "/integrations/fitbit",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to access Fitbit health data, track fitness goals, and manage user profiles."
}, {
  id: "hugging-face",
  title: "Hugging Face",
  icon: "/ai/docs/img/integrations/hugging-face-avatar.png",
  href: "/integrations/hugging-face",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to access Hugging Face model information, manage datasets, and integrate with machine learning workflows."
}, {
  id: "paypal",
  title: "PayPal",
  icon: "/ai/docs/img/integrations/paypal-avatar.png",
  href: "/integrations/paypal",
  status: "Available",
  type: "Social",
  description: "Allow your AI agent to access PayPal transaction information, manage payments, and integrate with financial workflows."
}];

With Auth0 connections, users can log in with a supported social or enterprise external provider and authorize access via Token Vault to share their data with AI agents.

<SearchAndFilterGrid items={integrations} filters={integrationTypes} />

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  **Can't find what you're looking for?**

  You can build a custom connection for any OAuth2-compliant service using our [Custom OAuth2 Connection](/ai/docs/integrations/oauth2) guide, or contact our team to request a new connection.
</Callout>

## Getting Started

Ready to start using connections in your application?

<Columns cols={2}>
  <Card title="Call third-party APIs on the user's behalf" href="/ai/docs/get-started/call-others-apis-on-users-behalf" icon="key" horizontal />
</Columns>