Docs
AI Search Template (Perplexity Clone)

AI Search Template (Perplexity Clone)

Un motor de búsqueda potenciado por IA con una interfaz de usuario generativa.

Manual de Usuario

Configuración del Motor de Búsqueda

1. Configuración Principal

Edita lib/config/search.ts:

export const searchConfig = {
  // Configuración básica de búsqueda
  basic: {
    maxResults: 10,
    searchDepth: 'basic',
    cacheTime: 3600,
    timeoutMs: 10000,
    retryAttempts: 3,
    filters: {
      includeDomains: [], // ej: ['wikipedia.org', 'github.com']
      excludeDomains: [], // ej: ['facebook.com', 'twitter.com']
      dateRange: 'year', // 'day', 'week', 'month', 'year', 'all'
      language: 'es',    // código ISO del idioma
      safeSearch: true   // filtrado de contenido explícito
    }
  },
 
  // Configuración avanzada para búsquedas profundas
  advanced: {
    maxResults: 25,
    searchDepth: 'advanced',
    cacheTime: 7200,
    timeoutMs: 30000,
    retryAttempts: 5,
    crawlDepth: 2,      // niveles de profundidad para crawling
    analyzeImages: true, // incluir análisis de imágenes
    extractMetadata: true, // extraer metadatos de páginas
    filters: {
      minWordCount: 100,  // mínimo de palabras por resultado
      maxAge: '30d',      // edad máxima de contenido
      verifiedSources: true // solo fuentes verificadas
    }
  }
}

2. Configuración de Proveedores IA

Personaliza en lib/config/providers.ts:

export const providers = {
  openai: {
    model: 'gpt-4',
    temperature: 0.7,
    maxTokens: 2000,
    topP: 0.9,
    frequencyPenalty: 0.5,
    presencePenalty: 0.5,
    streaming: true,
    models: {
      default: 'gpt-4',
      fast: 'gpt-3.5-turbo',
      analysis: 'gpt-4-32k'
    }
  },
 
  anthropic: {
    model: 'claude-3-sonnet',
    temperature: 0.5,
    maxTokens: 4000,
    topK: 40,
    topP: 0.9,
    models: {
      default: 'claude-3-sonnet',
      fast: 'claude-3-haiku',
      analysis: 'claude-3-opus'
    }
  },
 
  google: {
    model: 'gemini-1.5-pro',
    temperature: 0.4,
    candidateCount: 1,
    topK: 40,
    topP: 0.8,
    models: {
      default: 'gemini-1.5-pro',
      fast: 'gemini-1.5-pro-vision'
    }
  }
}

3. Personalización de Almacenamiento

Configura en lib/config/storage.ts:

export const storage = {
  // Configuración Redis
  redis: {
    ttl: 86400,         // tiempo de vida en segundos
    prefix: 'morphic:',  // prefijo para keys
    maxEntries: 10000,   // máximo de entradas
    cleanupInterval: 3600, // intervalo de limpieza en segundos
    compression: true,   // comprimir datos
    serializer: 'json'   // formato de serialización
  },
 
  // Configuración de caché
  cache: {
    searches: {
      ttl: 3600,        // caché de búsquedas
      maxSize: '100mb'   // tamaño máximo
    },
    results: {
      ttl: 7200,        // caché de resultados
      maxSize: '500mb'   // tamaño máximo
    },
    images: {
      ttl: 86400,       // caché de imágenes
      maxSize: '1gb'     // tamaño máximo
    }
  }
}

Uso del Sistema de Búsqueda

1. Búsqueda Básica

// Componente de búsqueda básica
<SearchBar
  placeholder="¿Qué deseas buscar?"
  className="w-full rounded-lg"
  options={{
    suggestions: true,     // mostrar sugerencias
    history: true,        // usar historial
    autoComplete: true,   // autocompletado
    voiceInput: true      // entrada por voz
  }}
  filters={{
    date: true,           // filtro por fecha
    source: true,         // filtro por fuente
    language: true        // filtro por idioma
  }}
  onSearch={handleSearch}
/>

2. Búsqueda Avanzada

// Componente de búsqueda avanzada
<AdvancedSearch
  defaultFilters={{
    dateRange: 'month',
    sources: ['academic', 'news'],
    language: 'es',
    type: ['article', 'paper']
  }}
  customFields={[
    {
      name: 'author',
      type: 'text',
      placeholder: 'Autor específico'
    },
    {
      name: 'publisher',
      type: 'select',
      options: ['journal', 'conference', 'blog']
    }
  ]}
  visualization={{
    mode: 'detailed',     // 'simple', 'detailed', 'compact'
    layout: 'grid',       // 'list', 'grid', 'card'
    sorting: true,        // permitir ordenamiento
    grouping: true        // permitir agrupación
  }}
/>

3. Panel de Resultados

<ResultsPanel
  layout="grid"          // 'list', 'grid', 'card'
  columns={{
    sm: 1,               // móvil
    md: 2,               // tablet
    lg: 3                // desktop
  }}
  features={{
    preview: true,       // vista previa
    summary: true,       // resumen IA
    translate: true,     // traducción
    share: true          // compartir
  }}
  display={{
    images: true,        // mostrar imágenes
    metrics: true,       // mostrar métricas
    dates: true,         // mostrar fechas
    sources: true        // mostrar fuentes
  }}
  interactions={{
    save: true,          // guardar resultado
    annotate: true,      // añadir notas
    highlight: true      // resaltar texto
  }}
/>

4. Configuración de Exportación

<ExportOptions
  formats={[
    {
      type: 'pdf',
      options: {
        layout: 'article',
        includeImages: true,
        fonts: ['Inter'],
        styling: true
      }
    },
    {
      type: 'markdown',
      options: {
        includeMetadata: true,
        formatting: 'github'
      }
    },
    {
      type: 'csv',
      options: {
        delimiter: ',',
        includeHeaders: true
      }
    }
  ]}
  batch={{
    enabled: true,
    maxItems: 100
  }}
  scheduling={{
    enabled: true,
    frequency: 'daily'
  }}
/>

Personalización Visual

1. Tema Principal

// lib/styles/theme.ts
export const theme = {
  colors: {
    primary: {
      50: '#f0f9ff',
      100: '#e0f2fe',
      // ... escala completa
      900: '#0c4a6e'
    },
    secondary: {
      // ... escala de colores
    },
    accent: {
      // ... colores de acento
    }
  },
  typography: {
    fonts: {
      sans: 'Inter',
      mono: 'Fira Code'
    },
    sizes: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem'
    }
  },
  spacing: {
    unit: 4,
    scale: [0, 4, 8, 16, 24, 32, 48, 64, 96]
  },
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px'
  }
}