AI agents / MCP#

Globestudio runs a hosted Model Context Protocol server, so there is nothing to install. In the Claude app, open Globestudio in Claude's connector directory, or paste this URL under Customize, Connectors, Add custom connector. In ChatGPT, install the Globestudio plugin. Claude Code, Codex and Cursor take the lines below. Then ask in chat: "make me a clean dotted globe with cyan dots" and your agent builds the share URL for you.

url

https://globestudio.app/mcp

Claude Code

claude mcp add --transport http globestudio https://globestudio.app/mcp

Codex

codex mcp add globestudio --url https://globestudio.app/mcp

Cursor mcp.json

{ "mcpServers": { "globestudio": { "url": "https://globestudio.app/mcp" } } }

Local server

claude mcp add globestudio -- npx -y @globestudio/mcp

Open in Claude's connector directory →

Open in ChatGPT →

View on npm →

Coding agents / Skill#

The Globestudio skill teaches coding agents such as Claude Code, Codex and Cursor how a design travels in a link, how to embed one and which look fits a brief. Add it with npx skills, the GitHub CLI or the Claude Code plugin, which also connects the MCP server. npx skills sends anonymous install data to skills.sh unless you set DISABLE_TELEMETRY=1.

npx skills

npx skills add alevizio/globestudio

GitHub CLI

gh skill install alevizio/globestudio globestudio

Claude Code plugin

claude plugin marketplace add alevizio/globestudio && claude plugin install globestudio@globestudio

View on skills.sh →

Webflow#

Drop an Embed element, paste the iframe snippet, publish. The globe renders inside any responsive container.

html

<iframe
  src="https://globestudio.app/embed?look=halftone"
  width="100%"
  height="480"
  style="border:0"
  loading="lazy"
  title="Globestudio dotted globe"
></iframe>

Framer#

Add an Embed component, paste the iframe URL, pick auto-resize. Works in Free + Pro projects, no plugin install.

url

https://globestudio.app/embed?look=aurora

Figma#

The Globestudio plugin is live on Figma Community and runs the full studio: 21 looks, any country or region and every control. Click Insert to add an image, or the flat map as editable vectors up to 2,500 dots. Paste a share link from the site into the plugin to load that exact design. Also works in FigJam via the embed URL. Without the plugin, the studio's export dialog has a Figma tab that copies your design as vectors or as an image, ready to paste into a file. It says when the look has an effect the vectors can't keep.

url

https://globestudio.app/embed?look=risograph

Install plugin →

Notion#

Type /embed, paste the URL, choose Display as embed. The globe scales to the column width.

url

https://globestudio.app/embed?look=iridescent

WordPress#

Custom HTML block, paste the iframe. Works on the block editor (Gutenberg) and Classic too.

html

<iframe
  src="https://globestudio.app/embed?look=newsprint"
  width="100%"
  height="480"
  style="border:0"
  loading="lazy"
></iframe>

Vanilla JS / Script tag#

Drop a div + the one-line script-tag loader. Reads data-look / data-config from the div, no install. On a light page, add data-theme="light" to a see-through look like Wireframe.

html

<div data-globestudio data-look="bayer" style="height:480px"></div>
<script src="https://globestudio.app/embed.js" async></script>

React / Next.js#

One-line install. TypeScript autocomplete on every preset. SSR-friendly out of the box. Works in React, Next.js, Remix, Astro. On a light page, add theme="light" to a see-through look like Wireframe. For your own design, the export dialog's Share tab has the snippet under Embed code, next to an iframe and a web component version. For a new project, copy the starter: a Vite app with a globe on the page.

url

npm install @globestudio/react

// Then:
import { Globe } from "@globestudio/react";

<Globe look="halftone" width={640} height={480} />

Starter project

npx degit@3.10.0 alevizio/globestudio/examples/starter-react my-globe

View on npm →

Open the starter in StackBlitz →