ai integration
This commit is contained in:
51
src/app/api/ai-event/route.ts
Normal file
51
src/app/api/ai-event/route.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const { prompt } = await request.json();
|
||||
|
||||
const systemPrompt = `
|
||||
You are an assistant that converts natural language event descriptions into JSON objects
|
||||
matching this TypeScript type EXACTLY:
|
||||
{
|
||||
title: string,
|
||||
description?: string,
|
||||
location?: string,
|
||||
url?: string,
|
||||
start: string, // ISO datetime like 2024-06-14T13:00:00Z
|
||||
end?: string,
|
||||
allDay?: boolean
|
||||
}
|
||||
Today is ${new Date().toISOString().split("T")[0]}.
|
||||
If no time is given, assume allDay event.
|
||||
If no end time is given and not allDay, make it 1 hour after start.
|
||||
Output ONLY valid JSON, nothing else.
|
||||
`;
|
||||
|
||||
const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.OPENROUTER_API_KEY}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: "openai/gpt-3.5-turbo", // Or 'mistral/mistral-tiny' for cheaper
|
||||
messages: [
|
||||
{ role: "system", content: systemPrompt },
|
||||
{ role: "user", content: prompt },
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
try {
|
||||
const content = data.choices[0].message.content;
|
||||
const parsed = JSON.parse(content);
|
||||
return NextResponse.json(parsed);
|
||||
} catch (e) {
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to parse AI output", raw: data },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
46
src/app/api/ai-summary/route.ts
Normal file
46
src/app/api/ai-summary/route.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import type { CalendarEvent } from "@/lib/types";
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const { events } = await request.json();
|
||||
|
||||
if (!events || !Array.isArray(events)) {
|
||||
return NextResponse.json(
|
||||
{ error: "Invalid events array" },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.OPENROUTER_API_KEY}`, // Server-side only
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: "@preset/i-cal-editor-summarize", // FREE model
|
||||
messages: [
|
||||
{
|
||||
role: "system",
|
||||
content: `You summarize a list of events in natural language. Include date, time, and title. Be concise.`,
|
||||
},
|
||||
{ role: "user", content: JSON.stringify(events) },
|
||||
],
|
||||
temperature: 0.4,
|
||||
// max_tokens: 300,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
const summary =
|
||||
data?.choices?.[0]?.message?.content || "No summary generated.";
|
||||
return NextResponse.json({ summary });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to summarize events" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
147
src/app/page.tsx
147
src/app/page.tsx
@@ -25,6 +25,10 @@ export default function HomePage() {
|
||||
const [end, setEnd] = useState('')
|
||||
const [allDay, setAllDay] = useState(false)
|
||||
|
||||
// AI
|
||||
const [aiPrompt, setAiPrompt] = useState('')
|
||||
const [aiLoading, setAiLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const stored = await getAllEvents()
|
||||
@@ -128,6 +132,64 @@ export default function HomePage() {
|
||||
}
|
||||
}
|
||||
|
||||
// --- AI CREATE ---
|
||||
const handleAiCreate = async () => {
|
||||
if (!aiPrompt.trim()) return
|
||||
setAiLoading(true)
|
||||
try {
|
||||
const res = await fetch('/api/ai-event', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prompt: aiPrompt })
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.title) {
|
||||
setTitle(data.title || '')
|
||||
setDescription(data.description || '')
|
||||
setLocation(data.location || '')
|
||||
setUrl(data.url || '')
|
||||
setStart(data.start || '')
|
||||
setEnd(data.end || '')
|
||||
setAllDay(data.allDay || false)
|
||||
setEditingId(null)
|
||||
setDialogOpen(true)
|
||||
} else {
|
||||
alert('AI could not parse event.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('AI request error')
|
||||
} finally {
|
||||
setAiLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAiSummarize = async () => {
|
||||
if (events.length === 0) {
|
||||
alert("No events to summarize")
|
||||
return
|
||||
}
|
||||
setAiLoading(true)
|
||||
try {
|
||||
const res = await fetch('/api/ai-summary', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ events })
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.summary) {
|
||||
alert(data.summary)
|
||||
} else {
|
||||
alert('No summary generated.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('Error summarizing events')
|
||||
} finally {
|
||||
setAiLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onDragOver={handleDragOver}
|
||||
@@ -136,6 +198,21 @@ export default function HomePage() {
|
||||
className={`p-4 min-h-[80vh] rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
className="flex-1 border p-2 rounded"
|
||||
placeholder='Describe an event for AI to create'
|
||||
value={aiPrompt}
|
||||
onChange={e => setAiPrompt(e.target.value)}
|
||||
/>
|
||||
<Button onClick={handleAiCreate} disabled={aiLoading}>
|
||||
{aiLoading ? 'Thinking...' : 'AI Create'}
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
|
||||
AI Summarize
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-wrap mb-4">
|
||||
<Button onClick={() => setDialogOpen(true)}>Add Event</Button>
|
||||
{events.length > 0 && (
|
||||
@@ -163,16 +240,11 @@ export default function HomePage() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{events.length === 0 && (
|
||||
<p className="text-gray-500 italic">No events yet. Add or drop an .ics file here.</p>
|
||||
)}
|
||||
{events.length === 0 && <p className="text-gray-500 italic">No events yet.</p>}
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<ul className="space-y-2">
|
||||
{events.map(ev => (
|
||||
<li
|
||||
key={ev.id}
|
||||
className="border p-2 rounded bg-white shadow-sm flex justify-between items-center"
|
||||
>
|
||||
<li key={ev.id} className="border p-2 rounded bg-white shadow-sm flex justify-between">
|
||||
<div>
|
||||
<strong>{ev.title}</strong> — {ev.allDay
|
||||
? ev.start.split('T')[0]
|
||||
@@ -180,9 +252,7 @@ export default function HomePage() {
|
||||
{ev.location && <div className="text-sm text-gray-500">{ev.location}</div>}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
<Button size="sm" onClick={() => {
|
||||
setTitle(ev.title)
|
||||
setDescription(ev.description || '')
|
||||
setLocation(ev.location || '')
|
||||
@@ -192,68 +262,33 @@ export default function HomePage() {
|
||||
setAllDay(ev.allDay || false)
|
||||
setEditingId(ev.id)
|
||||
setDialogOpen(true)
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>
|
||||
Delete
|
||||
</Button>
|
||||
}}>Edit</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>Delete</Button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={val => {
|
||||
if (!val) resetForm()
|
||||
setDialogOpen(val)
|
||||
}}
|
||||
>
|
||||
<DialogContent className="space-y-2">
|
||||
<Dialog open={dialogOpen} onOpenChange={val => { if (!val) resetForm(); setDialogOpen(val) }}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
||||
<textarea
|
||||
className="border p-2 rounded w-full"
|
||||
placeholder="Description"
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
></textarea>
|
||||
<textarea className="border p-2 rounded w-full" placeholder="Description" value={description} onChange={e => setDescription(e.target.value)}></textarea>
|
||||
<Input placeholder="Location" value={location} onChange={e => setLocation(e.target.value)} />
|
||||
<Input placeholder="URL" value={url} onChange={e => setUrl(e.target.value)} />
|
||||
<label className="flex items-center gap-2 mt-2">
|
||||
<input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} />
|
||||
All day event
|
||||
</label>
|
||||
|
||||
{!allDay && (
|
||||
<>
|
||||
<label>Start date & time</label>
|
||||
{!allDay ? <>
|
||||
<Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
|
||||
<label>End date & time</label>
|
||||
<Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
|
||||
</>
|
||||
)}
|
||||
{allDay && (
|
||||
<>
|
||||
<label>Start date</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={start ? start.split('T')[0] : ''}
|
||||
onChange={e => setStart(e.target.value)}
|
||||
/>
|
||||
<label>End date</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={end ? end.split('T')[0] : ''}
|
||||
onChange={e => setEnd(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
</> : <>
|
||||
<Input type="date" value={start ? start.split('T')[0] : ''} onChange={e => setStart(e.target.value)} />
|
||||
<Input type="date" value={end ? end.split('T')[0] : ''} onChange={e => setEnd(e.target.value)} />
|
||||
</>}
|
||||
<DialogFooter>
|
||||
<Button onClick={handleSave}>{editingId ? 'Update' : 'Save'}</Button>
|
||||
</DialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user