mcpField
T
thechrisgrey

thechrisgrey

远程服务
thechrisgrey.com搜索与检索02 天前更新
代码仓库访问官网

关于 thechrisgrey

thechrisgrey 是 Christian Perez 的个人网站，包含博客、播客、书籍和公司介绍，并提供基于检索增强生成的 AI 聊天。网站面向希望了解其经历与作品的访客，聊天回答通过 Bedrock 知识库检索内容。

主要功能

  1. 01展示个人简介、公司及作品
  2. 02提供带分类和标签的博客
  3. 03展示播客节目及集数列表
  4. 04通过 RAG 聊天检索知识库内容
  5. 05提供联系表单和媒体资料

适用场景

  1. 01查找 Christian Perez 的博客文章
  2. 02了解播客节目和书籍信息
  3. 03询问其经历、工作与写作内容
  4. 04访问联系渠道及媒体资料

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://mcp.thechrisgrey.com
一键复制安装命令
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

详细介绍

thechrisgrey.com

TypeScript React Vite Tailwind CSS AWS Amplify Amazon Bedrock CI License

Christian Perez（@thechrisgrey）的个人网站 | Altivum Inc. 创始人兼 CEO | 前绿扁帽（18D 特种部队医疗军士）| 铜星勋章获得者 | The Vector Podcast 主持人 | 《Beyond the Assessment》作者

https://thechrisgrey.com

目录

技术栈

层级技术
前端React 19、TypeScript 5、Vite 5（Vitest 4、ESLint 10 扁平配置）
样式Tailwind CSS 4（以 CSS 为先的 @theme 配置、Oxide 引擎）
路由React Router 7
CMSSanity.io（博客内容）
AI 聊天Amazon Bedrock（Claude Haiku 4.5）+ RAG
身份验证Amazon Cognito（管理面板）
托管AWS Amplify
CDN/分析Cloudflare Web Analytics
测试Vitest + React Testing Library + Cypress
代码质量ESLint、严格的 TypeScript

功能

页面
  • 首页：基于滚动的动画，配有粘性个人资料区域
  • 关于：个人简介和军事背景
  • Altivum Inc：公司展示和服务
  • The Vector Podcast：YouTube 嵌入内容、Spotify 播放器、可折叠的剧集列表
  • Beyond the Assessment：书籍信息和购买链接
  • 博客：由 Sanity CMS 驱动，支持分类、标签、系列和阅读进度
  • AI 聊天：全视口对话式 AI，提供 RAG 增强的回复
  • Claude：AWS 认证和 Claude 专业知识展示
  • AWS：AWS 合作伙伴关系和社区建设者简介
  • 管理后台：通过 Cognito 身份验证的知识库管理和网站运行状况仪表板
  • 链接：Linktree 风格的快捷链接
  • 联系：联系表单、演讲主题、可下载的媒体资料包
技术亮点
  • SEO：JSON-LD 结构化数据、Open Graph、动态站点地图、RSS 订阅源
  • RAG AI 聊天：通过 Bedrock 知识库检索，并以流式方式返回响应
  • 播客自动同步：YouTube Data API 在构建时获取剧集
  • 聊天小组件：所有页面均提供浮动聊天小组件
  • 指标仪表盘：由 CloudWatch 和 DynamoDB 支持的运营指标
  • 错误边界：页面级错误处理，并提供自定义备用 UI
  • 无障碍功能：焦点限制、键盘导航、ARIA 标签、跳转链接
  • 性能：图像优化（Sharp/SVGO）、延迟加载、代码拆分、手动分块

架构

┌─────────────────────────────────────────────────────────────────┐
│                        FRONTEND (React)                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐           │
│  │   Home   │ │  Podcast │ │   Blog   │ │   Chat   │   ...     │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘           │
└─────────────────────────────────────────────────────────────────┘
        │               │              │              │
        ▼               ▼              ▼              ▼
┌───────────┐   ┌───────────┐   ┌───────────┐   ┌───────────────┐
│  Amplify  │   │  YouTube  │   │  Sanity   │   │    Bedrock    │
│  Hosting  │   │  Data API │   │    CMS    │   │  + RAG (KB)   │
└───────────┘   └───────────┘   └───────────┘   └───────────────┘
                (build-time)     (runtime)       (Lambda stream)
AI 聊天请求流程
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 基础设施

服务资源区域用途
Amplifyd3du8eg39a9peous-east-2托管、CI/CD
Lambdathechrisgrey-chat-streamus-east-1AI 聊天流式响应
Lambdathechrisgrey-contact-emailus-east-2联系表单
Lambdathechrisgrey-newsletter-subscriptionus-east-2新闻简报
Lambdathechrisgrey-kb-syncus-east-1S3 变更时自动同步知识库
Lambdathechrisgrey-kb-builderus-east-1知识库管理 CRUD 操作
Lambdathechrisgrey-metricsus-east-1指标收集与报告
Bedrock KBARFYABW8HPus-east-1RAG 知识库
Cognito用户池us-east-1管理员身份验证
S3thechrisgrey-kb-sourceus-east-1知识库源文档
S3thechrisgrey-vectorsus-east-1向量嵌入
DynamoDBthechrisgrey-chat-ratelimitus-east-1速率限制（每个 IP 每小时 20 次请求）
Secrets Managerthechrisgrey/youtube-api-keyus-east-1YouTube API 密钥
CloudWatchtcg-AI-chatus-east-1Bedrock 调用日志

开始使用

先决条件
  • Node.js 20.x（参见 .nvmrc）
  • npm
  • AWS CLI（用于部署）
安装
git clone https://github.com/thechrisgrey/thechrisgrey.git
cd thechrisgrey
npm install
开发
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
构建流水线

生产构建会依次执行以下步骤：

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

测试

框架范围命令
Vitest单元测试 + 集成测试npm test
Vitest监听模式npm run test:watch
Vitest覆盖率报告npm run test:coverage
Cypress端到端测试（无头模式）npm run cy:run
Cypress端到端测试（交互模式）npm run cy:open
node:testLambda 单元测试 + 契约测试npm run test:lambda

测试套件包含针对组件、钩子和实用工具的单元测试；针对页面级行为的集成测试；以及涵盖导航、聊天、博客和联系流程的端到端测试。

实时 API 契约测试（选择性启用）

关键外部边界——Cognito 管理员身份验证、实时 Sanity 客户端、Bedrock 知识库检索和 Bedrock 护栏——也通过选择性启用的契约测试进行覆盖，这些测试会调用真实服务（仅依赖通过的模拟测试可能会与实际情况脱节）。这些测试在运行 npm run test:lambda 和 CI 时会正常跳过，只有在提供相应标志和 AWS/Sanity 凭据时才会运行：

COGNITO_CONTRACT_TESTS=1 COGNITO_CLIENT_ID=… COGNITO_TEST_EMAIL=… COGNITO_TEST_PASSWORD=… \
  node --test lambda/shared/__tests__/cognito-contract.test.mjs
SANITY_CONTRACT_TESTS=1      node --test lambda/chat-stream/__tests__/sanity-contract.test.mjs
KB_RETRIEVE_CONTRACT_TESTS=1 node --test lambda/chat-stream/__tests__/kb-retrieve-contract.test.mjs
BEDROCK_CONTRACT_TESTS=1     node --test lambda/blueprint/__tests__/guardrail-contract.test.mjs

完整的标志列表和所需权限请参阅 .env.example。请在发布前（或通过定时任务）运行这些测试，以捕获单元测试模拟无法发现的响应格式或架构偏差。

环境变量

在 AWS Amplify 控制台或本地 .env 文件中设置：

变量描述必需
VITE_CHAT_ENDPOINTAI 聊天的 Lambda Function URL是
VITE_CONTACT_ENDPOINT联系表单的 Lambda Function URL是
VITE_NEWSLETTER_ENDPOINT电子报的 Lambda Function URL是
VITE_COGNITO_USER_POOL_IDCognito 用户池 ID（管理员身份验证）是
VITE_COGNITO_CLIENT_IDCognito 应用客户端 ID是
VITE_KB_BUILDER_ENDPOINT知识库管理的 Lambda Function URL是
VITE_CHAT_SIGNING_KEY聊天请求的 HMAC 签名密钥是
VITE_METRICS_ENDPOINT指标的 Lambda Function URL是
YOUTUBE_API_KEYYouTube Data API v3 密钥（仅构建时使用）是

带有 VITE_ 前缀的变量会打包到前端中。YOUTUBE_API_KEY 仅在构建步骤中使用。

部署

自动部署（推荐）

推送到 main 会触发 Amplify 自动部署：

git push origin main
手动重新构建
aws amplify start-job \
  --app-id d3btl94rm91y13 \
  --branch-name main \
  --job-type RELEASE \
  --region us-east-2 \
  --profile personal-dev   # Delta Centric 512880383078, the site's home
Lambda 部署

每个 Lambda 函数都通过一个经过验证的脚本独立部署。该脚本 从锁文件安装依赖，将 lambda-shared 符号链接解引用并打包， 并且会在上传前验证整个模块图是否都能解析——因此部署不会再发布 一个在冷启动时崩溃的 Lambda。

# Verify the bundle builds and resolves, without uploading:
npm run deploy:lambda -- chat-stream --dry-run

# Deploy for real (runs as profile personal-dev and refuses unless the caller
# account is Delta Centric 512880383078):
npm run deploy:lambda -- chat-stream

适用于 lambda/ 下的任何 Lambda（例如 chat-stream、blueprint、kb-builder、 metrics、kb-sync、mcp-server）。传入 --region <r> 可覆盖默认区域 （us-east-1）。不要手动构建 function.zip——手动使用 zip 通配符会遗漏各处理程序导入的同级模块，导致生成的部署包无法正常工作。

项目结构

thechrisgrey/
├── public/                          # Static assets (served as-is)
│   ├── assets/documents/            # Downloadable PDFs
│   ├── press-kit/                   # Press materials + archive
│   ├── .well-known/security.txt
│   ├── robots.txt
│   ├── 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

主要集成

Sanity CMS（博客）
  • 项目 ID： k5950b3w | 数据集： production
  • 内容包括带有分类、标签、系列和 Portable Text 富文本内容的博客文章
  • 通过 postCache.ts 在客户端缓存，并恢复 Date 对象
YouTube Data API（播客）

播客节目会在构建时从 @AltivumPress 频道获取。

  1. generate-podcast-episodes.js 在构建步骤中运行
  2. 获取频道、上传播放列表和视频详情
  3. 生成 src/data/generatedEpisodes.json
  4. 如果 API 不可用，则回退到静态数据
Amazon Bedrock（AI 聊天）
  • 模型： Claude Haiku 4.5（us.anthropic.claude-haiku-4-5-20251001-v1:0）
  • 知识库： ARFYABW8HP（自传内容分块）
  • 护栏： 5kofhp46ssob（内容过滤）
  • 速率限制： 每个 IP 每小时 20 个请求（由 DynamoDB 提供支持）
  • 通过 Lambda Function URL 流式传输响应，并使用 RAG 检索（每次查询 5 个分块）
Cloudflare Web Analytics

注重隐私、无需 Cookie 的分析工具，不收集个人数据。

设计系统

色彩调色板
名称Hex用途
altivum-dark#0A0F1C背景
altivum-navy#1A2332卡片、导航
altivum-blue#2E4A6B强调色
altivum-slate#4A5A73边框、弱化元素
altivum-silver#9BA6B8正文文本
altivum-gold#C5A572突出显示、行动号召
字体排印

SF Pro Display，并回退到系统字体。全局使用超细字重（200）。定义于 src/utils/typography.ts。

动画
  • animate-fade-in：主视觉区域进入（1.2s）
  • animate-nav-fade-in：导航延迟进入（0.8s，延迟 2s）
  • shimmer：背景闪光效果
  • widget-open：聊天组件展开（250ms）

许可证

版权所有 © 2026 Christian Perez。保留所有权利。

如需咨询，请使用联系表单，或通过网站发送电子邮件。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。