Sign in

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://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, an assessment, 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://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://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://modula.dev/p/<project-id>.js"></script>

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

The bundle is served from a CDN, compressed at the edge. It works in any framework — React, Vue, Svelte, plain HTML — without any build step.

The URL above has no version pinned, so it answers with a short-lived redirect to the current one (?v=3, say) and that versioned URL is what gets cached. Embedding the unpinned URL is the right default: it keeps following your project as you change its component list. Pin a version yourself only if you want an Artifact frozen to exactly the bundle it shipped with.

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 unpinned URL stays the same and starts pointing at the new version within a minute, so an already-published page picks up the change on its own. A URL you pinned yourself keeps serving the bundle it was pinned to.

Download the bundle locally

For offline use — or to keep an Artifact running on your own infrastructure — save the bundle from your account dashboard, where the download buttons save it as components.js (IIFE) or components.mjs (ESM). You can also fetch either project URL directly and commit the file to your own project:

curl -Lo components.js  https://modula.dev/p/<project-id>.js     # IIFE
curl -Lo components.mjs https://modula.dev/p/<project-id>.mjs    # ESM

-L matters: an unpinned URL redirects to the current version.

What’s next