Getting Started

npm install @deadendai/nextjs
# or
yarn add @deadendai/nextjs
# or
pnpm add @deadendai/nextjs

DEADEND_API_KEY=da_live_your_api_key_here
DEADEND_HOST=https://api.deadend.ai

import { createDeadendHandlers, SearchThreshold } from '@deadendai/nextjs'
 
const handlers = createDeadendHandlers({
  limit: 5,
  searchThreshold: SearchThreshold.GOOD,
})
 
export const POST = handlers.POST

import { NextRequest, NextResponse } from 'next/server'
 
const DEADEND_API_URL = 'https://api.deadend.ai/v1/suggest'
const DEADEND_API_KEY = process.env.DEADEND_API_KEY!
 
export async function POST(request: NextRequest) {
  try {
    if (!DEADEND_API_KEY) {
      return NextResponse.json(
        { error: 'DEADEND_API_KEY not configured' },
        { status: 500 }
      )
    }
 
    const body = await request.json()
    const { path, limit, options } = body
 
    if (!path) {
      return NextResponse.json(
        { error: 'path is required' },
        { status: 400 }
      )
    }
 
    const response = await fetch(DEADEND_API_URL, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${DEADEND_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        path,
        limit: limit || 3,
        options: options || {},
      }),
    })
 
    if (!response.ok) {
      const error = await response.json().catch(() => ({}))
      return NextResponse.json(
        { error: error.error || 'Failed to fetch suggestions' },
        { status: response.status }
      )
    }
 
    const data = await response.json()
    return NextResponse.json(data)
  } catch (error) {
    console.error('Error proxying suggest request:', error)
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    )
  }
}

import { NextRequest, NextResponse } from 'next/server'
 
const DEADEND_API_URL = 'https://api.deadend.ai/v1/semantic-search'
const DEADEND_API_KEY = process.env.DEADEND_API_KEY!
 
export async function POST(request: NextRequest) {
  try {
    if (!DEADEND_API_KEY) {
      return NextResponse.json(
        { error: 'DEADEND_API_KEY not configured' },
        { status: 500 }
      )
    }
 
    const body = await request.json()
    const { query, limit, options } = body
 
    if (!query) {
      return NextResponse.json(
        { error: 'query is required' },
        { status: 400 }
      )
    }
 
    const response = await fetch(DEADEND_API_URL, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${DEADEND_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query,
        limit: limit || 3,
        options: options || {},
      }),
    })
 
    if (!response.ok) {
      const error = await response.json().catch(() => ({}))
      return NextResponse.json(
        { error: error.error || 'Failed to fetch suggestions' },
        { status: response.status }
      )
    }
 
    const data = await response.json()
    return NextResponse.json(data)
  } catch (error) {
    console.error('Error proxying semantic search request:', error)
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    )
  }
}

import { NextRequest, NextResponse } from 'next/server'
 
const DEADEND_API_URL = 'https://api.deadend.ai/v1/events'
const DEADEND_API_KEY = process.env.DEADEND_API_KEY!
 
export async function POST(request: NextRequest) {
  try {
    if (!DEADEND_API_KEY) {
      return NextResponse.json(
        { error: 'DEADEND_API_KEY not configured' },
        { status: 500 }
      )
    }
 
    const body = await request.json()
    
    // Extract additional context from request headers
    const origin = request.headers.get('origin') || request.headers.get('referer')
    const userAgent = request.headers.get('user-agent')
    const forwardedFor = request.headers.get('x-forwarded-for')
    const referer = request.headers.get('referer')
 
    // Build event payload
    const eventPayload: any = {
      ...body,
      origin: body.origin || origin,
    }
 
    // Add optional fields if available
    if (userAgent && !body.user_agent) {
      eventPayload.user_agent = userAgent
    }
    if (referer && !body.referrer) {
      eventPayload.referrer = referer
    }
    if (forwardedFor && !body.user_ip) {
      eventPayload.user_ip = forwardedFor.split(',')[0].trim()
    }
 
    const response = await fetch(DEADEND_API_URL, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${DEADEND_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(eventPayload),
    })
 
    if (!response.ok) {
      const error = await response.json().catch(() => ({}))
      return NextResponse.json(
        { error: error.error || 'Failed to send event' },
        { status: response.status }
      )
    }
 
    // Events API returns 204 No Content on success
    return new NextResponse(null, { status: 204 })
  } catch (error) {
    console.error('Error proxying event:', error)
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    )
  }
}

DEADEND_API_KEY=da_live_your_api_key_here

'use client'
 
import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
import Link from 'next/link'
 
interface Suggestion {
  url: string
  title: string
  score: number
}
 
export default function NotFound() {
  const pathname = usePathname()
  const [suggestions, setSuggestions] = useState<Suggestion[]>([])
  const [loading, setLoading] = useState(true)
  const [searchId, setSearchId] = useState<string | null>(null)
 
  useEffect(() => {
    async function handleNotFound() {
      // Track 404 event
      await fetch('/api/deadend/events', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ raw_path: pathname }),
      }).catch(() => {}) // Fail silently
 
      // Fetch suggestions
      try {
        const response = await fetch('/api/deadend/suggest', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ path: pathname, limit: 3 }),
        })
 
        if (response.ok) {
          const data = await response.json()
          setSuggestions(data.suggestions || [])
          setSearchId(data.search_id || null)
        }
      } catch (error) {
        console.error('Error fetching suggestions:', error)
      } finally {
        setLoading(false)
      }
    }
 
    handleNotFound()
  }, [pathname])
 
  const handleClick = async (suggestion: Suggestion, rank: number) => {
    // Track click event
    await fetch('/api/deadend/events', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        clicked_url: suggestion.url,
        clicked_rank: rank,
        raw_path: pathname,
        search_id: searchId,
      }),
    }).catch(() => {}) // Fail silently
  }
 
  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-8">
      <h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
      {loading ? (
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
      ) : suggestions.length > 0 ? (
        <div className="w-full max-w-2xl">
          <h2 className="text-2xl font-semibold mb-4">Did you mean one of these?</h2>
          <div className="space-y-4">
            {suggestions.map((suggestion, index) => (
              <Link
                key={suggestion.url}
                href={suggestion.url}
                onClick={() => handleClick(suggestion, index + 1)}
                className="block p-4 border border-gray-200 rounded-lg hover:border-gray-400 hover:bg-gray-50 transition-colors"
              >
                <h3 className="text-lg font-medium mb-1">{suggestion.title}</h3>
                <p className="text-sm text-gray-600 mb-2">{suggestion.url}</p>
                <p className="text-xs text-gray-500">Relevance: {Math.round(suggestion.score * 100)}%</p>
              </Link>
            ))}
          </div>
        </div>
      ) : (
        <div className="text-center">
          <p className="text-gray-600 mb-4">No suggestions available.</p>
          <Link href="/" className="text-blue-600 hover:underline">
            Return to homepage
          </Link>
        </div>
      )}
    </div>
  )
}