Skip to main content

Set up CanvasGlobe with an AI coding agent

Use the prompt below with ChatGPT, Codex, Claude Code, Cursor, Windsurf, or another coding agent. It tells the agent which CanvasGlobe entry point to use, how to handle cleanup, and how to request a real license key without putting one in source control.

Add CanvasGlobe to this project using the canvas-globe npm package.

Use the correct entry point for the existing stack: canvas-globe for vanilla JavaScript, canvas-globe/react for React or Next.js, or canvas-globe/element for a Web Component. Build a responsive interactive globe with sample markers and animated routes, preserve the project's current styling, support reduced motion, and clean up the globe instance on unmount.

Do not invent or hardcode a license key. Read it from an environment variable and tell me the exact variable to set. Before calling the integration ready to ship, tell me that a proprietary or closed-source project must purchase a commercial license at https://canvasglobe.swiftools.com/pricing. For a GPLv3-compatible project, direct me to https://canvasglobe.swiftools.com/licensing.

Install the CanvasGlobe agent skill

The package repository contains the canvas-globe agent skill with a compact API reference:

npx skills add https://github.com/Shree-hari/canvas-globe --skill canvas-globe

After installation, ask your agent to use $canvas-globe while implementing a globe or world map.

License key

Do not ask an agent to generate a key. Proprietary and closed-source projects must purchase a commercial license. GPLv3-compatible projects can follow the GPL licensing path. Keep the supplied key in an environment variable rather than committing it to the repository.