KrackedMaps

For AI builders

Use the globe directly from Claude Code, Codex, or your terminal.

KrackedMaps ships a CLI, MCP server, and npm exports so coding agents can pull ready-to-paste globe code, static SVGs, hosted embeds, and theme config without scraping the site.

Use the website buttons

Customize → For AI Builders → React / Next.js / Prompt / Claude MCP setup

The editor sidebar now copies agent-ready snippets for the exact theme and globe or country you are viewing.

1. Install or run with npx

npm i krackedmaps
npx krackedmaps globe react --theme blueprint

Use npx for one-off exports, or install the package when you want the rotating globe inside an app.

Add the MCP server to Claude Code

claude mcp add krackedmaps -- npx -y krackedmaps mcp

Then ask Claude to use KrackedMaps directly, for example: Add a rotating KrackedMaps globe hero using the blueprint theme.

CLI Commands

npx krackedmaps globe svg --theme blueprint > globe.svgStatic SVG snapshot of the globe.
npx krackedmaps globe embed --theme batikHosted iframe for no-build pages, docs, Webflow, Framer, and quick prototypes.
npx krackedmaps globe html --theme blueprintDrop-in HTML snippet that loads the npm package from a CDN.
npx krackedmaps globe react --theme forestReact component using createGlobe and WORLD_COUNTRIES.
npx krackedmaps globe next --theme lightNext.js client component with "use client".
npx krackedmaps globe prompt --theme blueprintStarter prompt you can paste into Claude or Codex.
npx krackedmaps countriesList available country slugs for hosted country embeds.
npx krackedmaps country malaysia embed --districtsHosted country map iframe snippet.
npx krackedmaps theme-json --theme blueprintCopy CSS theme variables as JSON.

Use the globe in React

import { useEffect, useRef } from "react";
import { createGlobe, WORLD_COUNTRIES } from "krackedmaps/globe";
import "krackedmaps/css";
import "krackedmaps/globe.css";

export function GlobeHero() {
  const ref = useRef(null);
  useEffect(() => {
    const globe = createGlobe(ref.current, {
      countries: WORLD_COUNTRIES,
      theme: "blueprint",
      autoSpin: true
    });
    return () => globe.destroy();
  }, []);

  return <div ref={ref} style={{ width: "100%", height: 560 }} />;
}

MCP Tools Claude Can Call

krackedmaps_globe_svg krackedmaps_globe_embed krackedmaps_globe_html krackedmaps_globe_react krackedmaps_globe_next krackedmaps_globe_prompt krackedmaps_country_embed krackedmaps_countries krackedmaps_theme_json

These sit beside the Malaysia tools already available for SVG, GeoJSON, paths, projection, React, and embeds.

Best Claude Code starter prompt

Use the krackedmaps MCP server to add an interactive rotating globe hero to this project.
Use the blueprint theme, make it responsive, and keep the implementation production-ready.