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

# Integrations Ecosystem

> Explore Contextual AI's integrations catalog

Bring together your AI models, workflows, tools, and data with ease. Contextual AI's integrations empower your RAG agents to operate smarter and share knowledge seamlessly across popular AI solutions.

## Available Integrations

<style jsx>
  {`
    @media (max-width: 640px) {
      .card-desc {
        display: none;
      }
    }
    `}
</style>

<div
  style={{
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gap: "1rem",
padding: "1rem 1rem",
color: "black",
marginBottom: "0",
}}
>
  {[
       {
        title: "Chroma",
        desc: "",
        href: "databases#chroma",
        img: "/images/int-logo-chroma.png",
      },
      { 
        title: "CrewAI",
        desc: "",
        href: "tooling#crewai",
        img: "/images/int-logo-crewai.png",
      },
      {
        title: "Elastic",
        desc: "",
        href: "databases#elastic",
        img: "/images/int-logo-elastic.png",
      },
       {
        title: "Google Model Garden",
        desc: "",
        href: "platforms#google-model-garden",
        img: "/images/int-logo-googlemg.png",
      },
      {
        title: "n8n",
        desc: "",
        href: "platforms#n8n",
        img: "/images/int-logo-n8n.png",
      },
      {
        title: "Ragas",
        desc: "",
        href: "tooling#ragas",
        img: "/images/int-logo-ragas.png",
      },
      { 
        title: "Snowflake",
        desc: "",
        href: "databases#snowflake",
        img: "/images/int-logo-snowflake.png",
      },
      {
        title: "Weaviate",
        desc: "",
        href: "databases#weaviate",
        img: "/images/int-logo-weaviate.png",
      },
    ].map(({ title, href, desc, img }) => (
      <a
        key={title}
        href={href}
        target="_self"
        rel="noopener noreferrer"
        style={{
          textDecoration: "none",
          color: "black",
          border: "1px solid #ddd",
          borderRadius: "8px",
          padding: "10px",
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          transition: "all 0.25s ease-in-out",
          backgroundColor: "white",
          height: "100%",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.1)";
          e.currentTarget.style.transform = "translateY(-4px)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.boxShadow = "none";
          e.currentTarget.style.transform = "translateY(0)";
        }}
      >
        <div style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          marginBottom: "0rem",
        }}>
          <img
            src={img}
            alt={`${title} icon`}
            draggable="false"
            style={{
              width: "100px",
              height: "100px",
              margin: "0",
              pointerEvents: "none"
            }}
          />
        </div>
        <div style={{ flex: "1" }}>
          <h2 style={{
            marginTop: 0,
            marginBottom: "0.5rem",
            fontWeight: "500",
            fontSize: "1rem",
            color: "black",
          }}>
            {title}
          </h2>
          <p className="card-desc" style={{ color: "black", margin: 0 }}>{desc}</p>
        </div>
      </a>
    ))}
</div>