Embed a feedback portal in your app.

import { useEffect, useState } from 'react';

const STATUS_COLORS = {
  OPEN: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
  UNDER_CONSIDERATION: 'bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-400',
  PLANNED: 'bg-purple-50 dark:bg-purple-950 text-purple-700 dark:text-purple-400',
  IN_PROGRESS: 'bg-amber-50 dark:bg-amber-950 text-amber-700 dark:text-amber-400',
  ADDRESSED: 'bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-400',
};

export function FeedbackBoard({ projectId }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`https://lupr.dev/api/pitches/${projectId}/widget?sort=votes&limit=20`)
      .then(r => r.json())
      .then(setData);
  }, [projectId]);

  if (!data) return <p>Loading feedback...</p>;

  return (
    <div>
      <h2>{data.project.title} — Feedback</h2>
      <p>{data.stats.totalFeedback} responses · {data.stats.pmfScore}% would use</p>

      {data.feedback.map(fb => (
        <div key={fb.id} style={{ display: 'flex', gap: 12, padding: 12 }}>
          <div style={{ textAlign: 'center' }}>
            <span>▲</span>
            <div>{fb.votes}</div>
          </div>
          <div>
            <strong>{fb.text}</strong>
            <span className={STATUS_COLORS[fb.status]}>{fb.status}</span>
            <p>— {fb.author}</p>
            {fb.ownerResponse && (
              <blockquote>Owner: {fb.ownerResponse}</blockquote>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

<template>
  <div v-if="data">
    <h2>{{ data.project.title }} — Feedback</h2>
    <p>{{ data.stats.pmfScore }}% would use · {{ data.stats.totalFeedback }} responses</p>

    <div v-for="fb in data.feedback" :key="fb.id" class="feedback-item">
      <div class="votes">▲ {{ fb.votes }}</div>
      <div>
        <strong>{{ fb.text }}</strong>
        <span :class="statusClass(fb.status)">{{ fb.status }}</span>
        <p v-if="fb.ownerResponse" class="response">
          Owner: {{ fb.ownerResponse }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({ projectId: String });
const data = ref(null);

onMounted(async () => {
  const res = await fetch(
    `https://lupr.dev/api/pitches/${props.projectId}/widget?sort=votes`
  );
  data.value = await res.json();
});
</script>

import requests

def get_lupr_feedback(project_id, sort="votes", limit=10):
    """Fetch top feedback from Lupr for display in your app."""
    resp = requests.get(
        f"https://lupr.dev/api/pitches/{project_id}/widget",
        params={"sort": sort, "limit": limit},
    )
    resp.raise_for_status()
    data = resp.json()

    print(f"Project: {data['project']['title']}")
    print(f"Validation Score: {data['stats']['pmfScore']}%")
    print(f"Total feedback: {data['stats']['totalFeedback']}\n")

    for fb in data["feedback"]:
        print(f"  [{fb['votes']} votes] {fb['text']}")
        print(f"    Status: {fb['status']} | By: {fb['author']}")
        if fb.get("ownerResponse"):
            print(f"    → Owner: {fb['ownerResponse']}")
        print()

    return data