html-api-sdk

Documents the window.Magic JavaScript API for building SuperMagic HTML micro-apps.

5.0k|557|Updated May 14, 2025
One-click install
npx skills add https://github.com/dtyq/magic --skill html-api-sdk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-api-sdk
Source: https://github.com/dtyq/magic/tree/main/backend/super-magic/agents/skills/html-api-sdk
Command: npx skills add https://github.com/dtyq/magic --skill html-api-sdk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building HTML micro-apps inside SuperMagic requires exact knowledge of the pre-injected window.Magic API surface, permission scopes, and file storage conventions, which are otherwise easy to get wrong.

Core Features & Use Cases

  • Complete API Reference: Covers fs (readFile, writeFile, listDir, watchFile, getFileUrl, deleteFile, moveFile, renameFile), llm (chat, stream, getModels), agent, project (createTopicAndSend, sendMessage, uploadFiles, downloadFiles), and user.getInfo with permission scopes.
  • Data Storage Conventions: Defines file-per-record storage, list projection file names, watchDir-based list rendering, and safe rename/collision rules for shared CRUD apps.
  • Permission & Manifest Rules: Explains app.json manifest fields, high-risk scope declarations, user info authorization, and backward compatibility mappings.
  • Use Case: Ask the agent to build a todo list or visitor management micro-app, and it generates a complete HTML app using listDir/watchDir for lists, one JSON file per record, and addEventListener-based event binding.

Quick Start

Ask the agent to create an HTML micro-app such as a todo list that reads and writes workspace files using the window.Magic API.

Frequently Asked Questions about html-api-sdk

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I read and write files in a SuperMagic HTML micro-app?

Use window.Magic.fs.readFile(path) to read a file as a string and window.Magic.fs.writeFile(path, content) to write strings, Blobs, or ArrayBuffers. Paths are relative to the app root by default, and a leading slash accesses project-root files with the appropriate permission scopes.

How do I call an LLM from an HTML micro-app with window.Magic?

Use window.Magic.llm.chat(messages, { model }) for a single response or window.Magic.llm.stream(messages, onChunk, { model }) for streaming output. The model field is required with "auto" as default, and the app must declare the llm.use scope in app.json.

Does window.Magic.fs support watching files for changes?

Yes, window.Magic.fs.watchFile(path, callback) polls a file roughly every 3 seconds and watchDir(dir, callback) reports added and removed direct children. Both return an unwatch function, and each app is limited to 10 watched paths.

Why does window.Magic.user.getInfo only return name and avatar?

Sensitive fields like nickname, real_name, user_id, and organization_code are privacy-gated. You must declare the matching user.profile scopes in app.json permissions and request them at runtime with getInfo({ scopes, reason }), which the user must approve.

What permissions does an HTML micro-app need in app.json?

High-risk operations require declared scopes: llm.use for LLM calls, fs.project.read and fs.project.write for project-root file access, project.files.upload/download for file transfers, project.message.write for messaging, and user.profile scopes for sensitive user info.

Can I use inline onclick handlers in generated micro-app HTML?

No, inline event attributes like onclick are forbidden. All events must be bound with addEventListener, and lists rendered via innerHTML should use event delegation with data-action and data-id attributes on a stable container.