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

# Maia Documentation

export const VideoCarousel = ({videos = []}) => {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [playing, setPlaying] = React.useState(false);
  if (!videos || videos.length === 0) return null;
  const current = videos[activeIndex];
  const selectVideo = index => {
    if (index === activeIndex) {
      setPlaying(true);
    } else {
      setActiveIndex(index);
      setPlaying(false);
    }
  };
  const prev = () => {
    setActiveIndex(i => (i - 1 + videos.length) % videos.length);
    setPlaying(false);
  };
  const next = () => {
    setActiveIndex(i => (i + 1) % videos.length);
    setPlaying(false);
  };
  const navBtn = {
    width: '36px',
    height: '36px',
    borderRadius: '50%',
    border: '1px solid var(--colors-border-default, #e5e7eb)',
    background: 'var(--colors-background-light, #f9fafb)',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
    color: 'var(--colors-text-default, #111)'
  };
  return <div style={{
    maxWidth: '70%',
    margin: '0 auto 32px'
  }}>

      {}
      <div style={{
    position: 'relative',
    width: '100%',
    paddingBottom: '56.25%',
    borderRadius: '14px',
    overflow: 'hidden',
    background: '#000',
    marginBottom: '14px',
    boxShadow: '0 4px 24px rgba(0,0,0,0.18)'
  }}>
        {playing ? <iframe src={`https://www.youtube.com/embed/${current.id}?autoplay=1&rel=0&enablejsapi=1`} style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    border: 'none'
  }} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen /> : <div onClick={() => setPlaying(true)} style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    cursor: 'pointer'
  }}>
            {}
            <img src={`https://img.youtube.com/vi/${current.id}/maxresdefault.jpg`} style={{
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block'
  }} alt={current.title || ''} onError={e => {
    e.target.src = `https://img.youtube.com/vi/${current.id}/hqdefault.jpg`;
  }} />

            {}
            <div style={{
    position: 'absolute',
    inset: 0,
    background: 'linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 50%, transparent 100%)'
  }} />

            {}
            <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '68px',
    height: '68px',
    background: '#001f1d',
    borderRadius: '50%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '0 2px 16px rgba(0,0,0,0.4)'
  }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="white">
                <path d="M8 5v14l11-7z" />
              </svg>
            </div>

            {}
            {current.title && <div style={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    padding: '40px 20px 18px',
    color: 'white',
    fontWeight: '600',
    fontSize: '1.05rem',
    lineHeight: '1.4'
  }}>
                {current.title}
              </div>}

            {}
            {videos.length > 1 && <div style={{
    position: 'absolute',
    top: '14px',
    right: '16px',
    display: 'flex',
    gap: '6px'
  }}>
                {videos.map((_, i) => <div key={i} style={{
    width: i === activeIndex ? '20px' : '6px',
    height: '6px',
    borderRadius: '9999px',
    background: i === activeIndex ? '#fff' : 'rgba(255,255,255,0.45)',
    transition: 'width 0.25s, background 0.25s'
  }} />)}
              </div>}
          </div>}
      </div>

      {}
      {videos.length > 1 && <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '10px'
  }}>

          <button onClick={prev} style={navBtn} aria-label="Previous video">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z" />
            </svg>
          </button>

          <div style={{
    display: 'flex',
    gap: '8px',
    flex: 1,
    overflow: 'hidden'
  }}>
            {videos.map((video, i) => <div key={i} onClick={() => selectVideo(i)} style={{
    flex: '1 1 0',
    minWidth: 0,
    position: 'relative',
    paddingBottom: `${1 / videos.length * 56.25}%`,
    borderRadius: '8px',
    overflow: 'hidden',
    cursor: 'pointer',
    outline: i === activeIndex ? '2.5px solid #001f1d' : '2.5px solid transparent',
    outlineOffset: '2px',
    opacity: i === activeIndex ? 1 : 0.55,
    transition: 'opacity 0.2s, outline-color 0.2s'
  }}>
                <img src={`https://img.youtube.com/vi/${video.id}/mqdefault.jpg`} style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block',
    pointerEvents: 'none'
  }} alt={video.title || ''} />
              </div>)}
          </div>

          <button onClick={next} style={navBtn} aria-label="Next video">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z" />
            </svg>
          </button>

        </div>}

    </div>;
};

export const designer = "Designer";

export const maia = "Maia";

<div className="relative w-full flex items-center justify-center h-[26rem] overflow-hidden rounded-b-[3rem]">
  <div className="absolute text-center px-4">
    <div className="text-7xl font-bold w-full lg:mt-12 mt-24 bg-gradient-to-r dark:from-[#148F89] from-[#01352d] dark:via-[#14cc71] via-[#09613a] dark:to-[#148F89] to-[#01352d] bg-clip-text text-transparent">
      Maia Docs
    </div>

    <p className="text-2xl font-medium max-w-[40rem] mx-auto mt-2">
      Maia is the AI Data Automation platform by Matillion.

      <br />

      <br />

      Level up your product knowledge with our how-to guides, reference material, API docs, and tutorials.
    </p>

    <div className="hidden w-full lg:flex items-center text-sm leading-6 py-4 pl-4 pr-4 rounded-full mt-8 max-w-[40rem] border-2 dark:border-[#10ac5f] border-[#10ac5f] bg-white shadow-[0px_1px_4px_0px_rgba(8,9,10,0.25),0px_0px_0px_4px_rgba(255,255,255,0.20)]">
      <Icon icon="magnifying-glass" color="#10ac5f" />

      <input
        type="text"
        id="home-search-entry"
        placeholder="Ask a question about Maia..."
        className="ml-4 w-full bg-transparent outline-none text-gray-500 placeholder-gray-400"
        onKeyDown={(e) => {
      if (e.key === 'Enter' && e.target.value.trim()) {
        window.Kapa.open({ query: e.target.value.trim(), submit: true });
        e.target.value = '';
      }
    }}
      />
    </div>
  </div>
</div>

<div className="max-w-7xl mx-auto px-5 sm:px-10 mt-16 mb-20">
  <div className="mb-16">
    <div className="mb-6">
      <h2 className="text-3xl font-bold mb-2 text-[#002e2b] dark:text-[#148F89]">Build with Maia</h2>

      <p className="text-lg text-gray-600 dark:text-gray-400">
        Use natural language to build, configure, and run data pipelines with your agentic AI data team.
      </p>
    </div>

    <Columns cols={2}>
      <Card icon="wand-magic-sparkles" title="Build pipelines" href="docs/guides/maia-pipelines" horizontal>
        Describe your data objective and Maia builds the pipeline—orchestration, transformation, and execution, all from the chat panel.
      </Card>

      <Card icon="list-check" title="Use SKILL.MD files" href="docs/guides/maia-skills" horizontal>
        Create reusable instruction sets that Maia activates when relevant, so you define your standards once and apply them everywhere.
      </Card>

      <Card icon="file-lines" title="Define rules in context files" href="docs/guides/maia-context-files" horizontal>
        Embed business rules, naming conventions, and project context so every Maia interaction applies your standards automatically.
      </Card>

      <Card icon="plug" title="Create custom connectors" href="docs/guides/create-a-custom-connector-with-maia" horizontal>
        Point Maia at any API documentation page and it generates a working custom connector, handling authentication automatically.
      </Card>
    </Columns>
  </div>

  <div className="mb-16">
    <div className="mb-6">
      <h2 className="text-3xl font-bold mb-2 text-[#002e2b] dark:text-[#148F89]">Connectors</h2>

      <p className="text-lg text-gray-600 dark:text-gray-400">
        Load data from your most important sources directly into your cloud data platform.
      </p>
    </div>

    <Columns cols={2}>
      <Card icon="cloud-arrow-down" title="Salesforce" href="docs/components/salesforce-load" horizontal>
        Load Salesforce data into Snowflake—tables created and managed automatically.
      </Card>

      <Card icon="bolt" title="Kafka" href="docs/components/kafka" horizontal>
        Stream data from Kafka topics into Snowflake, Databricks, or Amazon Redshift as JSON or schema objects.
      </Card>

      <Card icon="chart-line" title="Anaplan" href="docs/components/anaplan" horizontal>
        Query the Anaplan Bulk API and land your export data into your preferred cloud data platform.
      </Card>

      <Card icon="briefcase" title="Workday" href="docs/components/workday-load" horizontal>
        Load HR and workforce data from Workday into Snowflake, with full and incremental loading support.
      </Card>
    </Columns>
  </div>

  <div className="mb-16">
    <div className="mb-6">
      <h2 className="text-3xl font-bold mb-2 text-[#002e2b] dark:text-[#148F89]">Transformation components</h2>

      <p className="text-lg text-gray-600 dark:text-gray-400">
        Shape, clean, and prepare your data with drag-and-drop transformation components.
      </p>
    </div>

    <Columns cols={2}>
      <Card icon="layer-group" title="Aggregate" href="docs/components/aggregate" horizontal>
        Group and summarize rows into a single output—totals, averages, min/max—without writing SQL.
      </Card>

      <Card icon="calculator" title="Calculator" href="docs/components/calculator" horizontal>
        Add calculated columns using expressions, from simple arithmetic to complex business logic.
      </Card>

      <Card icon="code-compare" title="Detect Changes" href="docs/components/detect-changes" horizontal>
        Compare two datasets and tag each row as inserted, deleted, changed, or unchanged.
      </Card>

      <Card icon="table-columns" title="Pivot" href="docs/components/pivot" horizontal>
        Turn rows into columns to restructure and aggregate your data across categories—equivalent to SQL PIVOT.
      </Card>
    </Columns>
  </div>

  <div>
    <div className="mb-6">
      <h2 className="text-3xl font-bold mb-2 text-[#002e2b] dark:text-[#148F89]">API</h2>

      <p className="text-lg text-gray-600 dark:text-gray-400">
        Automate and integrate with Maia programmatically using the REST API.
      </p>
    </div>

    <Columns cols={2}>
      <Card icon="folder-plus" title="Create a new project" href="api-reference/projects/create-a-new-project" horizontal>
        Provision a complete, functional project using modular API endpoints—no manual setup required.
      </Card>

      <Card icon="clock" title="Create a schedule" href="api-reference/schedules/create-a-new-schedule" horizontal>
        Automate pipeline execution by scheduling artifacts with flexible version targeting.
      </Card>

      <Card icon="play" title="Execute a published pipeline" href="api-reference/pipeline-execution/execute-published-pipeline" horizontal>
        Execute, monitor, and terminate published pipelines via the API.
      </Card>

      <Card icon="circle-check" title="Review pipeline quality" href="api-reference/pipeline-quality-review/review-pipeline-quality" horizontal>
        Programmatically validate pipelines against your configured quality rules.
      </Card>
    </Columns>
  </div>

  <div className="mt-20 mb-6">
    <h2 className="text-3xl font-bold mb-2 text-[#002e2b] dark:text-[#148F89]">Learn from our YouTube channel</h2>

    <p className="text-lg text-gray-600 dark:text-gray-400">
      Watch tutorials, walkthroughs, and best practice guides to level up your Maia usage.
    </p>
  </div>

  <div className="pr-11 sm:pr-0">
    <VideoCarousel
      videos={[
  { id: "rjl6C7YKGfc" },
  { id: "W7HHFcQdKQ4" },
  { id: "aHriHdoltUM" },
  { id: "gFsLuPAJgfM" },
  { id: "n6h5DRjjS_4" }
]}
    />
  </div>
</div>