CourseCode Framework

CourseCode Framework

Build LMS courses with Claude Code, Codex, or any AI tool that supports MCP.

CourseCode Framework is open source and runs on your computer. Your AI tool writes the course as regular project files you can inspect, version, and edit. CourseCode's MCP server lets it preview, screenshot, lint, and test what it built. Export SCORM 1.2, SCORM 2004, cmi5, or LTI 1.3.

Start from a topic or from your own PDFs, Word documents, and PowerPoint decks. No coding is required to start, and you have full control of the code when you want it.

View the demo

• View the live CourseCode demo course

CourseCode ecosystem

CourseCode Framework (this repository) is open source and works on its own. CourseCode Cloud is an optional paid hosting service for deploying and delivering courses.

Framework documentation lives at coursecodeframework.com/docs and in framework/docs/.

Features

• Works with your AI tool: Every new project includes MCP settings and workflow skills for Claude Code, Codex, Cursor, and VS Code. Any other MCP client can run coursecode mcp, and an optional plugin is available for Claude Code and Codex
• No coding required to start: Describe what you want and let AI help build slides, interactions, and structure
• Course modernization: Use existing SCORM courses, PowerPoints, PDFs, Word docs, scripts, and SME notes as source material for upgraded courses
• LMS integration: SCORM 1.2, SCORM 2004, and cmi5 packaging, plus an LTI 1.3 browser contract for trusted server-backed launches
• Rich UI components: Images, video, accordions, tabs, and custom sandboxed HTML/JS embeds
• Rich interactions: Multiple choice, drag-drop, fill-in-the-blank, matching, sequencing, and more
• Accessibility: Designed to meet WCAG 2.1 AA, with dark mode, high contrast, and reduced motion
• TTS audio narration: Built-in player with AI text-to-speech generation (Deepgram, ElevenLabs, OpenAI, Google Cloud, or Azure, using your own API key)
• Smart tracking: Engagement requirements, learning objectives, and progress persistence
• Themeable design: CSS custom properties for easy brand customization
• Custom endpoints: Optional webhooks for error reporting and learning record storage
• Live preview: Visual editing, status dashboard, config panels, catalog browser, and full LMS simulation with debug tools

Quick Start

You need Node.js 22.15 or later and an AI tool that can run commands, such as Claude Code, Codex, Cursor, or VS Code with GitHub Copilot. Your AI tool can install Node.js for you.

1. Create an empty folder for your course and start your AI tool in it.

2. Paste this:

   text

   Set up a CourseCode Framework course in this folder. Check that Node.js 22.15 or later is installed and help me install it if it isn't. Then run `npx coursecode@latest create .` and tell me what to do next.

3. When it's done, quit your AI tool and start it again in the same folder so it loads the CourseCode tools. Claude Code asks once to approve the coursecode server; Codex asks you to trust the folder.

4. Describe the course you want.

5. When the course is ready, ask your AI tool to export it for your LMS (SCORM 1.2, SCORM 2004, cmi5, or LTI 1.3), or to deploy it to CourseCode Cloud for hosting, share links, and analytics. Cloud is optional.

The project includes MCP settings for Claude Code, Codex, Cursor, and VS Code, an AGENTS.md with the authoring workflow, and four workflow skills (outline, build slides, review, publish). Nothing else needs installing, and no account is required.

Without an AI tool

npx coursecode@latest create my-coursecd my-coursenpx coursecode preview

Open http://localhost:4173 to view and edit your course. The example course included with every new project is a complete guide to using CourseCode.

Claude Code and Codex plugin (optional)

The plugin runs the CourseCode tools in every folder, so your AI tool can start a course before a project exists. You don't need it, because projects already include the tools and skills. Install it from this repository:

# Claude Codeclaude plugin marketplace add course-code-framework/coursecodeclaude plugin install coursecode@coursecode
# Codexcodex plugin marketplace add course-code-framework/coursecodecodex plugin add coursecode@coursecode

See plugin/README.md. Start with the User Guide for a complete walkthrough.

Requirements

Node.js 22.15 or later. You can run every command through npx coursecode, or install the CLI globally for the shorter coursecode command used in the rest of this guide:

npm install -g coursecode

Learner courses support Chrome 111+, Edge 111+, Firefox 114+, and Safari 16.4+. SCORM compatibility describes LMS communication and packaging; it does not imply Internet Explorer support.

Also recommended:

• A code or text editor, such as VS Code, Cursor, or similar
• An AI coding tool with MCP support, such as Claude Code, Codex, Cursor, or VS Code with GitHub Copilot
• GitHub Desktop for version control

MCP Integration

CourseCode includes a built-in Model Context Protocol (MCP) server. When your AI tool supports MCP, it connects directly to your course project, so you don't have to paste files into a chat.

New projects already include MCP settings for Claude Code (.mcp.json), Codex (.codex/config.toml), Cursor (.cursor/mcp.json), and VS Code (.vscode/mcp.json), plus workflow skills in .claude/skills/ and .agents/skills/. To add them to an existing project, run coursecode agent-setup. Any other MCP client can start the server with:

coursecode mcp

Run from a global install or npx, the server hands off to the project's own CourseCode version.

With MCP, your AI can:

• Preview and screenshot slides to verify layout and design
• Lint its own code and catch errors automatically
• Navigate and test interactions directly
• Browse the component catalog to discover available UI elements
• Read course state including engagement, scoring, and LMS data

See the User Guide for setup instructions.

The Course Directory

All your course content lives in the course/ folder:

my-course/├── course/                     # ← Your content goes here│   ├── course-config.js        # Course structure, format, objectives, settings│   ├── slides/                 # Slide content files│   │   ├── intro.js│   │   ├── content-01.js│   │   └── assessment.js│   ├── assets/                 # Images, audio, video│   │   ├── images/│   │   └── audio/│   └── theme.css               # Brand customization│├── framework/                  # Framework code (don't edit)│   └── docs/                   # Guides and templates

Your Course

Key Documentation

All guides are in framework/docs/:

AI-Driven Authoring Workflow

Four steps to go from source materials to a course ready for your LMS.

Step 1: Convert Your Source Materials

Place existing content (PDFs, Word docs, PowerPoints) in course/references/, then run:

coursecode convert

Converts to markdown in course/references/converted/. Skip this step if starting from scratch.

Step 2: Create Your Course Outline

Ask your AI to create a course outline based on your content.

• With MCP: The AI reads your references and outline template automatically
• Without MCP: Share your converted docs, COURSE_OUTLINE_TEMPLATE.md, and COURSE_OUTLINE_GUIDE.md with your AI

Review and refine the outline before building.

Step 3: Build the Course

Ask your AI to build slides from your approved outline.

• With MCP: The AI reads all docs, lints its code, and screenshots slides to verify
• Without MCP: Share your outline and COURSE_AUTHORING_GUIDE.md with your AI

Step 4: Preview, Iterate, and Export

coursecode preview

The preview server provides:

• Live reload: Changes appear instantly
• Visual editing: Click elements to edit content directly
• Status dashboard: Course health, errors, and build status at a glance
• Config panels: Adjust settings, interactions, and assessments
• Component catalog: Browse available UI elements with live previews
• Debug tools: Inspect LMS state, test interactions, verify tracking

When it's ready, build a package and upload it to your LMS. The ZIP is written to your project folder:

coursecode build                    # cmi5 (default)coursecode build --format scorm1.2  # or scorm2004, lti

Other ways to share it:

• One file, no server: a portable HTML course that recipients open by double-clicking. Progress is saved in that browser only.

  bash

  coursecode export html

• Review site: a static copy of the preview for GitHub Pages, Netlify, or any static host.

  bash

  coursecode preview --export

• Hosted delivery (optional): CourseCode Cloud is a paid hosting service for CourseCode courses. coursecode deploy uploads one build; Cloud then serves it, provides a shareable preview link, and generates any LMS format on demand. See CourseCode Cloud in the user guide.

Core Commands

For the full command list and sharing options, see the User Guide or run coursecode --help.

UI Components

Build engaging slides with interactive elements. Start with AI assistance, then edit the generated files directly whenever you want more control.

Media & Widgets

Slide Templates

Pre-designed layouts for common slide types. Just tell your AI assistant what you need.

Interaction Types

Practice activities that engage learners and check understanding.

All interactions provide immediate feedback and can be required for slide completion.

Tracking & Scoring

Engagement

Require learners to complete activities before advancing:

• View all tabs or accordion panels
• Complete interactions
• Watch video or listen to audio
• Spend minimum time on slide

Gating

Lock slides until conditions are met:

• Pass an assessment
• Achieve a learning objective
• Spend a minimum time on a slide
• Set a custom flag, for example after a branching choice

Assessments

Graded quizzes that determine course completion:

• Randomized question order
• Question banks for variety
• Configurable passing scores
• Retry attempts with remediation
• Scores reported to your LMS

Learning Objectives

Track learner progress against defined goals:

• Automatic: track when slides are visited
• Linked: tie objectives to assessment scores
• Reported: completion status sent to LMS

Learn More

The User Guide covers everything in detail:

• Using the preview and visual editing tools
• All interaction types (multiple choice, drag-drop, matching, and more)
• Assessments and grading
• Audio and video
• Theming and branding
• Navigation and learner flow control
• Exporting and sharing options
• Troubleshooting

License

MIT © Seth Vincent