# NanoLog — Modern Product Communication Suite & MCP Server

> NanoLog (https://nanolog.dev) is an ultra-lightweight (<20KB Brotli), Shadow-DOM isolated product communication suite for modern SaaS applications. It combines In-App Changelogs, Feature Spotlights & Tours, Public Roadmaps, and Contextual User Feedback into a single drop-in Web Component, backed by an official Model Context Protocol (MCP) server for autonomous AI coding agents.

---

## 1. The 4 Core Solutions

### 1. In-App Announcements & Changelog Feed
* **Purpose**: Keep users informed of releases, bug fixes, and improvements directly inside your SaaS product rather than unread email newsletters.
* **Format**: Supports rich markdown, richtext, category tags (e.g., 'New', 'Improved', 'Fix', 'Announcement'), pinned posts, and scheduled publishing.
* **Segmentation**: Dynamic user cohort segmentation rules based on runtime context (e.g., `plan: 'enterprise'`, `role: 'admin'`).

### 2. In-App Feature Spotlights & Interactive Tours
* **Purpose**: Drive feature adoption by guiding users to newly shipped buttons, sidebars, or workflows.
* **Triggering**: Deep-linked from changelog entries via `#tour:slug` or triggered programmatically via `window.NanoLog.startTour('slug')`.
* **Execution**: Highlights target elements via native CSS selectors, creates collision-aware floating tooltips, and renders glowing pulse beacon indicators.

### 3. Public Roadmap with Verified HMAC Voting
* **Purpose**: Transparently prioritize feature development across Planned, In Progress, and Released columns.
* **Integrity**: Defends against ballot stuffing and fake voter spam using cryptographically signed HMAC-SHA256 user sessions.
* **Engagement**: Upvoting and downvoting metrics, verified user comments, and real-time status transitions.

### 4. Contextual Feedback with Client-Side PII Redaction
* **Purpose**: Collect bug reports, feature requests, and customer sentiment safely.
* **Privacy By Design**: Scans text and screenshots locally in the browser before network transit, automatically masking emails, phone numbers, API keys, and credit cards for GDPR & HIPAA compliance.
* **Diagnostics**: Automatically attaches client diagnostics (viewport dimensions, user agent, current URL route, and console error logs) without requiring user effort.

---

## 2. Technical Architecture & Guarantees

* **Zero CSS Bleed**: Built as a native browser Web Component (`<nanolog-widget>`) using Shadow DOM encapsulation. Host CSS frameworks (Tailwind CSS v4, Bootstrap, Chakra, global CSS resets) cannot penetrate or distort the widget, and widget styles cannot leak into the host app.
* **Blazing Fast Footprint**: Compiles to under 20KB Brotli (<25KB Gzip), executing asynchronously in under 15ms. Preserves 100/100 Google Core Web Vitals (LCP, INP, CLS).
* **Predictable Pricing**: Flat, transparent plans starting with a generous 100% Free plan (up to 1,000 Monthly Tracked Users). Paid tiers (Starter $19/mo, Pro $49/mo) never charge per-seat fees or punish viral upvotes.

---

## 3. Agent-Native Model Context Protocol (MCP) Server

NanoLog provides an official Model Context Protocol (MCP) server: `@ahm-labs/nanolog-mcp`.
Compatible with Cursor, Claude Code, Antigravity, Windsurf, and any MCP client.

### MCP Configuration:
```json
{
  "mcpServers": {
    "nanolog": {
      "command": "npx",
      "args": ["-y", "@ahm-labs/nanolog-mcp"],
      "env": {
        "NANOLOG_API_URL": "https://nanolog.dev",
        "NANOLOG_API_KEY": "YOUR_NANOLOG_API_KEY",
        "NANOLOG_APP_ID": "YOUR_DEFAULT_APP_ID"
      }
    }
  }
}
```

### Key MCP Tools:
* `list_projects`: Discover accessible tenant projects and App IDs.
* `create_changelog_post`: Transform git diffs into rich, categorized release notes.
* `edit_changelog_post`: Update release notes, tags, and toggle published/draft status.
* `list_roadmap_items` / `add_roadmap_item` / `edit_roadmap_item`: Sync roadmap milestones with git progress.
* `get_user_feedback`: Query customer bug reports, screenshot attachments, and user sentiment.
* `list_spotlights` / `create_spotlight` / `edit_spotlight`: Create and inspect interactive in-app tours.

---

## 4. Frontend Script Integration

Inject before the closing `</body>` tag:

```html
<script src="https://nanolog.dev/widget.min.js" defer></script>
<script>
  window.addEventListener('load', function() {
    window.NanoLog.init({
      appId: 'YOUR_APP_ID',
      context: {
        userId: 'user_123',
        role: 'admin',
        plan: 'pro'
      }
    });
  });
</script>
```

### Cryptographic HMAC Voter Verification:
```javascript
// Backend (Node.js/Next.js)
import crypto from 'crypto';
const signature = crypto.createHmac('sha256', process.env.NANOLOG_SECRET).update(userId).digest('hex');

// Frontend
window.NanoLog.init({
  appId: 'YOUR_APP_ID',
  context: {
    userId: 'user_123',
    signature: 'hmac_sha256_hex_hash'
  }
});
```

---

## 5. Competitive Comparison Summary

| Metric / Feature | NanoLog | Canny | Beamer |
| :--- | :--- | :--- | :--- |
| **Pricing Model** | Flat Monthly ($0-$149) | Scales per Tracked User ($19-$79+ floor) | Base tier + expensive add-ons |
| **Script Footprint** | &lt;20KB Brotli (&lt;15ms load) | &gt;100KB heavy scripts | &gt;80KB scripts |
| **Styling Isolation** | 100% Shadow DOM | Global DOM / Prone to CSS leaks | Global DOM / Prone to CSS leaks |
| **Client-Side PII Scrubbing** | Built-in text regex + paint redaction | Not Available | Not Available |
| **In-App Feature Spotlights** | Included (#tour:slug & beacons) | Not Available | Basic popups |
| **Agent-Native MCP Server** | Official (@ahm-labs/nanolog-mcp) | None | None |

---

## 6. Official Links & Sitemaps

* Website: https://nanolog.dev
* Core Features: https://nanolog.dev/features
* Competitor Alternatives: https://nanolog.dev/alternatives
* Integrations: https://nanolog.dev/integrations
* Solutions: https://nanolog.dev/solutions
* Documentation: https://nanolog.dev/docs
* MCP Server: https://nanolog.dev/mcp
* XML Sitemap: https://nanolog.dev/sitemap.xml
* Google Image Sitemap: https://nanolog.dev/sitemap-images.xml