Get started

Get started

You have an account. This guide walks you through the two ways to use Modula: the guided path using schemas, and the advanced path where you assemble components directly.

Both paths start the same way: connecting the Modula MCP server to your AI.

Connect the MCP server

Modula works as an MCP server your AI connects to. Once connected, the AI can browse the component library, fetch documentation, create projects, and return a ready-to-embed URL — without you writing any code.

The MCP endpoint is:

https://mcp.modula.dev/mcp

Choose your AI client and follow the setup guide:

The first time your AI calls a Modula tool it opens a browser window to complete the OAuth login. After that the connection is automatic for subsequent sessions.

Path 1 — Guided: create an artifact with a schema

A schema is a curated set of instructions that tells the AI how to structure a specific type of content — a lesson, a training module, a geostory. You don’t have to think about which components to pick or how to assemble them: the schema encodes all of that.

How it works

  1. Start a chat with your AI (Claude, ChatGPT, or any connected client).

  2. Invoke a schema by name and describe what you want to create:

    Create an interactive lesson on the water cycle for middle school students. Include a short introduction, a diagram section, and a 5-question quiz at the end.

  3. The AI takes over. It calls create_lesson_instructions (or the relevant schema tool) to receive the full workflow, then assembles the components into a Modula project. You’ll see it call tools like create_project and select_components in the background.

  4. You receive a stable URL — something like https://mcp.modula.dev/p/your-project-id.js. Embed it anywhere: an <iframe>, a <script> tag in your CMS, or a SCORM export.

  5. Iterate in the same chat. Ask the AI to change the quiz, reorder sections, or adjust the language level. The URL stays the same while the content updates.

Available schemas

SchemaPlanWhat it produces
LessonInteractive lesson with text, media, and a quiz
PresentationProSlide-based presentation with interactive elements
DocumentaryProLong-form scroll-driven narrative
GeostoryProMap-driven story with location-based chapters
AssessmentProStandalone quiz or evaluation module

Path 2 — Advanced: build component by component

If you need precise control over which components appear and how they’re combined, you can drive the process yourself — component by component. This is useful for developers integrating Modula into an existing codebase, or for anyone building something that doesn’t map to a predefined schema.

How it works

1. Discover available components

Ask your AI to list the components in your licence:

List the Modula components available to me.

The AI calls list_components and returns a structured list with names and descriptions. You can filter by keyword:

List Modula components related to quizzes and exercises.

2. Read the documentation for a component

Before using a component, ask the AI to fetch its full documentation:

Get the documentation for Assignment.

The AI calls get_component_docs and returns the complete Custom Elements Manifest: attributes, slots, events, and usage examples. Use this to understand exactly what the component can do and how to configure it.

3. Create a project and select your components

Once you know which components you need:

Create a Modula project called “Water Cycle Lesson” and include the components Media Player, Assignment, and Progress.

The AI calls create_project to generate a project ID, then select_components to attach your chosen components. It returns a stable CDN URL:

https://mcp.modula.dev/p/<project-id>.js

This URL serves a self-contained JavaScript bundle that registers all your selected components as Custom Elements.

4. Embed the bundle

Add the script to any HTML page:

<script type="module" src="https://mcp.modula.dev/p/<project-id>.js"></script>

<dna-assignment>
  <!-- your content here -->
</dna-assignment>

The bundle is cached on a CDN and delivered via brotli compression. It works in any framework — React, Vue, Svelte, plain HTML — without any build step.

5. Update the component list

You can update the project at any time:

Add a Timeline to my project.

The AI calls select_components again with the updated list. The URL remains the same; the next request to it will serve the updated bundle.

Download the bundle locally

For SCORM exports or offline use, download the full bundle as a tar archive from your account dashboard or via the API:

GET https://mcp.modula.dev/p/<project-id>.tar

The archive includes the JavaScript bundle, TypeScript declarations (ESM format), and a modula.json manifest with the component list and version info.

What’s next