AI Research Sources List

AI chats

About

A live research list: the sources an agent has read, a check on the ones it kept, a spinner on the one it is reading now, a status chip and two counters. From the Midnight Lite template (MIT).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Research Sources List to your project and fits it to your theme.

Code

How AI Research Sources List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import type { CSSProperties } from "react"

import { ResearchFeed } from "@/components/ui/research-feed"

const settings = {
  background: "#f6f5f1",
  card: "#ffffff",
  text: "#16171b",
  muted: "#63666f",
  primary: "#16171b",
}

// a daylight palette as theme tokens; the component itself only reads the tokens
function daylight(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.background,
    foreground: s.text,
    card: s.card,
    primary: s.primary,
    "muted-foreground": s.muted,
  }
  return Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])) as CSSProperties
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div
      className="flex min-h-svh w-full items-center justify-center px-5 py-12"
      style={{ ...daylight(s), fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif", background: s.background, color: s.text } as CSSProperties}
    >
      <div
        className="w-full max-w-[640px] rounded-[28px] p-8 md:p-10"
        style={{ background: s.card, boxShadow: "0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 28px -16px rgb(0 0 0 / 0.18)" }}
      >
        <p className="text-[14px] font-medium" style={{ color: s.muted }}>
          Research
        </p>
        <h3 className="mt-3 max-w-[520px] text-[26px] leading-[32px] font-semibold tracking-[-0.025em] text-balance md:text-[30px] md:leading-[36px]">
          <span>Research on autopilot.</span> <span style={{ color: s.muted }}>It keeps only what answers your question.</span>
        </h3>
        <ResearchFeed
          className="mt-8"
          fade={false}
          label="Sources"
          status="Reading now"
          read="96 read"
          kept="11 kept"
          rows={[
            { title: "Competitor pricing pages, November", where: "web/pricing" },
            { title: "Customer interviews, round 3", where: "notes/research" },
            { title: "Churn survey answers", where: "forms/churn" },
            { title: "Q4 roadmap draft", where: "docs/roadmap", reading: true },
          ]}
        />
      </div>
    </div>
  )
}