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

# Why ModuleX

> What makes ModuleX different: build with natural language or a visual canvas, collaborate in realtime, bring your own model keys, ground answers in your own knowledge, and connect 175 integrations.

export const MediaEmbed = ({id, type = 'screenshot', caption = '', ext, ratio = '16 / 9'}) => {
  const isVideo = type === 'video' || type === 'app_video';
  const resolvedExt = ext || (isVideo ? 'mp4' : type === 'screenshot' ? 'webp' : 'svg');
  const src = 'https://media.modulex.dev/' + id + '.' + resolvedExt;
  const [status, setStatus] = useState('loading');
  const [isDev, setIsDev] = useState(false);
  const [inView, setInView] = useState(false);
  const boxRef = useRef(null);
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const h = window.location.hostname;
    setIsDev(h === 'localhost' || h === '127.0.0.1' || h.endsWith('.mintlify.app'));
  }, []);
  useEffect(() => {
    if (inView) return;
    if (typeof IntersectionObserver === 'undefined') {
      setInView(true);
      return;
    }
    const el = boxRef.current;
    if (!el) return;
    const io = new IntersectionObserver(entries => {
      if (entries.some(e => e.isIntersecting)) {
        setInView(true);
        io.disconnect();
      }
    }, {
      rootMargin: '300px'
    });
    io.observe(el);
    return () => io.disconnect();
  }, [inView]);
  if (status === 'missing') {
    if (!isDev) return null;
    return <div style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      gap: '0.4rem',
      padding: '1rem 1.25rem',
      margin: '1.25rem 0',
      width: '100%',
      aspectRatio: ratio,
      boxSizing: 'border-box',
      border: '1px dashed rgba(128,128,128,0.45)',
      borderRadius: '0.75rem',
      background: 'rgba(128,128,128,0.06)',
      color: 'currentColor',
      fontSize: '0.85rem',
      lineHeight: 1.45
    }}>
        <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: '0.5rem',
      opacity: 0.75
    }}>
          <span aria-hidden="true">🎬</span>
          <code style={{
      fontSize: '0.75rem'
    }}>{id}</code>
          <span style={{
      fontSize: '0.65rem',
      textTransform: 'uppercase',
      letterSpacing: '0.04em',
      padding: '0.1rem 0.4rem',
      borderRadius: '0.4rem',
      background: 'rgba(128,128,128,0.18)'
    }}>
            {type}
          </span>
        </div>
        <div style={{
      opacity: 0.9
    }}>{caption || 'Media not uploaded yet.'}</div>
        <div style={{
      fontSize: '0.7rem',
      opacity: 0.5
    }}>
          Upload to R2 as <code>{id}.{resolvedExt}</code> — preview only, hidden in production.
        </div>
      </div>;
  }
  const mediaStyle = {
    display: status === 'loaded' ? 'block' : 'none',
    width: '100%',
    height: 'auto',
    borderRadius: '0.75rem'
  };
  const media = isVideo ? <video src={inView ? src : undefined} autoPlay loop muted playsInline preload="metadata" onLoadedData={() => setStatus('loaded')} onError={() => setStatus('missing')} style={mediaStyle} /> : <img src={inView ? src : undefined} alt={caption} onLoad={() => setStatus('loaded')} onError={() => setStatus('missing')} style={mediaStyle} />;
  return <figure style={{
    margin: '1.25rem 0'
  }}>
      <div ref={boxRef} style={status === 'loaded' ? {
    width: '100%'
  } : {
    width: '100%',
    aspectRatio: ratio,
    borderRadius: '0.75rem',
    background: 'rgba(128,128,128,0.06)'
  }}>
        {media}
      </div>
      {status === 'loaded' && caption ? <figcaption style={{
    marginTop: '0.5rem',
    textAlign: 'center',
    fontSize: '0.85rem',
    opacity: 0.7
  }}>
          {caption}
        </figcaption> : null}
    </figure>;
};

ModuleX is an AI workflow orchestration platform. You describe a process in plain English or lay it out on a visual canvas, connect the tools you already use, and run it from chat, the API, or an SDK.

This page covers what sets ModuleX apart. For a step-by-step picture of how the pieces fit together, read [How ModuleX works](/concepts/overview).

<MediaEmbed id="MX-MEDIA-1010" type="image" caption={"A positioning diagram that places ModuleX between hand-rolled LLM glue code and rigid no-code automation tools."} />

## What makes ModuleX different

<CardGroup cols={2}>
  <Card title="Two ways to build" icon="pen-line" href="/concepts/ai-composer">
    Describe the workflow to the AI Composer in plain English, or build it node by node on the visual canvas. Both produce the same editable workflow graph.
  </Card>

  <Card title="Realtime collaboration" icon="users" href="/concepts/realtime-model">
    Your team works on the same canvas at once, with live cursors, presence, and node locks so two people never overwrite each other.
  </Card>

  <Card title="Bring your own keys" icon="key" href="/integrations/llm-providers/overview">
    Connect your own model and provider accounts. Providers bill you directly, with no ModuleX markup, or use ModuleX-managed models and pay in credits.
  </Card>

  <Card title="Your own knowledge" icon="book-open" href="/concepts/knowledge-rag">
    Ground answers in your company's documents. ModuleX retrieves the relevant context automatically inside chats and workflows.
  </Card>

  <Card title="175 integrations" icon="plug" href="/integrations/catalog">
    Call the services you already use from any workflow or agent. The integration registry is open source, so you can read and extend it.
  </Card>

  <Card title="Developer-grade SDKs" icon="code" href="/sdks/overview">
    Official JavaScript and Python SDKs put every workflow, run, and stream behind a typed client you can embed in your own product.
  </Card>
</CardGroup>

## The problem ModuleX solves

If you have built with AI before, you have probably stitched together model APIs, vendor SDKs, and automation tools by hand, then written your own glue to make them run in order, retry on failure, and stream results.

No-code automation tools remove the glue, but they tend to lock you into fixed templates, a single model, and no escape hatch when you need real code.

ModuleX sits between the two. You get a visual canvas and natural-language building for the parts that should be fast, plus an API, SDKs, and a code-capable node set for the parts that need control.

## Build the way that suits the task

You do not have to pick one building style for everything.

<Steps>
  <Step title="Describe it">
    Tell the [AI Composer](/concepts/ai-composer) what you want in plain English. It lays out the steps, tools, and logic as an editable workflow graph.
  </Step>

  <Step title="Refine it on the canvas">
    Open the [workflow builder](/workflow-builder/overview) and adjust any node directly. Composer edits and manual edits change the same graph.
  </Step>

  <Step title="Run it anywhere">
    Run the finished workflow from [chat](/platform/chat/workflow-run), the [REST API](/workflow-builder/execution/api-endpoint), or an [SDK](/sdks/overview), and stream the result live.
  </Step>
</Steps>

There is also an [Assistant](/concepts/assistant): an agentic chat that uses your connected tools step by step to get work done, with no workflow to set up first.

## Work together, live

Workflows are rarely a solo effort. In ModuleX, several people can edit the same canvas at the same time.

<CardGroup cols={3}>
  <Card title="Live presence" icon="user-check">
    See who else is on the canvas and where their cursor is, in realtime.
  </Card>

  <Card title="Node locks" icon="lock">
    When a teammate is editing a node, it locks so your changes never collide.
  </Card>

  <Card title="Shared history" icon="clock-rotate-left">
    Edits are versioned, so the team can see what changed and roll back when needed.
  </Card>
</CardGroup>

For how the canvas stays in sync across collaborators, see the [realtime and collaboration model](/concepts/realtime-model).

<MediaEmbed id="MX-MEDIA-1011" type="app_video" caption={"Two people co-editing the same workflow canvas in realtime."} />

## Your models, your keys

ModuleX works with every major AI provider, including Anthropic, OpenAI, Google, and xAI. You choose how usage is billed.

<CardGroup cols={2}>
  <Card title="Bring your own keys (BYOK)" icon="key" href="/integrations/llm-providers/overview">
    Connect your own provider accounts. The provider bills you directly with no ModuleX markup, so you keep full cost transparency.
  </Card>

  <Card title="ModuleX-managed models" icon="sparkles" href="/integrations/llm-providers/modulexai">
    Skip the setup and use ModuleX-provisioned providers. Managed usage is metered in [credits](/billing/credits).
  </Card>
</CardGroup>

## Answers grounded in your knowledge

Connect your company's documents as knowledge bases, and ModuleX retrieves the relevant context for you, inside both chats and workflows. You can use ModuleX-managed vector storage, billed in credits, or bring your own vector store.

<CardGroup cols={2}>
  <Card title="Managed knowledge" icon="database" href="/integrations/knowledge-providers/modulexdb">
    Let ModuleX host the vector storage and retrieval. Ingest and retrieval are billed in credits.
  </Card>

  <Card title="Bring your own store" icon="server" href="/integrations/knowledge-providers/overview">
    Point ModuleX at your own Qdrant, Pinecone, MongoDB Atlas, or Weaviate.
  </Card>
</CardGroup>

Read more in [Knowledge & RAG](/concepts/knowledge-rag).

## Connect the tools you already use

ModuleX ships with 175 integrations you can call from any workflow or agent. The integration registry is open source, so you can read how each connector works and add your own.

<Card title="Browse the integration catalog" icon="grid-2" href="/integrations/catalog">
  See all 175 integrations grouped by category, from source control and messaging to CRMs and databases.
</Card>

## Pay only for managed usage

ModuleX meters managed usage in credits. When you bring your own keys, that usage is not credited, so your provider bill stays your provider bill.

<Accordion title="What counts as managed usage?">
  Running a workflow or an agent turn, ingesting and retrieving from a ModuleX-managed knowledge base, and calling ModuleX-managed models all consume credits. BYOK model usage is billed by your provider, not by ModuleX. See [Credits & metering](/billing/credits) for the full breakdown.
</Accordion>

<Accordion title="How do I avoid surprise bills?">
  Each plan includes a monthly credit allowance. Paid plans can spend beyond it from a prepaid wallet only if you turn on overage. If you bring your own keys, model usage runs on your provider account at provider rates. See [Billing & credits overview](/billing/overview).
</Accordion>

## Built for teams and enterprises

As your team grows, ModuleX adds the controls larger organizations need: organization roles, access control, and audit-ready usage tracking.

<Card title="ModuleX for enterprise" icon="building" href="/security/enterprise">
  Single sign-on, role-based permissions, and the security posture larger teams require.
</Card>

## Where to go next

<CardGroup cols={2}>
  <Card title="How ModuleX works" icon="route" href="/concepts/overview">
    The end-to-end mental model, from a prompt or canvas to a running, observable workflow.
  </Card>

  <Card title="Quickstart" icon="rocket" href="/get-started/quickstart">
    Create an account, get an API key, and make your first authenticated call.
  </Card>

  <Card title="Run your first workflow" icon="play" href="/get-started/first-workflow">
    Build a workflow in the canvas or with the Composer, then run it from the app.
  </Card>

  <Card title="Core concepts at a glance" icon="list-checks" href="/get-started/core-concepts">
    The handful of ideas you need: workflows, runs, nodes, Composer, Assistant, knowledge, and credits.
  </Card>
</CardGroup>