Build Feedlog

API key

Create an API key in your FeedLog dashboard to authenticate the changelog widget. Go to your installation → API Keys → Create new key. Use the key ID as the apiKey prop. For self-hosted deployments, pass the endpoint prop.

Install packages

Install the package for your framework (or core for a custom UI):

# React
npm install @feedlog-ai/react

# Vue
npm install @feedlog-ai/vue

# Web Components (framework-agnostic)
npm install @feedlog-ai/webcomponents

# Custom SDK (build your own UI)
npm install @feedlog-ai/core

Per-package walkthroughs

Full guides live in the feedlog-toolkit repo on GitHub.

1. Top-level client

When to use: You want one component with an API key; the widget handles fetching, errors, and upvotes.

Summary: Install @feedlog-ai/webcomponents, @feedlog-ai/react, or @feedlog-ai/vue and use FeedlogIssuesClient / <feedlog-issues-client>.

import React from 'react';
import { FeedlogIssuesClient } from '@feedlog-ai/react';

function App() {
  return (
    <div>
      <FeedlogIssuesClient
      apiKey="your-api-key"
      type="bug"
      limit={10}
      theme="light"
      maxWidth="42rem"
      onFeedlogUpvote={event => {
        console.log('Issue upvoted:', event.detail);
      }}
      onFeedlogError={event => {
        console.error('Error:', event.detail);
      }}
      />
    </div>
  );
}

2. Composable changelog

When to use: Full SSR without an empty flash, route loaders, dynamic props at request time, or custom loading and error UX while keeping Feedlog’s list and cards.

Summary: Use FeedlogSDK from @feedlog-ai/core to fetch (server or loader). Pass the issues array into FeedlogIssues / <feedlog-issues>. Handle upvotes with sdk.toggleUpvote and update state.

React note: Import issues components from @feedlog-ai/react, not @feedlog-ai/react/ssr-components or @feedlog-ai/react/next.

Installation

npm install @feedlog-ai/core
npm install @feedlog-ai/react  # for FeedlogIssues display component

Basic SDK usage

import { FeedlogSDK } from '@feedlog-ai/core';

const sdk = new FeedlogSDK({
  apiKey: 'your-api-key', // your FeedLog API key
});

// Fetch issues
const { issues, nextCursor } = await sdk.fetchIssues({
  type: 'enhancement', // 'bug' | 'enhancement'
  limit: 20,
  cursor: undefined, // for pagination
});

// Toggle upvote
const { upvoted, upvoteCount } = await sdk.toggleUpvote('issue-id');

SSR example (Next.js App Router)

// app/issues/page.tsx
import { FeedlogIssues } from '@feedlog-ai/react';
import { FeedlogSDK } from '@feedlog-ai/core';

export default async function IssuesPage() {
  const sdk = new FeedlogSDK({ apiKey: process.env.FEEDLOG_API_KEY! });
  const { issues } = await sdk.fetchIssues({ limit: 10 });
  return <FeedlogIssues issues={issues} theme="light" />;
}

For upvote handling, create a client component that wraps FeedlogIssues, listens for feedlogUpvote, calls sdk.toggleUpvote(issueId), and updates local state.

3. Core-only custom UI

When to use: You want full control over HTML, CSS, or framework components and only need the Feedlog API and types.

Summary: Install @feedlog-ai/core only. You do not need @feedlog-ai/react, @feedlog-ai/vue, or @feedlog-ai/webcomponents for rendering. Use FeedlogSDK, FeedlogIssue types, and optionally sanitizeHtml for issue bodies.