Find your next car.
Know everything about it.
Active listings with instant AI breakdowns — specs, trim comparisons, reliability, value verdict. No extra tabs.
Liked Cars
{likedList.length > 0 && ( {likedList.length} )}
♡
) : (
No liked cars yet
Tap the heart on any listing to save it here.
{likedList.map(car => (
))}
)}
return }) } export default function DeepDriveAI() { const [messages, setMessages] = useState
DeepDrive AI
Your expert automotive advisor. Ask anything about buying, comparing, or owning a car.
{messages.length === 0 && (
)}
{messages.map((m, i) => (
Try asking...
{SUGGESTIONS.map(s => (
))}
{m.role === 'assistant' && (
)}
))}
{loading && (
{m.role === 'user' ? m.content : renderMarkdown(m.content)}
void }) {
const [hovered, setHovered] = useState(0)
return (
)
}
export default function MyDrivePage() {
const router = useRouter()
const [description, setDescription] = useState('')
const [budget, setBudget] = useState('Any')
const [seats, setSeats] = useState('Any')
const [acceleration, setAcceleration] = useState('any')
const [sport, setSport] = useState(0)
const [luxury, setLuxury] = useState(0)
const [bodyStyle, setBodyStyle] = useState('Any')
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
const [results, setResults] = useState(null)
const resultsRef = useRef(null)
const textareaRef = useRef(null)
async function handleFind() {
setLoading(true)
setError(null)
setResults(null)
try {
const res = await fetch('/api/mydrive', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
description,
budget: budget !== 'Any' ? budget : undefined,
seats: seats !== 'Any' ? seats : undefined,
acceleration: acceleration !== 'any' ? acceleration : undefined,
sport: sport || undefined,
luxury: luxury || undefined,
bodyStyle: bodyStyle !== 'Any' ? bodyStyle : undefined,
}),
})
const data = await res.json()
if (!res.ok) throw new Error(data.error ?? 'Something went wrong')
setResults(data.recommendations)
setTimeout(() => resultsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 100)
} catch (e) {
setError(e instanceof Error ? e.message : 'Something went wrong')
} finally {
setLoading(false)
}
}
const hasInput = description.trim() || budget !== 'Any' || seats !== 'Any' || acceleration !== 'any' || sport || luxury || bodyStyle !== 'Any'
return (
{/* Hero */}
Tell us what you want.
{label}
{[1, 2, 3, 4, 5].map(n => (
))}
Tell us what you want.
We'll find the car.
Describe your ideal car in plain English. MyDrive uses AI to match your preferences to real listings available right now.
{/* Description */}