Framework

Feedback widget for Next.js (App Router)

The widget needs to run on the client, so wrap it in its own "use client" component and mount that once from your root layout, the same pattern Upstep uses to dogfood itself on this site.

Get your API key free

Setup steps

  1. 1

    Install: npm install @upstep/js

  2. 2

    Create a small "use client" wrapper component that renders UpstepProvider + FeedbackWidget

  3. 3

    Import that component into app/layout.tsx so it mounts on every route

Code

tsx
"use client";
import { UpstepProvider, FeedbackWidget } from "@upstep/js/react";

export function Feedback() {
  return (
    <UpstepProvider apiKey={process.env.NEXT_PUBLIC_UPSTEP_API_KEY!}>
      <FeedbackWidget />
    </UpstepProvider>
  );
}

// app/layout.tsx
// import { Feedback } from "@/components/Feedback";
// <body>{children}<Feedback /></body>
  • Use NEXT_PUBLIC_ prefixed env vars, the key ships to the browser bundle by design, the same way it does in a script tag.
✦

While you're here: connect an AI agent

Every Upstep project ships a built-in MCP server. Once feedback starts flowing in from Next.js, Claude Code, Cursor, or any MCP client can list it, triage it, and file Dev-only tasks, without leaving your editor.

See how the MCP server works

Start collecting feedback in Next.js today

Free plan. No credit card. Your API key is ready the moment you sign up.

Get started free