@aai-agency/og-components

Production-grade O&G React components that your coding AI agent can use. Interactive maps, production charts, asset detail cards, and much more. Free, open source, and ready for Claude Code, ChatGPT, Codex, or any AI coding agent.

Built by AAI Agency Contact: Husam Rahman | [email protected] | https://www.linkedin.com/in/husam-rahman

Install

pnpm add @aai-agency/og-components mapbox-gl

Setup

Add the theme tokens to your CSS (after your Tailwind import):

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

Import Mapbox CSS in your app entry:

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

Quick Start

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
  />
);

What You Get

• Interactive Asset Map — Plot wells, meters, pipelines, facilities on a Mapbox map with clustering, drawing tools, and lasso selection
• Production Charts — Time series with dual Y-axis, powered by uPlot for 10,000+ data points
• Asset Detail Cards — Click any asset to see its properties, production chart, and custom fields
• Selection Panel — Multi-asset selection with filter chips and summary stats
• Overlay Management — Drag and drop KMZ, KML, GeoJSON, and Shapefile files
• Color Schemes — Color by status, type, production, water cut, operator, or basin
• Data Persistence — LocalStorage or in-browser SQLite for large datasets
• Validation Schemas — Zod schemas for assets, production records, overlays, and configuration

Requirements

• React 18+
• Tailwind CSS 4+
• mapbox-gl 3+
• Mapbox access token (get one here)

Development

pnpm install
pnpm dev        # Run the interactive playground
pnpm build      # Build the library
pnpm typecheck  # Type check

Documentation

• skills/og-components/SKILL.md — Full agent skill with rules and workflow
• CLAUDE.md — Dev setup and contributing guide
• CONTRIBUTING.md — How to contribute

License

MIT