@auto-log/changelog

Embeddable changelog, release notes, documentation, and roadmap tools powered by AutoLogs.

Built for vibe coders — non-traditional builders using Lovable, Bolt, Replit, Base44, and similar platforms.

Quick Start

npm install @auto-log/changelog

Then run the CLI to scaffold everything:

npx @auto-log/changelog init --slug your-project-slug --docs --roadmap

The CLI will:

1. Detect your framework (Next.js or React/Vite)
2. Create the appropriate changelog page component
3. Scaffold .autologs/docs/ and .autologs/roadmap/ folders
4. Ask your platform and generate the right AI instruction files
5. Print Knowledge tab rules you can paste into your AI platform's settings

Features

Changelog Page

A clean, filterable changelog page. Entries are auto-generated from your GitHub commits.

React Router / Vite:

import { AutologChangelog } from "@auto-log/changelog/react";
import "@auto-log/changelog/style.css";

<Route path="/changelog" element={<AutologChangelog slug="your-slug" />} />

Next.js App Router:

// app/changelog/page.tsx
import { ChangelogPage } from "@auto-log/changelog/next";
import "@auto-log/changelog/style.css";

export default function Page() {
  return <ChangelogPage slug="your-slug" />;
}

Release Notes

A rich release notes page with search, emoji reactions, and email subscriptions.

import { AutologReleaseNotes } from "@auto-log/changelog/react";
import "@auto-log/changelog/style.css";

<Route path="/release-notes" element={<AutologReleaseNotes slug="your-slug" />} />

Widget

A floating popup button with an unread badge. Users see recent updates without leaving the page. Add it to your app's layout:

import { AutologWidget } from "@auto-log/changelog/react";
import "@auto-log/changelog/style.css";

<AutologWidget slug="your-slug" />

Documentation & Roadmap

Unlike changelogs and release notes (which are auto-generated from GitHub webhooks), documentation and roadmap content lives in your project as markdown files. The CLI scaffolds these for you:

.autologs/
├── INSTRUCTIONS.md          # AI guidelines for maintaining these files
├── docs/
│   ├── getting-started.md   # Quick-start guide
│   ├── how-to-articles.md   # Task-based guides
│   ├── reference.md         # Settings & features reference
│   └── concepts.md          # Key ideas explained
└── roadmap/
    ├── q2-2026.md           # Current quarter
    └── q3-2026.md           # Next quarter

Your AI coding assistant updates these files as you build. AutoLogs reads them via your GitHub webhook to generate documentation pages and roadmap views.

CLI Reference

npx @auto-log/changelog init --slug <slug> [options]

Options:
  --slug <slug>           Your AutoLog project slug (required)
  --mode <mode>           Embed mode: changelog (default), release-notes, or widget
  --docs                  Scaffold .autologs/docs/ documentation files
  --roadmap               Scaffold .autologs/roadmap/ quarterly files
  --platform <platform>   Your coding platform: lovable, bolt, replit, base44,
                          cursor, claude, windsurf, or other
  --copilot               Also generate AGENTS.md for GitHub Copilot
  --help                  Show help

Component Props

AutologChangelog

| Prop | Type | Default | Description | |------|------|---------|-------------| | slug | string | — | Your AutoLog project slug (required) | | apiUrl | string | AutoLog API | Custom API endpoint |

AutologReleaseNotes

| Prop | Type | Default | Description | |------|------|---------|-------------| | slug | string | — | Your AutoLog project slug (required) | | apiUrl | string | AutoLog API | Custom API endpoint | | showReactions | boolean | true | Show emoji reactions | | showSubscribe | boolean | true | Show email subscription form | | showSearch | boolean | true | Show search bar | | title | string | "Release Notes" | Custom hero title | | description | string | — | Custom hero description |

AutologWidget

| Prop | Type | Default | Description | |------|------|---------|-------------| | slug | string | — | Your AutoLog project slug (required) | | apiUrl | string | AutoLog API | Custom API endpoint | | maxAgeDays | number | 90 | Max age in days for entries shown | | maxEntries | number | 5 | Max entries to display | | position | string | "bottom-right" | Widget position: bottom-right, bottom-left, top-right, top-left | | triggerLabel | string | "What's New" | Button label | | showBadge | boolean | true | Show unread count badge | | filterType | string | — | Filter: new_release, improvement, or retired |

Platform Support

The CLI generates the right AI instruction files based on your platform:

| Platform | Generated Files | |----------|----------------| | Lovable | .autologs/INSTRUCTIONS.md + Knowledge tab text | | Bolt | .autologs/INSTRUCTIONS.md + Knowledge tab text | | Replit | .autologs/INSTRUCTIONS.md + Knowledge tab text | | Base44 | .autologs/INSTRUCTIONS.md + Knowledge tab text | | Cursor | .autologs/INSTRUCTIONS.md + .cursorrules | | Claude Code | .autologs/INSTRUCTIONS.md + CLAUDE.md | | Windsurf | .autologs/INSTRUCTIONS.md + .windsurfrules | | GitHub Copilot | AGENTS.md (use --copilot flag) |

All platforms also receive Knowledge tab instructions printed to the terminal.

How It Works

1. Install the package and run npx @auto-log/changelog init
2. Connect your GitHub repo to AutoLogs at autologs.io
3. Push code — AutoLogs automatically generates changelogs and release notes from your commits
4. Your AI assistant updates the .autologs/docs/ and .autologs/roadmap/ files as you build
5. AutoLogs reads everything via your GitHub webhook to power your public changelog, release notes, docs, and roadmap pages

No API key needed. The embedded components fetch data from the AutoLog public API automatically.

Links

• AutoLogs Dashboard
• GitHub Repository

License

MIT