@smartpiojito/agents-studio-widgets-react

React widgets for embedding agents-studio capabilities in host applications.

The first widget is a feedback collector — drop the floating action button into any React app and submissions land in agents-studio's feedback pipeline (where the AI feedback-loop turns themes into roadmap suggestions).

Install

npm install @smartpiojito/agents-studio-widgets-react

Quick start — drop-in mode

Issue a widget key from the agents-studio dashboard: Project → Settings → Widget → Rotate widget key.

import { FeedbackWidget } from '@smartpiojito/agents-studio-widgets-react';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <FeedbackWidget
        widgetKey={process.env.NEXT_PUBLIC_AGENTS_STUDIO_WIDGET_KEY!}
      />
    </>
  );
}

That's it. The key is a project-scoped public capture token (think Sentry DSN). It's safe to ship in browser bundles — the agents-studio side rate-limits per key and rotation invalidates leaked keys instantly.

Self-hosted agents-studio

<FeedbackWidget
  widgetKey={key}
  endpoint="https://your-agents-studio.example/api/v1"
/>

Proxy mode

If you'd rather keep the capture key out of the browser, supply a custom submit callback that goes through your own backend:

<FeedbackWidget
  submit={async (payload) => {
    const res = await fetch('/api/feedback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    if (!res.ok) throw new Error('submit failed');
    return await res.json();
  }}
/>

The host backend then calls POST {endpoint}/widgets/feedback with the X-Widget-Key header server-side. You can opt into proxy mode without giving up the drop-in component.

Theming

The widget styles itself with CSS custom properties. Override on a parent element (or :root) to reskin:

:root {
  --color-primary: #ec4899;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-border: #e2e8f0;
  --color-bg: #f8fafc;
  --color-error: #dc2626;
  --color-success: #16a34a;
}

No CSS file ships with the package — embeds never have to fight host stylesheets.

Props

| Prop | Default | Notes | |---|---|---| | widgetKey | — | Required unless submit is supplied. | | endpoint | https://agents-studio.app/api/v1 | Base URL. | | submit | — | Override for proxy mode. | | projectName | — | Optional subtitle inside the dialog. | | position | 'bottom-left' | Or 'bottom-right'. | | triggerLabel | '✉' | Character shown on the FAB. | | defaultCategory | 'other' | One of bug, feature, ux, other. |

Low-level access

For host apps that need to own state (custom drafts, server-rendered errors, integration tests):

import { FeedbackWidgetView } from '@smartpiojito/agents-studio-widgets-react';

FeedbackWidgetView is the pure presentational component the smart FeedbackWidget wraps. It takes all state + callbacks as props.

License

MIT