Installation

How to install and set up mapcn in your project.

Prerequisites

A project with Tailwind CSS and shadcn/ui set up.

Installation

Run the following command to add the map component:

npx shadcn@latest add https://mapcn-expand.vercel.app/r/map.json

This will install maplibre-gl and add the map component, draw helpers, and the client-side lib/map-agent runtime to your project.

The registry package does not include any backend route or LangChain server code. If you want to use MapAgent, keep your API route in your own app and only reuse the installed frontend runtime under lib/map-agent.

Usage

Import and use the map component:

import { Map, MapControls } from "@/components/ui/map";
import { Card } from "@/components/ui/card";

export function MyMap() {
  return (
    <Card className="h-[320px] p-0 overflow-hidden">
      <Map center={[-74.006, 40.7128]} zoom={11}>
        <MapControls />
      </Map>
    </Card>
  );
}
Note: The map uses free CARTO basemap tiles by default. No API key required. Tiles automatically switch between light and dark themes.
IntroductionAPI Reference