com.thechrisgrey/mcp icon

mcp

by Thechrisgrey.com

com.thechrisgrey/mcp

Search Christian Perez's blog, read posts, and ask about his work, podcast, and writing.

Version 1.0.0
Search
Remote (HTTP)
View source

mcp · v1.0.0

by Thechrisgrey.com

39

thechrisgrey.com

Personal website for Christian Perez (@thechrisgrey) | Founder & CEO of Altivum Inc. | Former Green Beret (18D Special Forces Medical Sergeant) | Bronze Star Recipient | Host of The Vector Podcast | Author of "Beyond the Assessment"

https://thechrisgrey.com

Table of Contents

Technology Stack

Layer Technology
Frontend React 18, TypeScript 5, Vite 5
Styling Tailwind CSS 3.4 (custom design system)
Routing React Router v6
CMS Sanity.io (blog content)
AI Chat Amazon Bedrock (Claude Haiku 4.5) + RAG
Auth Amazon Cognito (admin panel)
Hosting AWS Amplify
CDN/Analytics Cloudflare Web Analytics
Testing Vitest + React Testing Library + Cypress
Code Quality ESLint, strict TypeScript

Features

Pages

  • Home : Scroll-based animations with sticky profile sections
  • About : Personal biography and military background
  • Altivum Inc : Company showcase and services
  • The Vector Podcast : YouTube embeds, Spotify player, collapsible episode list
  • Beyond the Assessment : Book information and purchase links
  • Blog : Sanity CMS-powered with categories, tags, series, and reading progress
  • AI Chat : Full-viewport conversational AI with RAG-enhanced responses
  • Claude : AWS certifications and Claude expertise showcase
  • AWS : AWS partnership and community builder profile
  • Admin : Cognito-authenticated KB management and site health dashboard
  • Links : Linktree-style quick links
  • Contact : Contact form, speaking topics, downloadable press kit

Technical Highlights

  • SEO : JSON-LD structured data, Open Graph, dynamic sitemap, RSS feed
  • AI Chat with RAG : Bedrock Knowledge Base retrieval with streaming responses
  • Podcast Auto-Sync : YouTube Data API fetches episodes at build time
  • Chat Widget : Floating chat widget available across all pages
  • Metrics Dashboard : CloudWatch and DynamoDB-backed operational metrics
  • Error Boundaries : Page-level error handling with custom fallback UIs
  • Accessibility : Focus trapping, keyboard navigation, ARIA labels, skip links
  • Performance : Image optimization (Sharp/SVGO), lazy loading, code splitting, manual chunking

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        FRONTEND (React)                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐           │
│  │   Home   │ │  Podcast │ │   Blog   │ │   Chat   │   ...     │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘           │
└─────────────────────────────────────────────────────────────────┘
        │               │              │              │
        ▼               ▼              ▼              ▼
┌───────────┐   ┌───────────┐   ┌───────────┐   ┌───────────────┐
│  Amplify  │   │  YouTube  │   │  Sanity   │   │    Bedrock    │
│  Hosting  │   │  Data API │   │    CMS    │   │  + RAG (KB)   │
└───────────┘   └───────────┘   └───────────┘   └───────────────┘
                (build-time)     (runtime)       (Lambda stream)

AI Chat Request Flow

User Message
    │
    ▼
Lambda Function URL (streaming)
    │
    ├──> Bedrock Knowledge Base (retrieve context)
    │         │
    │         ▼
    │    S3 Vectors (autobiography chunks)
    │
    ├──> Bedrock Guardrails (content filtering)
    │
    └──> Bedrock ConverseStream API (Claude Haiku 4.5)
              │
              ▼
         Streaming Response -> Client

AWS Infrastructure

Service Resource Region Purpose
Amplify d3du8eg39a9peo us-east-2 Hosting, CI/CD
Lambda thechrisgrey-chat-stream us-east-1 AI chat streaming
Lambda thechrisgrey-contact-email us-east-2 Contact form
Lambda thechrisgrey-newsletter-subscription us-east-2 Newsletter
Lambda thechrisgrey-kb-sync us-east-1 KB auto-sync on S3 changes
Lambda thechrisgrey-kb-builder us-east-1 KB admin CRUD operations
Lambda thechrisgrey-metrics us-east-1 Metrics collection and reporting
Bedrock KB ARFYABW8HP us-east-1 RAG knowledge base
Cognito User Pool us-east-1 Admin authentication
S3 thechrisgrey-kb-source us-east-1 KB source documents
S3 thechrisgrey-vectors us-east-1 Vector embeddings
DynamoDB thechrisgrey-chat-ratelimit us-east-1 Rate limiting (20 req/hr/IP)
Secrets Manager thechrisgrey/youtube-api-key us-east-1 YouTube API key
CloudWatch tcg-AI-chat us-east-1 Bedrock invocation logs

Getting Started

Prerequisites

  • Node.js 18.x or 20.x (see .nvmrc)
  • npm
  • AWS CLI (for deployment)

Installation

git clone https://github.com/thechrisgrey/thechrisgrey.git
cd thechrisgrey
npm install

Development

npm run dev             # Start dev server at http://localhost:5173
npm run build           # Full production build
npm run preview         # Preview production build
npm run lint            # Run ESLint

Build Pipeline

The production build runs these steps in sequence:

validate-env -> podcast-episodes -> lint -> tsc -> vite build -> sitemap -> rss

Testing

Framework Scope Command
Vitest Unit + Integration npm test
Vitest Watch mode npm run test:watch
Vitest Coverage report npm run test:coverage
Cypress E2E (headless) npm run cy:run
Cypress E2E (interactive) npm run cy:open

The test suite includes unit tests for components, hooks, and utilities; integration tests for page-level behavior; and end-to-end tests covering navigation, chat, blog, and contact flows.

Environment Variables

Set in AWS Amplify console or in a local .env file:

Variable Description Required
VITE_CHAT_ENDPOINT Lambda Function URL for AI chat Yes
VITE_CONTACT_ENDPOINT Lambda Function URL for contact form Yes
VITE_NEWSLETTER_ENDPOINT Lambda Function URL for newsletter Yes
VITE_COGNITO_USER_POOL_ID Cognito User Pool ID (admin auth) Yes
VITE_COGNITO_CLIENT_ID Cognito App Client ID Yes
VITE_KB_BUILDER_ENDPOINT Lambda Function URL for KB admin Yes
VITE_CHAT_SIGNING_KEY HMAC signing key for chat requests Yes
VITE_METRICS_ENDPOINT Lambda Function URL for metrics Yes
YOUTUBE_API_KEY YouTube Data API v3 key (build-time only) Yes

VITE_ prefixed variables are bundled into the frontend. YOUTUBE_API_KEY is only used during the build step.

Deployment

Automatic (Recommended)

Push to main triggers automatic Amplify deployment:

git push origin main

Manual Rebuild

aws amplify start-job \
  --app-id d3du8eg39a9peo \
  --branch-name main \
  --job-type RELEASE \
  --region us-east-2

Lambda Deployment

Each Lambda function is deployed independently:

cd lambda/chat-stream
npm install
zip -r function.zip index.mjs package.json node_modules
aws lambda update-function-code \
  --function-name thechrisgrey-chat-stream \
  --zip-file fileb://function.zip \
  --region us-east-1

Repeat for kb-sync, kb-builder, and metrics (adjust function name and region as needed).

Project Structure

thechrisgrey/
├── public/                          # Static assets (served as-is)
│   ├── assets/documents/            # Downloadable PDFs
│   ├── press-kit/                   # Press materials + archive
│   ├── .well-known/security.txt
│   ├── robots.txt
│   ├── _redirects
│   ├── og.png                       # Open Graph image
│   └── favicon.png
│
├── src/
│   ├── components/
│   │   ├── admin/                   # Admin panel (login, KB entries, site health)
│   │   ├── chat/                    # AI chat (message, input, suggestions, widget)
│   │   ├── ui/                      # Base UI (Button, FormInput, IconButton)
│   │   ├── Navigation.tsx
│   │   ├── Footer.tsx
│   │   ├── SEO.tsx                  # Meta tags + JSON-LD
│   │   ├── ErrorBoundary.tsx
│   │   ├── ErrorFallbacks.tsx
│   │   ├── EpisodeCard.tsx
│   │   ├── NewsletterForm.tsx
│   │   ├── ReadingProgressBar.tsx
│   │   └── ...
│   │
│   ├── pages/                       # Route-level page components
│   │   ├── Home.tsx, About.tsx, Altivum.tsx, Podcast.tsx
│   │   ├── BeyondTheAssessment.tsx, Blog.tsx, BlogPost.tsx
│   │   ├── Chat.tsx, Claude.tsx, AWS.tsx, Admin.tsx
│   │   ├── Contact.tsx, Links.tsx, Privacy.tsx
│   │   └── NotFound.tsx
│   │
│   ├── hooks/                       # Custom React hooks
│   │   ├── useAuth.ts               # Cognito authentication
│   │   ├── useChatEngine.ts         # Chat state and streaming
│   │   ├── useFocusTrap.ts          # Modal focus management
│   │   ├── useKbAdmin.ts            # KB admin operations
│   │   ├── usePageContext.ts        # Page-level context for chat
│   │   ├── useSessionStorage.ts     # Typed sessionStorage with Date revival
│   │   └── useSiteHealth.ts         # Site health monitoring
│   │
│   ├── sanity/                      # Sanity CMS client, queries, types, cache
│   ├── utils/                       # Typography, schemas, validators, web vitals
│   ├── constants/                   # Social links
│   ├── types/                       # TypeScript interfaces
│   ├── data/                        # Podcast episode data (generated + fallback)
│   ├── assets/                      # Optimized images (Vite processed)
│   │
│   ├── __tests__/
│   │   ├── integration/             # Page-level integration tests
│   │   └── setup.ts
│   │
│   ├── App.tsx                      # Routes, layout, error boundaries
│   ├── main.tsx                     # Entry point
│   └── index.css                    # Tailwind directives
│
├── lambda/
│   ├── shared/                      # Shared utilities (auth, rate limiting, response)
│   ├── chat-stream/                 # Bedrock streaming Lambda
│   ├── kb-sync/                     # Knowledge Base auto-sync
│   ├── kb-builder/                  # KB admin CRUD
│   └── metrics/                     # Metrics collection
│
├── scripts/
│   ├── validate-env.js              # Build-time env validation
│   ├── generate-podcast-episodes.js # YouTube API fetch
│   ├── generate-sitemap.js          # Sitemap from Sanity
│   └── generate-rss.js             # RSS feed from Sanity
│
├── cypress/                         # E2E tests
│   ├── e2e/                         # Test specs
│   ├── fixtures/                    # Test data
│   └── support/                     # Custom commands
│
├── docs/                            # Internal documentation and plans
├── .github/workflows/ci.yml        # GitHub Actions CI
├── amplify.yml                      # Amplify build config
├── tailwind.config.js
├── vite.config.ts
├── vitest.config.ts
├── cypress.config.ts
└── tsconfig.json

Key Integrations

Sanity CMS (Blog)

  • Project ID: k5950b3w | Dataset: production
  • Content includes blog posts with categories, tags, series, and Portable Text rich content
  • Client-side caching via postCache.ts with Date revival

YouTube Data API (Podcast)

Episodes are fetched at build time from the @AltivumPress channel.

  1. generate-podcast-episodes.js runs during the build step
  2. Fetches channel, uploads playlist, and video details
  3. Generates src/data/generatedEpisodes.json
  4. Falls back to static data if the API is unavailable

Amazon Bedrock (AI Chat)

  • Model: Claude Haiku 4.5 (us.anthropic.claude-haiku-4-5-20251001-v1:0)
  • Knowledge Base: ARFYABW8HP (autobiography chunks)
  • Guardrail: 5kofhp46ssob (content filtering)
  • Rate Limit: 20 requests/hour per IP (DynamoDB-backed)
  • Streaming responses via Lambda Function URL with RAG retrieval (5 chunks per query)

Cloudflare Web Analytics

Privacy-friendly, cookie-free analytics with no personal data collection.

Design System

Color Palette

Name Hex Usage
altivum-dark #0A0F1C Backgrounds
altivum-navy #1A2332 Cards, nav
altivum-blue #2E4A6B Accents
altivum-slate #4A5A73 Borders, muted
altivum-silver #9BA6B8 Body text
altivum-gold #C5A572 Highlights, CTAs

Typography

SF Pro Display with system font fallbacks. Ultra-light weight (200) throughout. Defined in src/utils/typography.ts.

Animations

  • animate-fade-in : Hero entrance (1.2s)
  • animate-nav-fade-in : Nav delayed entrance (0.8s, 2s delay)
  • shimmer : Background shimmer effect
  • widget-open : Chat widget expansion (250ms)

License

Copyright 2026 Christian Perez. All rights reserved.

For inquiries, use the contact form or email via the website.