Related Questions - OmniSearches

OmniSearches automatically generates three related questions at the end of each search result, helping you discover new perspectives and dive deeper into topics.

Overview

Related questions are contextual follow-up queries that:

Build on your original search
Explore different aspects of the topic
Encourage deeper investigation
Provide instant one-click searching

Related questions are generated by the AI model during the search process and appear in all modes except Concise Mode.

How It Works

AI Generation

The AI model generates 3 related questions as part of its response:

[Main response content...]

RELATED_QUESTIONS:
1. [First related question]
2. [Second related question]
3. [Third related question]

Server Extraction

The server extracts questions using regex pattern matching:

const RELATED_QUESTIONS_REGEX = 
  /RELATED_QUESTIONS:\s*1\.\s*(.+?)\s*2\.\s*(.+?)\s*3\.\s*(.+)/s;

const matches = text.match(RELATED_QUESTIONS_REGEX);
const relatedQuestions = matches 
  ? [matches[1], matches[2], matches[3]] 
  : [];

Client Display

Questions are rendered as interactive cards that trigger new searches:

<RelatedQuestions 
  questions={relatedQuestions}
  onQuestionClick={(question) => handleNewSearch(question)}
/>

System Instructions

The AI receives explicit instructions to generate related questions:

Default Mode
Exhaustive Mode
Search Mode
Reasoning Mode

Your response must always end with at least 3 related questions in this format:

RELATED_QUESTIONS:
1. [First related question]
2. [Second related question]
3. [Third related question]

The related questions should be naturally connected to the user's query and
encourage exploration of the topic. Each question should be concise and
self-contained.

Your response must always end with at least 3 related questions in this format:

RELATED_QUESTIONS:
1. [First related question]
2. [Second related question]
3. [Third related question]

The related questions should be naturally connected to the user's query and
encourage exploration of the topic. Each question should be concise and
self-contained.

To enhance the user's research, conclude your response with three insightful
questions related to the search query:

RELATED_QUESTIONS:
1. [Question related to the search query]
2. [Question related to the search query]
3. [Question related to the search query]

Your response must always end with at least 3 related questions in this format:

RELATED_QUESTIONS:
1. [First related question]
2. [Second related question]
3. [Third related question]

The related questions should be naturally connected to the user's query and
encourage exploration of the topic. Each question should be concise and
self-contained.

Concise Mode does not generate related questions to maintain focus on quick, brief answers.

Implementation Details

Server-Side Processing

// From server/routes.ts

const RELATED_QUESTIONS_REGEX = 
  /RELATED_QUESTIONS:\s*1\.\s*(.+?)\s*2\.\s*(.+?)\s*3\.\s*(.+)/s;

async function extractAndRemoveRelatedQuestionsAndImages(text: string) {
  // Extract questions using regex
  const matches = text.match(RELATED_QUESTIONS_REGEX);
  const relatedQuestions = matches ? [matches[1], matches[2], matches[3]] : [];
  
  // Remove questions from main text
  let cleanText = text
    .replace(RELATED_QUESTIONS_REGEX, '')
    .trim();
  
  return { cleanText, relatedQuestions, images };
}

// Usage in search endpoint
const text = response.text();
const { cleanText, relatedQuestions, images } = 
  await extractAndRemoveRelatedQuestionsAndImages(text);

res.json({
  sessionId,
  summary: await formatResponseToMarkdown(cleanText),
  sources,
  relatedQuestions,  // Sent to client
  images,
});

Client-Side Component

// From client/src/components/RelatedQuestions.tsx

import { HelpCircle, ArrowRight, Plus } from 'lucide-react';
import { motion } from 'framer-motion';

interface RelatedQuestionsProps {
  questions: string[];
  onQuestionClick: (question: string) => void;
}

export default function RelatedQuestions({ 
  questions, 
  onQuestionClick 
}: RelatedQuestionsProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      {/* Header */}
      <div className="flex items-center gap-2 pb-4 border-b">
        <HelpCircle className="h-4 w-4" />
        <h2 className="text-xl font-semibold">Related Questions</h2>
      </div>

      {/* Questions List */}
      {questions.map((question, index) => (
        <motion.button
          key={index}
          initial={{ opacity: 0, x: -10 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: index * 0.1 }}  // Staggered animation
          onClick={() => onQuestionClick(question)}
          className="group flex items-center w-full gap-4 py-3 px-4
                     hover:bg-gray-50 dark:hover:bg-gray-800
                     transition-all duration-200"
        >
          <Plus className="w-3.5 h-3.5" />
          <span className="flex-1 text-lg font-semibold">
            {question}
          </span>
          <ArrowRight className="w-3.5 h-3.5 opacity-0 group-hover:opacity-100" />
        </motion.button>
      ))}
    </motion.div>
  );
}

UI Features

Visual Design

Header Section

Help circle icon
“Related Questions” title
Bottom border separator

Question Cards

Plus icon on left
Question text in center
Arrow icon on right (appears on hover)
Full-width clickable area

Animations

Container
Questions
Hover Effects

// Fade in from bottom
<motion.div
  initial={{ opacity: 0, y: 10 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>

// Staggered slide-in from left
<motion.button
  initial={{ opacity: 0, x: -10 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{ delay: index * 0.1 }}  // 100ms delay between each
>

/* Arrow slides in from left on hover */
.arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition: all 200ms;
}

.group:hover .arrow {
  opacity: 100;
  transform: translateX(0);
}

Responsive Design

// Font sizes adapt to screen size
className="md:text-xl text-lg"        // Header
className="md:text-lg text-md"        // Questions

Dark Mode Support

/* Colors automatically adapt */
border-gray-300 dark:border-gray-600              /* Borders */
text-gray-500 dark:text-gray-400                  /* Text */
hover:bg-gray-50 dark:hover:bg-gray-800          /* Hover */
text-foreground/90 dark:text-white/90            /* Headers */

Interaction Behavior

Click Handler

// When user clicks a question
const handleQuestionClick = (question: string) => {
  // 1. Set the question as new search query
  setQuery(question);
  
  // 2. Trigger new search with same mode
  handleSearch(question);
  
  // 3. Scroll to top to show results
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

<RelatedQuestions
  questions={relatedQuestions}
  onQuestionClick={handleQuestionClick}
/>

Accessibility

Semantic HTML

Uses <button> elements (not divs) for proper keyboard navigation
Includes aria-label for screen readers

<button aria-label="Explore related question: ${question}">

Keyboard Navigation

Screen Reader Support

Example Scenarios

General Query
Product Comparison
Location Search
Technical Topic

User Query:

What are the benefits of meditation?

Related Questions:

How long should I meditate each day as a beginner?
What are the different types of meditation practices?
Can meditation help with anxiety and stress management?

Pattern: Questions progress from what → how → specific applications

User Query:

Compare iPhone 14 and Samsung Galaxy S23

Related Questions:

Which phone has better camera quality for photography?
How does battery life compare between the two models?
What are the main differences in the operating systems?

Pattern: Questions drill into specific comparison dimensions

User Query:

Best things to do in Tokyo

Related Questions:

What are the must-visit neighborhoods in Tokyo?
How much does a typical day in Tokyo cost for tourists?
What is the best time of year to visit Tokyo?

Pattern: Questions expand on practical travel planning aspects

User Query:

Explain quantum computing

Related Questions:

What are the practical applications of quantum computers today?
How does quantum computing differ from classical computing?
What companies are leading quantum computing research?

Pattern: Questions move from applications → fundamentals → current state

Question Quality Guidelines

The AI generates questions that are:

Naturally Connected

Questions flow logically from the original query and response content

Self-Contained

Each question makes sense independently without requiring context

Concise

Questions are brief and to the point (usually 8-15 words)

Diverse

Questions explore different aspects rather than repeating similar angles

Actionable

Questions can be directly searched to get useful answers

Exploratory

Questions encourage deeper investigation of the topic

Mode Availability

Mode	Related Questions	Typical Quality
Concise	❌ Not included	N/A
Default	✅ 3 questions	High
Exhaustive	✅ 3 questions	Very High
Search	✅ 3 questions	High (resource-focused)
Reasoning	✅ 3 questions	Very High (strategic)

Exhaustive and Reasoning modes often generate higher-quality related questions due to deeper analysis of the topic.

Internationalization

Related questions support multiple languages:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

// Display header in user's language
<h2>{t('related.title')}</h2>

// Questions themselves are in the language of the search results

The AI generates questions in the same language as the main response:

// If language specified in request
const queryWithLanguage = language 
  ? `${query} (Please respond in ${language}` 
  : query;

API Response Format

// Search endpoint response
{
  "sessionId": "abc123",
  "summary": "<formatted response HTML>",
  "sources": [...],
  "relatedQuestions": [
    "What are the main criticisms of this approach?",
    "How has this evolved over time?",
    "What are the alternatives to consider?"
  ],
  "images": [...]
}

Type Definitions

interface SearchResponse {
  sessionId: string;
  summary: string;  // HTML formatted
  sources: Array<{
    title: string;
    url: string;
    snippet: string;
  }>;
  relatedQuestions: string[];  // Always 3 items
  images: Array<{
    url: string;
    caption: string;
    alt: string;
  }>;
}

Best Practices

For Users

Explore Systematically

Click through related questions in order to progressively deepen your understanding

Combine with Follow-Ups

Use related questions as starting points, then ask follow-up questions in the session

Compare Modes

Try the same query in different modes to see how question quality varies

For Developers

Handle Missing Questions

Always check if questions array is empty before rendering:

{relatedQuestions.length > 0 && (
  <RelatedQuestions questions={relatedQuestions} />
)}

Preserve Context

When a related question is clicked, maintain the search mode and other settings

Track Analytics

Log which related questions users click to understand exploration patterns

Troubleshooting

No questions appearing

Check that:

Mode is not Concise (which doesn’t generate questions)
AI response includes RELATED_QUESTIONS: section
Regex pattern matches the response format
Client receives relatedQuestions array from API

Questions are low quality

Consider:

Using Exhaustive or Reasoning mode for better questions
Refining your original query to be more specific
Checking that the AI has enough context from search results

Questions not clickable

Verify:

onQuestionClick handler is properly connected
Button elements are not disabled
JavaScript is enabled
No CSS preventing pointer events

Future Enhancements

Question Voting

Allow users to upvote helpful questions to improve AI question generation

Question Categories

Organize questions by type (deeper dive, related topics, comparisons)

Question History

Track and display previously explored questions in the session

Search Modes

Learn which modes generate related questions

Image Search

Another AI-generated enhancement to search results

Follow-Up Questions

Continue conversations with manual follow-up queries

Get Started

Features

Configuration

Development

​Overview

​How It Works

​System Instructions

​Implementation Details

​Server-Side Processing

​Client-Side Component

​UI Features

​Visual Design

Header Section

Question Cards

​Animations

​Responsive Design

​Dark Mode Support

​Interaction Behavior

​Click Handler

​Accessibility

​Example Scenarios

​Question Quality Guidelines

Naturally Connected

Self-Contained

Concise

Diverse

Actionable

Exploratory

​Mode Availability

​Internationalization

​API Response Format

​Best Practices

​For Users

​For Developers

​Troubleshooting

​Future Enhancements

Question Voting

More Questions

Question Categories

Question History

​Related Features

Search Modes

Image Search

Follow-Up Questions

Build docs developers (and LLMs) love

Overview

How It Works

System Instructions

Implementation Details

Server-Side Processing

Client-Side Component

UI Features

Visual Design

Animations

Responsive Design

Dark Mode Support

Interaction Behavior

Click Handler

Accessibility

Example Scenarios

Question Quality Guidelines

Mode Availability

Internationalization

API Response Format

Best Practices

For Users

For Developers

Troubleshooting

Future Enhancements

Related Features