Executive Code: Asset Allocation
Asset Allocation Code Bonus Code
This code can be copied and pasted into Claude so the macroeconomic conditions from the Macro Economic Analysis can be analyzed in the context of the ideal asset allocation relative to the economic climate coming. Copy and paste into Claude and ask Claude to recreate the asset allocation artifact and run the application analyzing the United States.
———————————————————-
import React, { useState } from 'react';
import { TrendingUp, Target, PieChart, Brain, AlertCircle, CheckCircle, Zap, DollarSign, Database, FileText, Download } from 'lucide-react';
export default function AssetAllocationResearchPlatform() {
const [gameStage, setGameStage] = useState('intro');
const [country, setCountry] = useState('United States');
const [macroAnalysis, setMacroAnalysis] = useState(null);
const [portfolioRecommendation, setPortfolioRecommendation] = useState(null);
const [isProcessing, setIsProcessing] = useState(false);
const [error, setError] = useState(null);
const [apiKey, setApiKey] = useState('');
// Top 10 Accessible Asset Classes for Retail/Institutional Investors
const topAssetClasses = [
{
id: 'us_large_cap',
name: 'US Large-Cap Equities',
ticker: 'SPY',
description: 'S&P 500 stocks',
category: 'equities'
},
{
id: 'intl_developed',
name: 'International Developed Equities',
ticker: 'EFA',
description: 'MSCI EAFE',
category: 'equities'
},
{
id: 'emerging_markets',
name: 'Emerging Markets Equities',
ticker: 'EEM',
description: 'MSCI EM',
category: 'equities'
},
{
id: 'us_treasury',
name: 'US Treasury Bonds',
ticker: 'IEF',
description: '7-10 Year Treasuries',
category: 'bonds'
},
{
id: 'corp_bonds',
name: 'Investment-Grade Corporate Bonds',
ticker: 'LQD',
description: 'BBB and above',
category: 'bonds'
},
{
id: 'high_yield',
name: 'High-Yield Bonds',
ticker: 'HYG',
description: 'Junk bonds',
category: 'bonds'
},
{
id: 'reits',
name: 'Real Estate (REITs)',
ticker: 'VNQ',
description: 'Real estate investment trusts',
category: 'alternatives'
},
{
id: 'commodities',
name: 'Commodities',
ticker: 'DBC',
description: 'Gold, Oil, Agriculture',
category: 'alternatives'
},
{
id: 'tips',
name: 'TIPS (Inflation-Protected Bonds)',
ticker: 'TIP',
description: 'Treasury Inflation-Protected Securities',
category: 'bonds'
},
{
id: 'cash',
name: 'Cash & Money Market',
ticker: 'BIL',
description: 'T-Bills and cash equivalents',
category: 'cash'
}
];
const countries = [
'United States', 'United Kingdom', 'Germany', 'France', 'Japan',
'China', 'India', 'Brazil', 'Canada', 'Australia'
];
// Mock data for demonstration
const generateMockAnalysis = () => {
setIsProcessing(true);
setError(null);
setTimeout(() => {
// Mock macro analysis
const mockMacro = {
country: country,
analysisDate: new Date().toISOString().split('T')[0],
dataSources: ["FRED", "OECD", "Trading Economics"],
currentIndicators: {
tenYearYield: 4.25,
threeMonthYield: 5.35,
yieldSpread: -1.10,
creditSpread: 1.45,
inflation: 3.2,
unemployment: 3.7,
gdpGrowth: 2.1,
policyRate: 5.25,
debtToGDP: 123,
vix: 18.5
},
modelSignals: {
yieldCurve: "inverted",
probitRecessionProb: 45,
taylorRule: "too tight",
creditConditions: "stressed"
},
modelResults: {
yieldCurveAnalysis: "The yield curve is inverted by 110 basis points, historically a strong recession signal. This inversion has persisted for 6 months.",
probitRecessionProb: "Probit model indicates 45% recession probability within 12 months based on yield spread, credit conditions, and economic momentum.",
taylorRuleAnalysis: "Policy rate appears too tight relative to neutral rate. Central bank may need to ease if growth slows further.",
phillipsCurveInflation: "Phillips Curve suggests inflation will moderate to 2.8% over next 12 months as labor market cools.",
sovereignRiskAssessment: "Debt-to-GDP ratio elevated but manageable given reserve currency status and moderate inflation."
},
forecasts: {
"6month": {
recessionProb: 35,
inflationForecast: 3.0,
gdpGrowthForecast: 1.5,
rationale: "Near-term resilience expected but slowing"
},
"12month": {
recessionProb: 45,
inflationForecast: 2.8,
gdpGrowthForecast: 1.2,
rationale: "Increased recession risk as monetary lags bite"
}
},
economicRegime: "late-cycle",
marketEnvironment: "transitioning",
keyDrivers: ["Restrictive monetary policy", "Resilient labor market", "Declining inflation"],
keyRisks: ["Credit event risk", "Geopolitical tensions", "Policy error"],
bottomLine: "Economy is in late-cycle with elevated recession risk. Defensive positioning warranted while maintaining some risk exposure given continued growth momentum."
};
setMacroAnalysis(mockMacro);
setGameStage('assetAllocation');
// Mock portfolio recommendation
setTimeout(() => {
const mockPortfolio = {
portfolioAllocation: {
us_large_cap: 20,
intl_developed: 10,
emerging_markets: 5,
us_treasury: 25,
corp_bonds: 15,
high_yield: 5,
reits: 5,
commodities: 5,
tips: 5,
cash: 5
},
portfolioMetrics: {
expectedReturn: 6.2,
expectedVolatility: 9.8,
sharpeRatio: 0.45,
maxDrawdown: -15.2,
equityAllocation: 35,
bondAllocation: 50,
alternativeAllocation: 15
},
stressTestResults: {
crisis2008: -12.5,
inflationShock: -3.2,
currentRecessionScenario: -8.5
},
rationale: "Given late-cycle dynamics and inverted yield curve, portfolio is positioned defensively with 50% in fixed income and only 35% in equities. Treasury overweight provides recession hedge while maintaining some risk assets for continued growth scenario.",
keyInsights: [
"Underweight equities relative to 60/40 benchmark given recession risk",
"Overweight treasuries to benefit from potential rate cuts",
"Include TIPS and commodities for inflation protection",
"Maintain liquidity buffer with 5% cash allocation"
],
implementationNotes: [
"Rebalance quarterly or when any position drifts >5% from target",
"Consider tax-loss harvesting opportunities in taxable accounts",
"Maintain 3-6 months expenses in separate emergency fund",
"Monitor credit spreads weekly as recession indicator"
],
alternativeScenarios: {
ifRecessionDeepens: "Increase treasuries to 35%, reduce equities to 25%, add to cash",
ifInflationAccelerates: "Increase commodities and TIPS to 10% each, reduce long bonds",
ifMarketsRally: "Gradually increase equity allocation to 45%, reduce cash to 2%"
},
riskWarnings: [
"Portfolio may underperform if soft landing achieved",
"Duration risk if inflation reaccelerates unexpectedly",
"Currency risk from international exposures"
],
bottomLine: "Investors should position defensively given late-cycle risks but maintain diversification. This balanced approach provides downside protection while participating in continued growth."
};
setPortfolioRecommendation(mockPortfolio);
setGameStage('results');
setIsProcessing(false);
}, 2000);
}, 3000);
};
const resetAnalysis = () => {
setGameStage('intro');
setMacroAnalysis(null);
setPortfolioRecommendation(null);
setError(null);
};
const exportReport = () => {
const report = {
generatedDate: new Date().toISOString(),
country: country,
macroAnalysis: macroAnalysis,
portfolioRecommendation: portfolioRecommendation
};
const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `asset-allocation-research-${country.toLowerCase().replace(' ', '-')}-${new Date().toISOString().split('T')[0]}.json`;
a.click();
};
return (
<div className="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 p-4 md:p-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="text-center mb-8">
<h1 className="text-4xl md:text-6xl font-bold text-white mb-3 flex items-center justify-center gap-3">
<Target className="w-12 h-12 text-pink-400" />
Professional Asset Allocation Research
</h1>
<p className="text-pink-200 text-lg mb-2">
Institutional-Grade Portfolio Construction Using Validated Econometric Models
</p>
<div className="mt-3 flex items-center justify-center gap-3 flex-wrap">
<div className="bg-green-500 bg-opacity-20 px-4 py-2 rounded-lg text-white text-sm font-medium">
<span className="inline-block w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
Real-Time Economic Data
</div>
<div className="bg-blue-500 bg-opacity-20 px-4 py-2 rounded-lg text-white text-sm font-medium">
<span className="inline-block w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
5 Econometric Models
</div>
<div className="bg-purple-500 bg-opacity-20 px-4 py-2 rounded-lg text-white text-sm font-medium">
<span className="inline-block w-2 h-2 bg-purple-400 rounded-full mr-2"></span>
10 Liquid Asset Classes
</div>
</div>
</div>
{error && (
<div className="bg-red-100 border-2 border-red-400 rounded-lg p-4 mb-6">
<p className="text-red-800 font-medium">{error}</p>
</div>
)}
{/* STAGE 1: Introduction & Setup */}
{gameStage === 'intro' && (
<div className="bg-white rounded-2xl shadow-2xl p-8">
<h2 className="text-3xl font-bold text-gray-800 mb-6">Research Setup</h2>
<div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6 mb-8">
<h3 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
<Brain className="w-5 h-5 text-purple-600" />
Research Methodology
</h3>
<div className="space-y-3 text-gray-700">
<p><strong>Phase 1: Macro Analysis</strong> - Apply 5 validated econometric models (Yield Curve, Probit Recession, Taylor Rule, Phillips Curve, Sovereign Risk) using real-time data</p>
<p><strong>Phase 2: Asset Allocation</strong> - Generate optimal portfolio across 10 liquid asset classes using regime-adjusted MPT, stress testing, and risk management</p>
<p><strong>Output:</strong> Institutional-grade research report with specific allocation recommendations and implementation guidance</p>
</div>
</div>
<div className="bg-yellow-50 border-2 border-yellow-300 rounded-lg p-4 mb-6">
<h3 className="font-bold text-gray-800 mb-2">🎯 10 Recommended Asset Classes</h3>
<div className="grid md:grid-cols-2 gap-2 text-sm">
{topAssetClasses.map(asset => (
<div key={asset.id} className="flex items-center gap-2">
<span className={`w-2 h-2 rounded-full ${
asset.category === 'equities' ? 'bg-blue-500' :
asset.category === 'bonds' ? 'bg-green-500' :
asset.category === 'alternatives' ? 'bg-orange-500' : 'bg-gray-500'
}`}></span>
<span className="text-gray-700">{asset.name} ({asset.ticker})</span>
</div>
))}
</div>
</div>
<div className="space-y-4 mb-8">
<div>
<label className="block text-gray-700 font-semibold mb-2">
Country/Region to Analyze:
</label>
<select
value={country}
onChange={(e) => setCountry(e.target.value)}
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg text-lg focus:outline-none focus:border-purple-500"
>
{countries.map(c => <option key={c} value={c}>{c}</option>)}
</select>
</div>
</div>
<button
onClick={generateMockAnalysis}
disabled={isProcessing}
className="w-full py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl font-bold text-xl hover:from-purple-700 hover:to-pink-700 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg transition-all"
>
{isProcessing ? (
<span className="flex items-center justify-center gap-3">
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
Running Full Research Analysis...
</span>
) : (
'Generate Complete Research Report →'
)}
</button>
<p className="text-sm text-gray-500 text-center mt-4">
Note: This is a demonstration version using simulated data
</p>
</div>
)}
{/* STAGE 2: Loading - Show Progress */}
{gameStage === 'assetAllocation' && (
<div className="bg-white rounded-2xl shadow-2xl p-12 text-center">
<div className="animate-spin rounded-full h-16 w-16 border-b-4 border-purple-600 mx-auto mb-6"></div>
<h2 className="text-2xl font-bold text-gray-800 mb-3">Running Asset Allocation Optimization...</h2>
<p className="text-gray-600 mb-4">Macro analysis complete. Now generating optimal portfolio...</p>
<div className="bg-blue-50 rounded-lg p-4 max-w-md mx-auto">
<p className="text-sm text-gray-700">
✓ Economic models analyzed<br/>
⏳ Applying regime-based adjustments<br/>
⏳ Running stress tests<br/>
⏳ Calculating optimal weights
</p>
</div>
</div>
)}
{/* STAGE 3: Results */}
{gameStage === 'results' && macroAnalysis && portfolioRecommendation && (
<div className="space-y-6">
{/* Executive Summary Card */}
<div className="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl shadow-2xl p-8 text-white">
<h2 className="text-3xl font-bold mb-4 flex items-center gap-3">
<FileText className="w-8 h-8" />
Executive Summary: {macroAnalysis.country}
</h2>
<div className="grid md:grid-cols-3 gap-6 mb-6">
<div>
<p className="text-purple-200 text-sm mb-1">Economic Regime</p>
<p className="text-2xl font-bold capitalize">{macroAnalysis.economicRegime}</p>
</div>
<div>
<p className="text-purple-200 text-sm mb-1">12M Recession Risk</p>
<p className="text-2xl font-bold">{macroAnalysis.modelSignals.probitRecessionProb?.toFixed(1)}%</p>
</div>
<div>
<p className="text-purple-200 text-sm mb-1">Policy Stance</p>
<p className="text-2xl font-bold capitalize">{macroAnalysis.modelSignals.taylorRule}</p>
</div>
</div>
<div className="bg-white bg-opacity-20 rounded-lg p-4">
<p className="font-semibold mb-2">Bottom Line:</p>
<p className="leading-relaxed">{macroAnalysis.bottomLine}</p>
</div>
</div>
{/* Portfolio Allocation */}
<div className="bg-white rounded-2xl shadow-2xl p-6">
<h3 className="text-2xl font-bold text-gray-800 mb-6">Recommended Portfolio Allocation</h3>
<div className="grid md:grid-cols-4 gap-4 mb-6 bg-gradient-to-r from-green-50 to-blue-50 rounded-lg p-4">
<div>
<p className="text-gray-600 text-sm">Expected Return</p>
<p className="text-3xl font-bold text-gray-800">{portfolioRecommendation.portfolioMetrics.expectedReturn?.toFixed(2)}%</p>
</div>
<div>
<p className="text-gray-600 text-sm">Expected Volatility</p>
<p className="text-3xl font-bold text-gray-800">{portfolioRecommendation.portfolioMetrics.expectedVolatility?.toFixed(2)}%</p>
</div>
<div>
<p className="text-gray-600 text-sm">Sharpe Ratio</p>
<p className="text-3xl font-bold text-gray-800">{portfolioRecommendation.portfolioMetrics.sharpeRatio?.toFixed(2)}</p>
</div>
<div>
<p className="text-gray-600 text-sm">Max Drawdown</p>
<p className="text-3xl font-bold text-red-600">{portfolioRecommendation.portfolioMetrics.maxDrawdown?.toFixed(1)}%</p>
</div>
</div>
<div className="space-y-4 mb-6">
{Object.entries(portfolioRecommendation.portfolioAllocation)
.sort((a, b) => b[1] - a[1])
.map(([assetId, percentage]) => {
const asset = topAssetClasses.find(a => a.id === assetId);
if (!asset || percentage === 0) return null;
return (
<div key={assetId} className="relative">
<div className="flex justify-between items-center mb-2">
<div className="flex items-center gap-3">
<span className={`w-3 h-3 rounded-full ${
asset.category === 'equities' ? 'bg-blue-500' :
asset.category === 'bonds' ? 'bg-green-500' :
asset.category === 'alternatives' ? 'bg-orange-500' : 'bg-gray-500'
}`}></span>
<div>
<span className="font-semibold text-gray-800">{asset.name}</span>
<span className="text-sm text-gray-600 ml-2">({asset.ticker})</span>
</div>
</div>
<span className="font-bold text-purple-600 text-lg">{percentage.toFixed(1)}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
<div
className={`h-4 rounded-full transition-all duration-500 ${
asset.category === 'equities' ? 'bg-gradient-to-r from-blue-500 to-blue-600' :
asset.category === 'bonds' ? 'bg-gradient-to-r from-green-500 to-green-600' :
asset.category === 'alternatives' ? 'bg-gradient-to-r from-orange-500 to-orange-600' :
'bg-gradient-to-r from-gray-500 to-gray-600'
}`}
style={{ width: `${percentage}%` }}
></div>
</div>
</div>
);
})}
</div>
<div className="grid md:grid-cols-3 gap-4 bg-slate-50 rounded-lg p-4">
<div>
<p className="text-sm text-gray-600">Total Equity</p>
<p className="text-xl font-bold text-blue-600">
{portfolioRecommendation.portfolioMetrics.equityAllocation?.toFixed(1)}%
</p>
</div>
<div>
<p className="text-sm text-gray-600">Total Fixed Income</p>
<p className="text-xl font-bold text-green-600">
{portfolioRecommendation.portfolioMetrics.bondAllocation?.toFixed(1)}%
</p>
</div>
<div>
<p className="text-sm text-gray-600">Total Alternatives</p>
<p className="text-xl font-bold text-orange-600">
{portfolioRecommendation.portfolioMetrics.alternativeAllocation?.toFixed(1)}%
</p>
</div>
</div>
</div>
{/* Stress Test Results */}
<div className="bg-white rounded-2xl shadow-2xl p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<Zap className="w-6 h-6 text-orange-600" />
Stress Test Results
</h3>
<div className="grid md:grid-cols-3 gap-4">
<div className="bg-red-50 p-4 rounded-lg border-2 border-red-200">
<p className="text-sm text-gray-600 mb-2">2008-Style Crisis</p>
<p className={`text-3xl font-bold ${
portfolioRecommendation.stressTestResults.crisis2008 < 0 ? 'text-red-600' : 'text-green-600'
}`}>
{portfolioRecommendation.stressTestResults.crisis2008?.toFixed(1)}%
</p>
</div>
<div className="bg-orange-50 p-4 rounded-lg border-2 border-orange-200">
<p className="text-sm text-gray-600 mb-2">Inflation Shock</p>
<p className={`text-3xl font-bold ${
portfolioRecommendation.stressTestResults.inflationShock < 0 ? 'text-red-600' : 'text-green-600'
}`}>
{portfolioRecommendation.stressTestResults.inflationShock?.toFixed(1)}%
</p>
</div>
<div className="bg-yellow-50 p-4 rounded-lg border-2 border-yellow-200">
<p className="text-sm text-gray-600 mb-2">Current Recession Scenario</p>
<p className={`text-3xl font-bold ${
portfolioRecommendation.stressTestResults.currentRecessionScenario < 0 ? 'text-red-600' : 'text-green-600'
}`}>
{portfolioRecommendation.stressTestResults.currentRecessionScenario?.toFixed(1)}%
</p>
</div>
</div>
</div>
{/* Bottom Line */}
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-2xl p-8 text-white">
<h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
<TrendingUp className="w-7 h-7" />
Bottom Line: Investment Recommendation
</h3>
<p className="text-lg leading-relaxed font-medium">
{portfolioRecommendation.bottomLine}
</p>
</div>
{/* Action Buttons */}
<div className="flex gap-4">
<button
onClick={resetAnalysis}
className="flex-1 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl font-bold text-lg hover:from-purple-700 hover:to-pink-700 shadow-lg"
>
Run New Analysis
</button>
<button
onClick={exportReport}
className="px-8 py-4 bg-white border-2 border-purple-600 text-purple-600 rounded-xl font-bold text-lg hover:bg-purple-50 shadow-lg flex items-center gap-2"
>
<Download className="w-5 h-5" />
Export Report
</button>
</div>
</div>
)}
</div>
</div>
);
}