TimoUttenweiler/lead-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add KI-Suche via OpenRouter GPT-4o-mini

Browse Source 
- /api/ai-search: sends user description to GPT-4o-mini, returns 2-4
  structured query/region pairs as JSON
- AiSearchModal: textarea, generates previews, user selects queries to run
- KI-Suche button in hero section of /suche page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timo Uttenweiler
2026-04-08 14:00:54 +02:00
parent a39a98b6dc
commit 0f5d18dac7
3 changed files with 377 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/suche/page.tsx
View File

@@ -5,6 +5,7 @@ import Link from "next/link";
import { toast } from "sonner";
import { SearchCard } from "@/components/search/SearchCard";
import { LoadingCard, type LeadResult } from "@/components/search/LoadingCard";
import { AiSearchModal } from "@/components/search/AiSearchModal";
export default function SuchePage() {
const [query, setQuery] = useState("");
@@ -18,6 +19,7 @@ export default function SuchePage() {
const [deleting, setDeleting] = useState(false);
const [onlyNew, setOnlyNew] = useState(false);
const [saveOnlyNew, setSaveOnlyNew] = useState(false);
const [aiOpen, setAiOpen] = useState(false);
function handleChange(field: "query" | "region" | "count", value: string | number) {
if (field === "query") setQuery(value as string);
@@ -130,12 +132,33 @@ export default function SuchePage() {
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<span>Lead-Suche</span>
</div>
<h1 style={{ fontSize: 22, fontWeight: 500, color: "#ffffff", margin: 0, marginBottom: 6 }}>
Leads finden
</h1>
<p style={{ fontSize: 13, color: "#9ca3af", margin: 0 }}>
Suchbegriff eingeben — wir finden passende Unternehmen mit Kontaktdaten.
</p>
<div className="flex items-start justify-between">
<div>
<h1 style={{ fontSize: 22, fontWeight: 500, color: "#ffffff", margin: 0, marginBottom: 6 }}>
Leads finden
</h1>
<p style={{ fontSize: 13, color: "#9ca3af", margin: 0 }}>
Suchbegriff eingeben — wir finden passende Unternehmen mit Kontaktdaten.
</p>
</div>
<button
onClick={() => setAiOpen(true)}
disabled={loading}
style={{
display: "flex", alignItems: "center", gap: 7,
padding: "8px 14px", borderRadius: 8,
border: "1px solid rgba(139,92,246,0.35)",
background: "rgba(139,92,246,0.1)", color: "#a78bfa",
fontSize: 13, fontWeight: 500,
cursor: loading ? "not-allowed" : "pointer",
opacity: loading ? 0.5 : 1, whiteSpace: "nowrap",
}}
onMouseEnter={e => { if (!loading) { e.currentTarget.style.background = "rgba(139,92,246,0.18)"; e.currentTarget.style.borderColor = "rgba(139,92,246,0.6)"; }}}
onMouseLeave={e => { e.currentTarget.style.background = "rgba(139,92,246,0.1)"; e.currentTarget.style.borderColor = "rgba(139,92,246,0.35)"; }}
>
✨ KI-Suche
</button>
</div>
</div>
</div>
@@ -162,6 +185,41 @@ export default function SuchePage() {
/>
)}
{/* AI Modal */}
{aiOpen && (
<AiSearchModal
onStart={(queries) => {
setAiOpen(false);
if (!queries.length) return;
// Fill first query into the search fields and submit
const first = queries[0];
setQuery(first.query);
setRegion(first.region);
setCount(first.count);
setLoading(true);
setJobId(null);
setLeads([]);
setSearchDone(false);
setSelected(new Set());
fetch("/api/search", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ query: first.query, region: first.region, count: first.count }),
})
.then(r => r.json())
.then((d: { jobId?: string; error?: string }) => {
if (d.jobId) setJobId(d.jobId);
else throw new Error(d.error);
})
.catch(err => {
toast.error(err instanceof Error ? err.message : "Fehler");
setLoading(false);
});
}}
onClose={() => setAiOpen(false)}
/>
)}
{/* Results */}
{searchDone && leads.length > 0 && (() => {
const newCount = leads.filter(l => l.isNew).length;