SupaFeed

Quick Install

Paste this prompt into Cursor, Claude Code, or any coding agent — it will install and wire up the widget for you automatically.

prompt

Install @supafeed/sdk in this React app:

1. npm install @supafeed/sdk

2. Import SupaFeedProvider:
   import { SupaFeedProvider } from "@supafeed/sdk/react";

3. Wrap the root component (e.g. in providers.tsx or layout.tsx):
   <SupaFeedProvider
     enabled={Boolean(process.env.NEXT_PUBLIC_SUPAFEED_API_KEY)}
     config={{
       apiKey: process.env.NEXT_PUBLIC_SUPAFEED_API_KEY ?? "",
       position: "bottom-right",
     }}
   >
     {children}
   </SupaFeedProvider>

Getting Started

SupaFeed is a drop-in feedback widget with an AI-powered follow-up agent. Wrap your app once with the provider — the widget appears on every page automatically.

Install the package

bash

npm install @supafeed/sdk

React — add the provider

Add SupaFeedProvider to your root providers file. It reads config from env at runtime so it only activates when an API key is present.

tsx

import { SupaFeedProvider } from "@supafeed/sdk/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <SupaFeedProvider
      enabled={Boolean(process.env.NEXT_PUBLIC_SUPAFEED_API_KEY)}
      config={{
        apiKey: process.env.NEXT_PUBLIC_SUPAFEED_API_KEY ?? "",
        position: "bottom-right", // or "bottom-left"
      }}
    >
      {children}
    </SupaFeedProvider>
  );
}

Vanilla JS (non-React)

typescript

import { init } from "@supafeed/sdk";

init({
  apiKey: "ff_live_abc123",
  position: "bottom-right",
});

Styling

Styling is managed server-side from your dashboard — changes apply instantly with no deploy needed.

Agent Behavior

The AI that converses with your users is fully configurable from your dashboard. Define the tone, what questions it asks, and when to wrap up — no code changes needed.

Example prompt

“You are a helpful product assistant. Ask one short clarifying question about the user’s feedback to better understand the issue. Keep responses brief and conversational. After one follow-up, thank them and close the conversation.”

Data Captured

Each feedback session automatically captures context alongside the conversation.

url

Page URL where the widget was triggered

https://yourapp.com/dashboard

userAgent

Browser and OS info

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)...

timestamp

ISO 8601 time the session was submitted

2024-01-15T10:32:00.000Z

messages

Full conversation between user and agent

[{ role: "user", content: "..." }, ...]

sessionId

Unique ID for the feedback session

sess_abc123

user.id

Optional — your user's ID if passed via config

user_xyz

user.email

Optional — email if passed via config

jane@example.com

user.name

Optional — display name if passed via config

Jane Doe

Pass user info

tsx

<SupaFeedProvider
  config={{
    apiKey: "ff_live_abc123",
    user: {
      id: currentUser.id,
      email: currentUser.email,
      name: currentUser.name,
    },
  }}
>
  {children}
</SupaFeedProvider>

Categorization

SupaFeed automatically categorizes each session so you can triage at a glance. The AI agent assigns a category at the end of every conversation.

Bug

Something is broken or not working as expected

Feature Request

A request for new functionality

Improvement

Feedback on existing features or UX

Other

Doesn't clearly fit the other categories