Installation

Get started with @aai-agency/og-components in your React project.

Install

bash

pnpm add @aai-agency/og-components

Requires react >= 18, Tailwind CSS 4+, and a Mapbox access token for the map components.

Setup

Import the Tailwind theme tokens in your CSS:

css

@import "@aai-agency/og-components/styles.css";

Import Mapbox CSS in your app entry:

import "mapbox-gl/dist/mapbox-gl.css";

AI Agent Prompt

Using Claude Code, ChatGPT, Codex, or another AI coding agent? Copy this prompt to get started instantly.

Install @aai-agency/og-components and set up an interactive oil & gas asset map.

```bash
pnpm add @aai-agency/og-components
```

The package ships with a Claude Code skill. After installing, the skill will be available automatically with full API docs, props, and usage examples.

Environment

Create a .env file in your project root with your Mapbox token.

env

VITE_MAPBOX_TOKEN=pk.your_mapbox_token_here

Get a free Mapbox token at mapbox.com.

Quick Start

tsx

import { Map, type Asset } from "@aai-agency/og-components";

const assets: Asset[] = [
  {
    id: "well-001",
    name: "COASTAL 14-29H",
    type: "well",
    status: "producing",
    coordinates: { lat: 48.12, lng: -103.45 },
    properties: {
      operator: "Coastal Energy",
      basin: "Bakken",
      cumOil: 245000,
    },
  },
];

const App = () => (
  <Map
    assets={assets}
    mapboxAccessToken={import.meta.env.VITE_MAPBOX_TOKEN}
    colorBy="status"
    enableOverlayUpload
    showDetailCard
  />
);

PreviousIntroduction

NextMap