JSPM

notpixel

2.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 11
  • Score
    100M100P100Q47655F
  • License MIT

NotPixel — Contextual Ads SDK for LLMs. Simple, provider-agnostic.

Package Exports

  • notpixel
  • notpixel/browser
  • notpixel/react

Readme

NotPixel

npm version npm downloads License: MIT TypeScript

Contextual ads SDK for LLMs. Simple, provider-agnostic, privacy-first.

NotPixel injects relevant, non-intrusive sponsored content into LLM responses — designed for AI-native platforms, chatbots, and assistants.


✨ Features

  • 🔌 Provider Agnostic — Works with OpenAI, Anthropic, Google, xAI, Mistral, and 200+ models via OpenRouter
  • 🔒 Privacy-First — Client-side embeddings option ensures user queries never leave the device
  • Streaming Support — Native streaming with ads injected at the end of responses
  • ⚛️ React Components — Ready-to-use React components with proper disclosure
  • 🌐 Browser SDK — Lightweight tracking for click and conversion events
  • 📊 Full Analytics — Track impressions, clicks, and conversions

📦 Installation

# npm
npm install notpixel

# pnpm
pnpm add notpixel

# yarn
yarn add notpixel

# bun
bun add notpixel

🚀 Quick Start

Basic Usage

import Ads from "notpixel";

const ads = new Ads({
  publisherId: "pub_10565",
  model: "openai/gpt-5.2",
  input: "Review this product brief and suggest relevant developer tools.",
});

const response = await ads.offer();

console.log(response.text);
// → Your LLM response with contextually relevant sponsored content

With Streaming

import Ads from "notpixel";

const ads = new Ads({
  publisherId: "pub_10565",
  model: "openai/gpt-5.2",
  input: "Explain an API migration plan for a growing SaaS platform.",
});

const stream = await ads.stream();

for await (const chunk of stream) {
  process.stdout.write(chunk.text);
}

Privacy-First by Default

import Ads from "notpixel";

const ads = new Ads({
  publisherId: "pub_10565",
  model: "openai/gpt-5.2",
  input: "Analyze a private customer support message and suggest relevant tools.",
  // privacy: true is already the default
});

const response = await ads.offer();

⚛️ React Integration

import { NotPixelAd } from "notpixel/react";

function ChatResponse({ message }) {
  return (
    <div>
      <p>{message.content}</p>
      
      {message.ad && (
        <NotPixelAd
          ad={message.ad}
          impressionId={message.impressionId}
          theme="dark"
        />
      )}
    </div>
  );
}

🌐 Browser Tracking

For client-side click and conversion tracking:

<script type="module">
  import { trackClick, trackConversion } from "https://unpkg.com/notpixel/dist/browser.mjs";

  // Track ad clicks
  document.querySelector('.ad-link').addEventListener('click', () => {
    trackClick(impressionId);
  });

  // Track conversions
  trackConversion(impressionId, {
    type: 'signup',
    value: 0, // optional: value in cents
  });
</script>

Or with npm:

import { trackClick, trackConversion } from "notpixel/browser";

// Track clicks
trackClick(impressionId);

// Track conversions
trackConversion(impressionId, { type: "purchase", value: 9900 });

⚙️ Configuration

Constructor Options

Option Type Required Description
publisherId string Your publisher ID from the NotPixel dashboard
model string Model identifier (e.g., openai/gpt-5.2, anthropic/claude-3)
input string User's query or prompt
privacy boolean Enable client-side embeddings (default: true)
minContextScore number Minimum relevance score for ads (0-1, default: 0.3)
disclosure string Custom disclosure text (default: "Sponsored")

Environment Variables

The SDK automatically detects API keys from your environment:

# OpenAI
OPENAI_API_KEY=sk-...

# Anthropic
ANTHROPIC_API_KEY=sk-ant-...

# Google
GOOGLE_API_KEY=...

# OpenRouter (for 200+ models)
OPENROUTER_API_KEY=sk-or-...

📊 Response Structure

interface AdsResponse {
  text: string;           // Full response with ad injected
  ad: {
    headline: string;     // Ad headline
    body?: string;        // Ad body text
    ctaLabel: string;     // Call-to-action button text
    ctaUrl: string;       // Destination URL
    disclosure: string;   // "Sponsored" disclosure
  } | null;
  impressionId: string;   // Use for click/conversion tracking
  model: string;          // Model used
  provider: string;       // Provider used
}

🔧 Supported Models

NotPixel works with any LLM provider. Here are some examples:

Provider Model Examples
OpenAI openai/gpt-5.2, openai/gpt-5.2-mini, openai/gpt-3.5-turbo
Anthropic anthropic/claude-opus-4.5, anthropic/claude-3-sonnet
Google google/gemini-pro, google/gemini-1.5-flash
xAI xai/grok-2
Mistral mistral/mistral-large, mistral/mixtral-8x7b
Meta meta/llama-3-70b (via OpenRouter)
Cohere cohere/command-r-plus (via OpenRouter)

💡 Use OpenRouter for access to 200+ models with a single API key.


🔐 Privacy & Compliance

NotPixel is designed with privacy at its core:

  • No PII collected — We don't store user emails, names, or identifiers
  • Client-side embeddings — Enabled by default, so queries never leave the device unless you opt out with privacy: false
  • Transparent disclosure — All ads are clearly marked as sponsored
  • GDPR/CCPA ready — Built for compliance with major privacy regulations

📖 Documentation

For full documentation, examples, and API reference:

docs.notpixel.ai


🤝 For Publishers

Want to monetize your AI platform?

  1. Sign up at notpixel.ai/publisher
  2. Get your Publisher ID
  3. Integrate the SDK
  4. Start earning

📄 License

MIT © NotPixel


WebsiteDocumentation