Open Lab Components

MCP

Read-only MCP server support is available in mcp-server/ for AI clients that need to search and fetch components from this library over stdio.

See docs/MCP.md for the exposed tools, local startup, and client configuration.

210+ 零依赖、即插即用的 STEM 教育交互组件库，覆盖物理、化学、生物、数学、科学五大学科。

English | 中文

✨ 特性

• 🎯 纯 HTML Fragment — 不依赖任何框架，复制即用
• 🎨 CSS 变量驱动 — 所有参数通过 CSS 变量配置
• 🔒 样式隔离 — 不污染宿主环境
• 🛠️ TypeScript 支持 — 完整类型定义
• ♿ 无障碍 — 内置 ARIA 标签

📦 组件概览

210 个组件，44 个分类：

学科	分类	示例
物理	电路、力学、光学、热学、波动、电磁、流体	抛体运动、透镜成像、示波器、卡诺循环
化学	器皿、反应、气体、溶液、分子模型	酸碱中和、理想气体定律、元素周期表
生物	细胞、器官、遗传、生态	有丝分裂、DNA 结构、循环系统
数学	几何、函数、微积分、统计、向量	函数图像、单位圆、算盘、分数圆
科学	地球科学、生命科学、科学工具	太阳系、水循环、显微镜

在线展示站 — 浏览全部组件、实时调参、复制代码

🚀 快速开始

npm 安装

npm install @itkdm/open-lab-components

const lab = require('@itkdm/open-lab-components');

const all = lab.list();                                    // 全部 210 个组件
const physics = lab.list({ category: 'physics/mechanics' }); // 按分类筛选
const html = lab.readSync('phy.mechanics.projectile.interactive'); // 读取 HTML

直接使用 HTML

从 components/ 目录复制组件文件，粘贴到你的页面中，通过 CSS 变量配置参数：

<div class="cmp" data-cmp-id="phy.resistor.axial.basic"
     style="--cmp-size: 80px; --cmp-body: #caa070;">
    <!-- 组件内容 -->
</div>

本地开发

git clone https://github.com/itkdm/open-lab-components.git
cd open-lab-components && npm install
npm run dev:site      # 启动开发服务器
npm run validate      # 验证组件规范
npm run build         # 构建全部

🤝 参与贡献

欢迎提交 PR！流程：Fork → 创建分支 → 提交 → PR

详见 贡献指南 · 组件规范 · 分类规则 · 事件协议

📄 许可证

MIT

☕ 赞助 & 联系

这个项目由一名大三学生独立开发维护。如果对你有帮助，欢迎请我喝杯咖啡 :)

微信

支付宝

微信：17884902310（备注 OLC） · GitHub：@itkdm

🙏 致谢

• @PastW1nd

---

Made by 布吉岛 · ⭐ 觉得有用就给个 Star

Localization

Open Lab Components now ships locale-aware metadata across the component registry, site, MCP server, and JS API.

• Default locale: zh-CN
• Current locales: zh-CN, en
• Raw multi-locale registry: registry/registry.json
• Localized registry views:
  • registry/registry.zh-CN.json
  • registry/registry.en.json
• JS API:
  • lab.list(filter, { locale: 'en' })
  • lab.get(id, { locale: 'en' })
• MCP tools:
  • get_categories({ locale })
  • list_components({ ..., locale })
  • search_components({ ..., locale })
  • get_component({ id, locale })

Legacy cmp-manifest/v1 components remain supported during migration. New bilingual samples use cmp-manifest/v2.

See release notes for the migration summary, output changes, and consumer guidance.

发布前检查和发版步骤见 PUBLISHING.md、RELEASE-CHECKLIST-0.2.0.md、GITHUB-RELEASE-0.2.0.md。 中文对外公告可直接参考 ANNOUNCEMENT-0.2.0.zh-CN.md。