Files
ALwrity/docs/ALwrity Researcher/RESEARCH_COMPONENT_INTEGRATION.md

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