The City Mesh · Docs

Embed your city

Add your interactive 3D sponsorship city to any website. Replace SLUG with your city's slug (e.g. xussof).

Let an AI add it for you

AI

Paste this into your AI assistant (Claude, Cursor, v0…) after swapping YOUR-SLUGfor your city's slug. It reads the machine-readable spec at /llms.txt and writes the embed into your codebase.

Add the The City Mesh widget to my website.

Read the spec at https://thecitymesh.com/llms.txt and implement Method 1 (the interactive 3D
<city-mesh> custom element). My city slug is: YOUR-SLUG

Rules:
- Load https://thecitymesh.com/embed.js once on the page.
- Use the idiomatic integration for my framework (detect it from my project).
- Replace YOUR-SLUG exactly; do not invent a slug.
- Ask me where to place the widget if it is not obvious.

Using an MCP-enabled agent? The citymesh-mcp server exposes get_embed_code — see section 5 below.

1 · One-line 3D embed

recommended

A custom element that renders the interactive city as a responsive, lazy-loaded iframe, the heavy 3D engine stays sandboxed and never touches your page's bundle. Works in plain HTML, React, Vue, WordPress…

<script src="https://thecitymesh.com/embed.js" async></script>
<city-mesh slug="SLUG"></city-mesh>

Optional attributes: height ("600" or any CSS), width, radius, eager (skip lazy-load).

2 · Plain iframe

No script needed, works everywhere.

<iframe src="https://thecitymesh.com/embed/SLUG" width="100%" height="600" loading="lazy"
  style="border:0;border-radius:16px" allow="fullscreen" title="The City Mesh"></iframe>

loading="lazy"keeps the 3D off your page's initial load, and the embed shows a static preview until a visitor clicks — so your Core Web Vitals stay intact.

Want the live 3D to show immediately, with no "Explore" click? Add ?play=1 to the src (alias ?eager=1):

<iframe src="https://thecitymesh.com/embed/SLUG?play=1" width="100%" height="600"
  style="border:0;border-radius:16px" allow="fullscreen" title="The City Mesh"></iframe>

3 · SEO supporter wall

SEO+

Injects real, crawlable HTML (city name, amount raised, your supporters with their links) into your page instead of an iframe, search engines index it as your content. Pair it with the 3D embed above.

<div data-citymesh="SLUG"></div>
<script src="https://thecitymesh.com/embed.js" async></script>

Optional: data-limit="12", data-theme="dark|light".

4 · Public read API

GET https://thecitymesh.com/api/v1/cities/SLUG/embed
  → { name, total_raised, total_donors, supporters[], city_url }

GET https://thecitymesh.com/api/v1/projects
  → list of public cities

5 · For AI agents (MCP)

MCP

The City Mesh ships a Model Context Protocol server so an AI assistant can create a city, configure its map / pricing / tenure, and hand back the ready-to-paste embed - with no manual dashboard work. Tools:

  • search_cities, find public cities
  • get_city, a city's info + stats
  • get_embed_code, ready-to-paste snippet for a slug
  • create_city, create a city (needs an API key)
  • set_map_config, radius, price, buy/rent, (needs an API key)

See the citymesh-mcp package README for setup. Read tools are public; create/configure tools authenticate with a City Mesh API key.

Create a city →