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

# Tour the ModuleX app

> A guided tour of the ModuleX web app — where chat, the workflow builder, knowledge, integrations, and settings live, and how to move between them.

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>;
};

The ModuleX app is one place to do five things: **chat** with the AI Assistant, **build** workflows on a visual canvas, manage your **knowledge**, connect **integrations**, and handle account and team **settings**. This page is the map — what each area is for, where to find it, and where to go next.

When you sign in you land on a fresh chat. From there, a left sidebar takes you to every other area, and a header at the top handles your organization, notifications, and account. You never leave the app to move between these surfaces.

<MediaEmbed id="MX-MEDIA-3300" type="app_video" caption={"A 60-second product tour of the ModuleX web app, moving through chat, the builder, knowledge, integrations, and settings."} />

## The five areas at a glance

<CardGroup cols={2}>
  <Card title="Chat" icon="messages-square" href="#chat">
    Talk to the Assistant, run a workflow, or ask questions of your knowledge.
  </Card>

  <Card title="Workflow builder" icon="layout-dashboard" href="#workflow-builder">
    Assemble workflows step by step on a visual canvas, or let the AI Composer draft them.
  </Card>

  <Card title="Knowledge" icon="book-open" href="#knowledge">
    Upload documents into knowledge bases that power retrieval across chat and workflows.
  </Card>

  <Card title="Integrations" icon="plug" href="#integrations">
    Connect external services and call their tools from workflows and the Assistant.
  </Card>

  <Card title="Settings" icon="settings" href="#settings">
    Your organization, members, credentials, billing, API keys, and activity logs.
  </Card>

  <Card title="Header & sidebar" icon="panel-left" href="#getting-around">
    Switch organizations, check notifications, and reach your account from anywhere.
  </Card>
</CardGroup>

<MediaEmbed id="MX-MEDIA-3301" type="screenshot" caption={"The ModuleX app home with its main regions labelled."} />

## Getting around

Two pieces of chrome are always with you: the **left sidebar** and the **header**.

The **sidebar** is your main navigation — it links to chat, the workflow builder, knowledge, integrations, and settings. The **header** holds the controls that apply across the whole app:

* **Organization switcher.** Everything you do in ModuleX happens inside an **organization** — your team and billing unit. The switcher in the header tells you which organization is active, and lets you move between the ones you belong to. Switching changes the chats, workflows, knowledge, credentials, and billing you see, because all of it is scoped to the active organization. See [Organizations, roles & membership](/concepts/organizations-roles).
* **Notifications.** A notifications inbox surfaces invitations and other alerts. Invitations to join another organization open right here so you can accept them.
* **Your account.** Account and theme controls (light, dark, or system) live in the header too.

<Note>
  ModuleX organizations have two roles: **owner** and **admin**. Some areas — creating workflows with the [AI Composer](/concepts/ai-composer), using the [Assistant](/concepts/assistant), and managing knowledge — require owner or admin. For the full role model, see [Roles & permissions](/security/roles-permissions).
</Note>

## Chat

<Card title="Open chat" icon="messages-square" href="/platform/chat/overview">
  The chat surface — your conversation with the Assistant.
</Card>

Chat is the app's front door: it is where you land when you sign in, and it is where you talk to the **Assistant**. The Assistant is an agentic chat that can search your connected tools, draft outputs, and pause to ask for approval before doing something sensitive — no workflow required.

Past conversations live in a history panel beside the chat, so you can pick up where you left off or start a new one at any time.

Chat does more than answer questions. From a single conversation you can:

<CardGroup cols={2}>
  <Card title="Pick a model" icon="cpu" href="/platform/chat/model-selection">
    Choose which language model answers, including ModuleX-managed models or your own.
  </Card>

  <Card title="Run a workflow" icon="play" href="/platform/chat/workflow-run">
    Trigger one of your workflows and watch it run inside the chat.
  </Card>

  <Card title="Chat with your knowledge" icon="book-open" href="/platform/chat/knowledge-chat">
    Get answers grounded in your connected knowledge bases.
  </Card>

  <Card title="Send a voice message" icon="mic" href="/platform/chat/voice-message">
    Speak your input instead of typing it.
  </Card>

  <Card title="History & folders" icon="folder" href="/platform/chat/history-folders">
    Keep conversations organized as they grow.
  </Card>

  <Card title="Private & org chat" icon="users" href="/platform/chat/private-org-chat">
    Decide whether a chat is just yours or visible to your team.
  </Card>
</CardGroup>

For a walkthrough of the whole chat surface, start at [Chat overview](/platform/chat/overview). To understand the Assistant behind it, see [Assistant overview](/assistant/overview).

## Workflow builder

<Card title="Open the workflow builder" icon="layout-dashboard" href="/workflow-builder/overview">
  The visual canvas where you assemble and run workflows.
</Card>

The **workflow builder** is the canvas where you build automations step by step. Each step is a **node** you drag in, connect, and configure; the lines between nodes are **edges** that set the order they run in. ModuleX has nine node types — for calling a model, running a tool, retrieving from your knowledge, branching on a condition, and more.

You do not have to place every node by hand. The **AI Composer** is a copilot inside the builder: describe the workflow you want in plain English and it drafts the graph for you, right on the canvas, while you watch it build.

The builder is also **multiplayer**. When teammates open the same workflow, you see their cursors and presence, and edits appear for everyone live. And you can run a workflow without leaving the builder — press **Run** and each step lights up from pending to running to completed as it executes.

<CardGroup cols={2}>
  <Card title="Builder overview" icon="compass" href="/workflow-builder/overview">
    The canvas, nodes and edges, the Composer copilot, and running a workflow live.
  </Card>

  <Card title="Build with the AI Composer" icon="sparkles" href="/concepts/ai-composer">
    Turn a plain-English description into an editable workflow graph.
  </Card>

  <Card title="Run your first workflow" icon="rocket" href="/get-started/first-workflow">
    Go from an empty canvas to a finished run.
  </Card>

  <Card title="Work together in realtime" icon="users" href="/platform/collaboration/canvas">
    Co-edit the same canvas with your team, live.
  </Card>
</CardGroup>

<Note>
  Running a workflow, retrieving from managed knowledge, and using the Composer all consume **managed usage**, which is metered in credits. If your plan's allowance is used up, ModuleX stops the work before it starts and tells you why — you are not charged for something that did not run. See [Credits & the billing model](/concepts/credits-billing).
</Note>

## Knowledge

<Card title="Open knowledge" icon="book-open" href="/platform/knowledge/overview">
  Manage the knowledge bases that ground answers in your own content.
</Card>

**Knowledge** is where you give ModuleX your own documents to draw on. You group documents into **knowledge bases**, and ModuleX uses them to ground answers — in chat, in a workflow's [knowledge node](/workflow-builder/nodes/knowledge), or anywhere retrieval is needed. This is what lets the app answer from *your* content, not just the model's general training.

You can let ModuleX host and index your documents for you (managed knowledge), or bring your own vector store. From the knowledge area you upload documents, watch them get processed, and manage what is in each knowledge base.

<CardGroup cols={2}>
  <Card title="Knowledge overview" icon="library" href="/platform/knowledge/overview">
    What knowledge bases are and how they power retrieval.
  </Card>

  <Card title="Managing documents" icon="file-text" href="/platform/knowledge/documents">
    Upload documents, monitor processing, and manage what is indexed.
  </Card>

  <Card title="Managed knowledge" icon="database" href="/platform/knowledge/managed">
    Let ModuleX host and search your documents, billed in credits.
  </Card>

  <Card title="Chat with your knowledge" icon="message-circle" href="/platform/chat/knowledge-chat">
    Ask questions answered from your connected knowledge bases.
  </Card>
</CardGroup>

For the idea behind it all, see [Knowledge & RAG](/concepts/knowledge-rag).

## Integrations

<Card title="Open integrations" icon="plug" href="/integrations/overview">
  Connect external services and use their tools across ModuleX.
</Card>

**Integrations** connect ModuleX to the services you already use, so workflows and the Assistant can act in those services on your behalf — post to Slack, add a row to a sheet, open an issue, and so on. Each integration exposes one or more **tools**, the individual actions ModuleX can call.

From the integrations area you **browse** the catalog of available services and connect the ones you need. Connecting a service stores a **credential** — an encrypted record that lets ModuleX authenticate to it. Some services connect with an API key, others with a one-click OAuth flow. Once connected, the integration's tools are available to your [tool nodes](/workflow-builder/nodes/tool) and to the Assistant.

<CardGroup cols={2}>
  <Card title="Integrations overview" icon="grid-3x3" href="/integrations/overview">
    How integrations work and how to connect one.
  </Card>

  <Card title="Browse the catalog" icon="search" href="/integrations/catalog">
    The full catalog of 175+ connectable services.
  </Card>

  <Card title="Authentication & credentials" icon="key-round" href="/integrations/authentication">
    API keys, OAuth, and how connecting a service works.
  </Card>

  <Card title="Manage credentials" icon="shield" href="/integrations/managing-credentials">
    Create, rotate, and scope the credentials you have connected.
  </Card>
</CardGroup>

## Settings

<Card title="Open settings" icon="settings" href="/concepts/organizations-roles">
  Your organization, members, credentials, billing, and activity.
</Card>

**Settings** is where you manage your organization and account. The settings area is scoped to whichever organization is active in the header, and it gathers everything administrative in one place.

| Settings area             | What you do there                                                                                                            |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Browse / integrations** | Find and connect new [integrations](/integrations/overview).                                                                 |
| **Credentials**           | View, add, and remove the [credentials](/integrations/managing-credentials) connected to your organization.                  |
| **Knowledge**             | Manage [knowledge bases](/platform/knowledge/overview) and their documents.                                                  |
| **Billing**               | Your plan, [credits](/concepts/credits-billing), wallet, and checkout — see [Billing & credits overview](/billing/overview). |
| **Analytics**             | Usage analytics for your organization.                                                                                       |
| **Logs**                  | An activity and audit log of what has happened in the organization.                                                          |
| **Members**               | Your team, their roles, and invitations to add people — see [Roles & permissions](/security/roles-permissions).              |

Two account-level controls sit alongside settings rather than inside the organization tree:

* **API keys.** Create and manage your personal `mx_live_*` keys to call ModuleX from code. Treat a key like a password — you see its full value only once, when you create it. Start at the [Quickstart](/get-started/quickstart) to make your first authenticated call.
* **Notifications.** Your inbox for invitations and alerts, reachable from the header on any screen.

<Note>
  Inviting members, changing billing, and other administrative actions are limited to **owner** and **admin** roles. If an action is unavailable to you, it is likely a permission your role does not have — see [Roles & permissions](/security/roles-permissions).
</Note>

## Where to go next

Now that you know where everything lives, pick a starting point.

<CardGroup cols={2}>
  <Card title="Chat overview" icon="messages-square" href="/platform/chat/overview">
    Get the most out of the Assistant and the chat surface.
  </Card>

  <Card title="Workflow builder overview" icon="layout-dashboard" href="/workflow-builder/overview">
    Build and run your first workflow on the canvas.
  </Card>

  <Card title="Run your first workflow" icon="rocket" href="/get-started/first-workflow">
    A guided first build, from empty canvas to finished run.
  </Card>

  <Card title="How ModuleX works" icon="compass" href="/concepts/overview">
    The mental model behind the whole app.
  </Card>
</CardGroup>