493 lines
11 KiB
Markdown
493 lines
11 KiB
Markdown
# Research Component Integration Guide
|
|
|
|
**Date**: 2025-01-29
|
|
**Status**: Updated for Intent-Driven Research Architecture
|
|
|
|
---
|
|
|
|
## 📋 Overview
|
|
|
|
The Research component is a standalone, intent-driven research system that can be integrated into any part of the application. This guide explains how to integrate and use the Research component.
|
|
|
|
**Key Features**:
|
|
- Intent-driven research (AI infers user goals)
|
|
- Standalone and reusable
|
|
- 3-step wizard interface
|
|
- Provider optimization (Exa → Tavily → Google)
|
|
- Research persona integration
|
|
- Google Trends integration
|
|
|
|
---
|
|
|
|
## 🏗️ Architecture
|
|
|
|
### Intent-Driven Research Flow
|
|
|
|
```
|
|
User Input
|
|
↓
|
|
UnifiedResearchAnalyzer (Single AI Call)
|
|
├── Intent Inference
|
|
├── Query Generation
|
|
└── Parameter Optimization
|
|
↓
|
|
Research Execution (Exa → Tavily → Google)
|
|
↓
|
|
IntentAwareAnalyzer
|
|
├── Result Analysis
|
|
└── Deliverable Extraction
|
|
↓
|
|
IntentDrivenResearchResult
|
|
```
|
|
|
|
### Component Structure
|
|
|
|
```
|
|
frontend/src/components/Research/
|
|
├── ResearchWizard.tsx # Main wizard orchestrator
|
|
├── steps/
|
|
│ ├── ResearchInput.tsx # Step 1: Input + Intent & Options
|
|
│ ├── StepProgress.tsx # Step 2: Progress/polling
|
|
│ ├── StepResults.tsx # Step 3: Results display
|
|
│ └── components/ # Sub-components
|
|
├── hooks/
|
|
│ ├── useResearchWizard.ts # Wizard state management
|
|
│ ├── useResearchExecution.ts # API calls and polling
|
|
│ └── useIntentResearch.ts # Intent-driven research flow
|
|
└── types/
|
|
├── research.types.ts # Wizard state types
|
|
└── intent.types.ts # Intent-driven types
|
|
```
|
|
|
|
---
|
|
|
|
## 🔌 Integration
|
|
|
|
### Basic Integration
|
|
|
|
```typescript
|
|
import { ResearchWizard } from '../components/Research';
|
|
|
|
function MyComponent() {
|
|
return (
|
|
<ResearchWizard
|
|
onComplete={(results) => {
|
|
console.log('Research complete:', results);
|
|
// Use results in your component
|
|
}}
|
|
onCancel={() => {
|
|
console.log('Research cancelled');
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
### With Initial Data
|
|
|
|
```typescript
|
|
<ResearchWizard
|
|
initialKeywords={['AI marketing tools']}
|
|
initialIndustry="Technology"
|
|
initialTargetAudience="Marketing professionals"
|
|
initialResearchMode="comprehensive"
|
|
initialConfig={{
|
|
provider: 'exa',
|
|
max_sources: 20,
|
|
include_statistics: true,
|
|
include_expert_quotes: true
|
|
}}
|
|
initialResults={savedResults} // For restoring saved projects
|
|
/>
|
|
```
|
|
|
|
### Blog Writer Integration
|
|
|
|
```typescript
|
|
import { BlogWriterAdapter } from '../components/Research/integrations/BlogWriterAdapter';
|
|
|
|
function BlogWriter() {
|
|
const [researchData, setResearchData] = useState(null);
|
|
|
|
return (
|
|
<>
|
|
<BlogWriterAdapter
|
|
onResearchComplete={(data) => {
|
|
setResearchData(data);
|
|
// Use research data for blog generation
|
|
}}
|
|
/>
|
|
{/* Rest of blog writer UI */}
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🔄 Research Flow
|
|
|
|
### Step 1: Research Input
|
|
|
|
**User provides**:
|
|
- Keywords/topic
|
|
- Industry (optional, pre-filled from persona)
|
|
- Target audience (optional, pre-filled from persona)
|
|
|
|
**Component triggers**:
|
|
- Intent analysis when user clicks "Intent & Options"
|
|
- Shows `IntentConfirmationPanel` with AI-inferred intent
|
|
|
|
### Step 2: Intent Confirmation
|
|
|
|
**User reviews**:
|
|
- Primary research question
|
|
- Generated research queries
|
|
- Optimized provider settings
|
|
- Google Trends keywords (if applicable)
|
|
|
|
**User can**:
|
|
- Edit primary question
|
|
- Toggle deliverables
|
|
- Select/edit queries
|
|
- Review provider settings
|
|
|
|
**Component executes**:
|
|
- Research with selected queries
|
|
- Shows progress
|
|
- Auto-navigates to results
|
|
|
|
### Step 3: Results Display
|
|
|
|
**Component shows**:
|
|
- Summary tab (AI-generated overview)
|
|
- Deliverables tab (statistics, quotes, case studies, trends)
|
|
- Sources tab (citations with credibility scores)
|
|
- Analysis tab (deep insights)
|
|
|
|
---
|
|
|
|
## 🔌 API Integration
|
|
|
|
### Intent Analysis Endpoint
|
|
|
|
```typescript
|
|
POST /api/research/intent/analyze
|
|
|
|
Request:
|
|
{
|
|
"keywords": "AI marketing tools",
|
|
"industry": "Technology",
|
|
"target_audience": "Marketing professionals"
|
|
}
|
|
|
|
Response:
|
|
{
|
|
"success": true,
|
|
"intent": {
|
|
"primary_question": "What are the latest AI-powered marketing automation tools?",
|
|
"research_goals": ["identify tools", "compare features", "analyze trends"],
|
|
"deliverables": ["statistics", "expert_quotes", "case_studies"],
|
|
"industry": "Technology",
|
|
"target_audience": "Marketing professionals"
|
|
},
|
|
"queries": [
|
|
{
|
|
"query": "AI marketing automation platforms 2025",
|
|
"provider": "exa",
|
|
"justification": "Exa is best for finding company/product information"
|
|
}
|
|
],
|
|
"optimized_config": {
|
|
"provider": "exa",
|
|
"exa_category": "company",
|
|
"provider_justification": "Exa excels at finding company and product information"
|
|
},
|
|
"trends_config": {
|
|
"keywords": ["AI marketing", "marketing automation"],
|
|
"enabled": true
|
|
}
|
|
}
|
|
```
|
|
|
|
### Intent-Driven Research Endpoint
|
|
|
|
```typescript
|
|
POST /api/research/intent/research
|
|
|
|
Request:
|
|
{
|
|
"intent": {...},
|
|
"queries": [...],
|
|
"config": {...}
|
|
}
|
|
|
|
Response:
|
|
{
|
|
"success": true,
|
|
"result": {
|
|
"summary": "Comprehensive overview...",
|
|
"deliverables": {
|
|
"statistics": [
|
|
{
|
|
"value": "85%",
|
|
"description": "of marketers use AI tools",
|
|
"citation": {...}
|
|
}
|
|
],
|
|
"expert_quotes": [...],
|
|
"case_studies": [...],
|
|
"trends": [...]
|
|
},
|
|
"sources": [...],
|
|
"analysis": "Deep insights based on intent..."
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Customization
|
|
|
|
### Custom Styling
|
|
|
|
```typescript
|
|
import { ResearchWizard } from '../components/Research';
|
|
import { ThemeProvider, createTheme } from '@mui/material';
|
|
|
|
const customTheme = createTheme({
|
|
// Your custom theme
|
|
});
|
|
|
|
<ThemeProvider theme={customTheme}>
|
|
<ResearchWizard {...props} />
|
|
</ThemeProvider>
|
|
```
|
|
|
|
### Custom Hooks
|
|
|
|
```typescript
|
|
import { useResearchWizard, useResearchExecution } from '../components/Research';
|
|
|
|
function CustomResearchComponent() {
|
|
const wizard = useResearchWizard();
|
|
const execution = useResearchExecution();
|
|
|
|
// Custom logic here
|
|
return <div>Custom UI</div>;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 Backend Services
|
|
|
|
### UnifiedResearchAnalyzer
|
|
|
|
**Location**: `backend/services/research/intent/unified_research_analyzer.py`
|
|
|
|
**Purpose**: Single AI call for intent inference, query generation, and parameter optimization
|
|
|
|
**Usage**:
|
|
```python
|
|
from backend.services.research.intent.unified_research_analyzer import UnifiedResearchAnalyzer
|
|
|
|
analyzer = UnifiedResearchAnalyzer()
|
|
result = await analyzer.analyze(
|
|
user_input="AI marketing tools",
|
|
industry="Technology",
|
|
target_audience="Marketing professionals",
|
|
user_id="user_123"
|
|
)
|
|
```
|
|
|
|
### IntentAwareAnalyzer
|
|
|
|
**Location**: `backend/services/research/intent/intent_aware_analyzer.py`
|
|
|
|
**Purpose**: Analyzes raw research results based on user intent
|
|
|
|
**Usage**:
|
|
```python
|
|
from backend.services.research.intent.intent_aware_analyzer import IntentAwareAnalyzer
|
|
|
|
analyzer = IntentAwareAnalyzer()
|
|
result = await analyzer.analyze(
|
|
raw_results={...},
|
|
intent=research_intent,
|
|
user_id="user_123"
|
|
)
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Type Definitions
|
|
|
|
### Research Types
|
|
|
|
```typescript
|
|
// research.types.ts
|
|
export interface WizardState {
|
|
currentStep: number;
|
|
keywords: string[];
|
|
industry: string;
|
|
target_audience: string;
|
|
research_mode: ResearchMode;
|
|
config: ResearchConfig;
|
|
results: BlogResearchResponse | null;
|
|
}
|
|
|
|
export interface ResearchWizardProps {
|
|
onComplete?: (results: BlogResearchResponse) => void;
|
|
onCancel?: () => void;
|
|
initialKeywords?: string[];
|
|
initialIndustry?: string;
|
|
initialTargetAudience?: string;
|
|
initialResearchMode?: ResearchMode;
|
|
initialConfig?: ResearchConfig;
|
|
initialResults?: BlogResearchResponse | null;
|
|
}
|
|
```
|
|
|
|
### Intent Types
|
|
|
|
```typescript
|
|
// intent.types.ts
|
|
export interface ResearchIntent {
|
|
primary_question: string;
|
|
research_goals: string[];
|
|
deliverables: string[];
|
|
industry: string;
|
|
target_audience: string;
|
|
}
|
|
|
|
export interface ResearchQuery {
|
|
query: string;
|
|
provider: 'exa' | 'tavily' | 'google';
|
|
justification?: string;
|
|
}
|
|
|
|
export interface IntentDrivenResearchResult {
|
|
summary: string;
|
|
deliverables: {
|
|
statistics: StatisticWithCitation[];
|
|
expert_quotes: ExpertQuote[];
|
|
case_studies: CaseStudySummary[];
|
|
trends: TrendAnalysis[];
|
|
};
|
|
sources: Source[];
|
|
analysis: string;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🧪 Testing
|
|
|
|
### Standalone Testing
|
|
|
|
Navigate to `/research-test` for isolated testing:
|
|
- Test research flow
|
|
- Debug intent analysis
|
|
- Review results
|
|
- Export data
|
|
|
|
### Integration Testing
|
|
|
|
1. Import `ResearchWizard` in your component
|
|
2. Test with various initial data
|
|
3. Verify `onComplete` callback
|
|
4. Check error handling
|
|
|
|
---
|
|
|
|
## 🚀 Best Practices
|
|
|
|
### 1. Always Provide Initial Data When Available
|
|
|
|
```typescript
|
|
// Good: Pre-fill from user data
|
|
<ResearchWizard
|
|
initialIndustry={userProfile.industry}
|
|
initialTargetAudience={userProfile.targetAudience}
|
|
/>
|
|
|
|
// Avoid: Empty wizard when data is available
|
|
<ResearchWizard />
|
|
```
|
|
|
|
### 2. Handle Results Properly
|
|
|
|
```typescript
|
|
<ResearchWizard
|
|
onComplete={(results) => {
|
|
// Save results
|
|
saveResearchResults(results);
|
|
|
|
// Use in your component
|
|
setResearchData(results);
|
|
|
|
// Navigate if needed
|
|
navigate('/blog-writer', { state: { research: results } });
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### 3. Use Research Persona
|
|
|
|
```typescript
|
|
// Research persona automatically pre-fills:
|
|
// - Industry
|
|
// - Target audience
|
|
// - Research preferences
|
|
// - Provider settings
|
|
|
|
// No additional code needed - it's automatic!
|
|
```
|
|
|
|
---
|
|
|
|
## 🔄 Migration from Old Architecture
|
|
|
|
### Old Architecture (Deprecated)
|
|
- 4-step wizard (StepKeyword → StepOptions → StepProgress → StepResults)
|
|
- Strategy pattern (Basic/Comprehensive/Targeted modes)
|
|
- Rule-based parameter optimization
|
|
|
|
### New Architecture
|
|
- 3-step wizard (ResearchInput → StepProgress → StepResults)
|
|
- Intent-driven (AI infers intent)
|
|
- Unified AI analyzer (single call)
|
|
- AI-optimized parameters
|
|
|
|
### Migration Steps
|
|
1. Replace old wizard components with `ResearchWizard`
|
|
2. Remove mode selection UI (handled by AI)
|
|
3. Update API calls to use intent-driven endpoints
|
|
4. Update result handling for new result structure
|
|
|
|
---
|
|
|
|
## 📚 Additional Resources
|
|
|
|
- **Architecture Rules**: `.cursor/rules/researcher-architecture.mdc`
|
|
- **Implementation Guide**: `RESEARCH_WIZARD_IMPLEMENTATION.md`
|
|
- **Intent-Driven Guide**: `INTENT_DRIVEN_RESEARCH_GUIDE.md`
|
|
- **Current Architecture**: `CURRENT_ARCHITECTURE_OVERVIEW.md`
|
|
|
|
---
|
|
|
|
## ✅ Implementation Status
|
|
|
|
- ✅ Intent-driven research implemented
|
|
- ✅ UnifiedResearchAnalyzer working
|
|
- ✅ IntentAwareAnalyzer working
|
|
- ✅ Google Trends integrated
|
|
- ✅ Research persona integrated
|
|
- ✅ My Projects feature (auto-save)
|
|
- ✅ Component refactoring complete
|
|
|
|
---
|
|
|
|
**Status**: Current and Accurate
|