Add KI-Suche via OpenRouter GPT-4o-mini
- /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
90
app/api/ai-search/route.ts
Normal file
90
app/api/ai-search/route.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
const SYSTEM_PROMPT = `Du bist ein Experte für B2B-Lead-Generierung im deutschsprachigen Raum.
|
||||
|
||||
Deine Aufgabe: Wandle die Beschreibung des Nutzers in 2–4 konkrete Google-Suchanfragen um, die lokale Unternehmen und Dienstleister finden.
|
||||
|
||||
Regeln:
|
||||
- Jede Query besteht aus einem kurzen Suchbegriff (Branche/Tätigkeit) und einer Region (Bundesland, Stadt oder Gebiet)
|
||||
- Suchbegriffe sind konkret, auf Deutsch, wie ein Mensch bei Google suchen würde
|
||||
- Keine Firmennamen, keine Websites, keine Social-Media-Begriffe
|
||||
- Wenn der Nutzer keine Region nennt, verteile auf sinnvolle deutsche Regionen (z.B. Bayern, NRW, Baden-Württemberg)
|
||||
- Wenn der Nutzer eine spezifische Region nennt, halte dich daran — teile ggf. in Städte auf für mehr Abdeckung
|
||||
- count immer 50 außer der Nutzer nennt explizit eine Zahl (dann zwischen 25 und 100)
|
||||
- Maximal 4 Queries zurückgeben
|
||||
- Keine Erklärungen, nur JSON
|
||||
|
||||
Antworte ausschließlich mit einem JSON-Array, kein Markdown, kein Text drumherum:
|
||||
[
|
||||
{ "query": "Dachdecker", "region": "Bayern", "count": 50 },
|
||||
{ "query": "Dachdecker", "region": "NRW", "count": 50 }
|
||||
]`;
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const { description } = await req.json() as { description: string };
|
||||
|
||||
if (!description?.trim()) {
|
||||
return NextResponse.json({ error: "Beschreibung fehlt" }, { status: 400 });
|
||||
}
|
||||
|
||||
const apiKey = process.env.OPENROUTER_API_KEY;
|
||||
if (!apiKey) {
|
||||
return NextResponse.json({ error: "OpenRouter API Key nicht konfiguriert" }, { status: 500 });
|
||||
}
|
||||
|
||||
const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${apiKey}`,
|
||||
"Content-Type": "application/json",
|
||||
"HTTP-Referer": "https://onvyaleads.app",
|
||||
"X-Title": "OnyvaLeads",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: "openai/gpt-4o-mini",
|
||||
temperature: 0.4,
|
||||
max_tokens: 512,
|
||||
messages: [
|
||||
{ role: "system", content: SYSTEM_PROMPT },
|
||||
{ role: "user", content: description.trim() },
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.text();
|
||||
console.error("[ai-search] OpenRouter error:", err);
|
||||
return NextResponse.json({ error: "KI-Anfrage fehlgeschlagen" }, { status: 500 });
|
||||
}
|
||||
|
||||
const data = await res.json() as {
|
||||
choices: Array<{ message: { content: string } }>;
|
||||
};
|
||||
|
||||
const raw = data.choices[0]?.message?.content?.trim() ?? "";
|
||||
|
||||
let queries: Array<{ query: string; region: string; count: number }>;
|
||||
try {
|
||||
queries = JSON.parse(raw);
|
||||
} catch {
|
||||
const match = raw.match(/\[[\s\S]*\]/);
|
||||
if (!match) throw new Error("Kein JSON in Antwort");
|
||||
queries = JSON.parse(match[0]);
|
||||
}
|
||||
|
||||
queries = queries
|
||||
.filter(q => typeof q.query === "string" && q.query.trim())
|
||||
.slice(0, 4)
|
||||
.map(q => ({
|
||||
query: q.query.trim(),
|
||||
region: (q.region ?? "").trim(),
|
||||
count: Math.min(Math.max(Number(q.count) || 50, 25), 100),
|
||||
}));
|
||||
|
||||
return NextResponse.json({ queries });
|
||||
} catch (err) {
|
||||
console.error("[ai-search] error:", err);
|
||||
return NextResponse.json({ error: "Fehler bei der KI-Anfrage" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user