快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

npx wrangler login

详细介绍

Pexels ChatGPT 应用

一个ChatGPT应用，提供高质量、免版税的摄影作品 Pexels（一个图片网站名，可直译为“佩克斯”）直接融入您的对话中。基于模型上下文协议（MCP）构建，并由Cloudflare Workers提供支持。

______________________________________________________________________

Pexels ChatGPT App Demo

______________________________________________________________________

这是什么？

这个项目是一个 模型上下文协议（MCP）服务器 将Pexels API集成到ChatGPT中。用户可以直接在聊天对话中搜索专业图片库照片，并在交互式、响应式的画廊小部件中查看结果。

主要特点

🔍 高级图片搜索 - 按关键词、方向、色板、尺寸等进行搜索
🎨 互动画廊小部件 - 漂亮的旋转木马式界面，配有照片卡片
🌓 主题感知 - 自动适应亮色/暗色模式
♿ 可访问性设施（或无障碍设施） - 完全支持屏幕阅读器和键盘导航
⚡ 无服务器（Serverless） - 在Cloudflare Workers边缘网络上运行，以实现全球性能
📱 响应式 - 在桌面、平板和手机上无缝工作

______________________________________________________________________

建筑学

这个项目展示了一个完整的MCP（可能指某种特定技术或平台，如“微服务控制平面”等，具体需根据上下文确定）应用架构：

┌─────────────────────────────────────────────────────────────┐
│                         ChatGPT UI                          │
├─────────────────────────────────────────────────────────────┤
│  React Widget (Embedded Gallery)                            │
│  ↓ Uses OpenAI SDK                                          │
├─────────────────────────────────────────────────────────────┤
│  MCP Protocol (SSE)                                          │
│  ↓ Tool Invocation                                          │
├─────────────────────────────────────────────────────────────┤
│  Cloudflare Worker (Durable Objects)                        │
│  ↓ HTTP Request                                             │
├─────────────────────────────────────────────────────────────┤
│  Pexels API (https://api.pexels.com)                        │
└─────────────────────────────────────────────────────────────┘

技术栈

后端：

Cloudflare Workers（可译为“Cloudflare 工作人员”或更技术性地表达为“Cloudflare 函数即服务（FaaS）”） - 无服务器边缘计算
持久对象 - 具有状态的MCP服务器实例
@modelcontextprotocol/sdk（注：这个名称在中文中可能没有直接的对应翻译，因为它是一个特定项目或库的名称，通常保持原样使用。所以，翻译为“@modelcontextprotocol/sdk”即可，无需额外解释。） - MCP（管理控制面板/多点控制单元等，具体含义根据上下文确定）的实现
TypeScript 5.9.3

前端：

React 18.3.1 - 用户界面框架
Embla轮播图（React组件） - 轮播功能
Lucide-React（注：Lucide 是一个图标库，React 是一个JavaScript库，因此“Lucide-React”可能指的是一个基于React的Lucide图标库或组件） - 图标库
esbuild - 快速打包工具

外部API：

Pexels API - 免费库存照片

______________________________________________________________________

项目结构

pexels-app/
├── src/                              # Backend (Cloudflare Worker)
│   ├── index.ts                      # MCP Durable Object & worker entry
│   ├── types.ts                      # Shared TypeScript types
│   ├── tools/
│   │   └── pexels.ts                 # Pexels search tool implementation
│   └── components/
│       ├── react-widget-inline.ts    # Bundled React widget (auto-generated)
│       └── react-widget-resource.ts  # HTML wrapper for widget
│
├── web/                              # Frontend (React Widget)
│   ├── src/
│   │   ├── component.tsx             # React entry point
│   │   ├── theme.tsx                 # Theme tokens & context
│   │   ├── components/
│   │   │   ├── App.tsx               # Main gallery application
│   │   │   └── cards/                # Photo card components
│   │   └── hooks/
│   │       ├── use-openai-global.ts  # OpenAI SDK integration
│   │       └── use-widget-state.ts   # Persistent state management
│   └── dist/                         # Build output
│
├── scripts/
│   └── inline-react-widget.js        # Bundles React into Worker
│
├── docs/                             # Comprehensive documentation
│   ├── ARCHITECTURE.md               # System design
│   ├── DEPLOYMENT-GUIDE.md           # Deployment instructions
│   └── ...                           # More guides
│
├── wrangler.jsonc                    # Cloudflare Worker config
├── .dev.vars.example                 # Environment variable template
└── package.json                      # Dependencies & scripts

______________________________________________________________________

入门指南

先决条件

Node.js 18+ 和 npm
Pexels API密钥（免费）
Cloudflare账户（提供免费层级）

安装

克隆仓库：

   git clone https://github.com/yourusername/pexels-app.git
   cd pexels-app

安装依赖项：

   npm install
   cd web && npm install && cd ..

配置环境变量：

   cp .dev.vars.example .dev.vars

编辑 .dev.vars 并添加您的Pexels API密钥：

   PEXELS_API_KEY=your_actual_api_key_here

本地构建并运行：

   npm run dev

MCP服务器将在 http://localhost:8787

部署

使用Cloudflare进行身份验证：

   npx wrangler login

设置生产环境密钥：

   npx wrangler secret put PEXELS_API_KEY
   # Enter your API key when prompted

部署到 Cloudflare：

   npm run deploy

您的应用程序将于 https://your-worker-name.workers.dev

______________________________________________________________________

使用方法/用途

MCP 工具： `pexels.searchPhotos`

使用强大的筛选选项在Pexels库中搜索：

参数：

参数	类型	必填	描述
中文翻译	无对应中文列标题	中文翻译	中文翻译	`query`
字符串	是	搜索关键词（1-120个字符）	`page`
序号	编号	页码（1-50，默认：1）	`perPage`
序号	编号	每页结果数（1-30，默认：12）	`orientation`	`landscape`	字符串	否	`portrait`， `square` ，或
`size`	`large`	字符串	否	`medium`， `small` 或者
`color`
字符串	否	十六进制代码或颜色关键字	`locale`	`en-US`	字符串	否	ISO 地区代码（例如。，

）|

User: Show me portrait photos of mountain landscapes

[ChatGPT invokes: pexels.searchPhotos({
  query: "mountain landscapes",
  orientation: "portrait",
  perPage: 15
})]

[Interactive gallery widget displays with 15 photos]

ChatGPT中的示例：

输出：
文本摘要：“为‘查询’找到X张Pexels照片”
带照片卡片的互动画廊小部件

- 每张卡片上显示： - 高质量照片预览 - 摄影师署名

______________________________________________________________________

“在Pexels上查看”按钮（在新标签页中打开）

发展

# Development
npm start                 # Start local dev server
npm run dev              # Same as start

# Building
npm run build:widget     # Build React widget only
npm run deploy           # Build everything and deploy

# React Development (in web/ directory)
cd web
npm run build            # Build React bundle
npm run watch            # Watch mode for React changes

# Type Checking
npm run type-check       # Check TypeScript types

NPM 脚本

开发工作流程 修改React小部件web/src/（
) cd web && npm run build
构建小部件： node scripts/inline-react-widget.js
内联捆绑包： npm run dev
本地测试： npm run deploy

部署：

cd web && npm run watch

______________________________________________________________________

为了加快迭代速度，请在另一个终端中使用监视模式：

配置

环境变量.dev.vars开发（

PEXELS_API_KEY=your_api_key_here

):

npx wrangler secret put PEXELS_API_KEY
npx wrangler secret list  # View configured secrets

生产环境（Cloudflare 密钥）：

牛仔裤配置（或：Wrangler 设置/配置选项） wrangler.jsonc关键设置在

{
  "name": "pexels",
  "main": "src/index.ts",
  "compatibility_date": "2025-03-10",
  "durable_objects": {
    "bindings": [{
      "class_name": "MyMCP",
      "name": "MCP_OBJECT"
    }]
  },
  "vars": {
    "PEXELS_API_BASE_URL": "https://api.pexels.com/v1"
  }
}

______________________________________________________________________

：

文档 docs/ 全面的文档资料可在……中获取

目录： ARCHITECTURE.md（文件名，可译为“架构说明.md”或保持原样，具体取决于上下文是否需要翻译文件名）
- 前端和后端如何连接 《部署指南.md》
- 完整的部署指南 PROJECT-TOUR.md 翻译为中文是：“项目-巡演.md” 或者根据上下文，也可以翻译为 “项目行程.md”（如果“TOUR”在这里指的是项目中的行程安排或活动路线）。不过，最直接的翻译还是保留原文件名的结构，即“项目-巡演.md”
- 按文件逐步讲解 APP设计指南.md
- OpenAI的设计原则 元数据优化指南（或文件）.md
- MCP 元数据调优 FUTURE-UI-UX-GUIDE.md 翻译为中文是：“未来UI-UX指南.md”
- UI设计的最佳实践 \WRANGLER-SECRET-COMMANDS.md\ 翻译为中文是：\管理工具（Wrangler）的秘密命令.md\ 或者简化为 \Wrangler 秘密命令.md\（具体翻译可能根据上下文和读者群体有所调整，但基本意思保持一致）

______________________________________________________________________

- 秘密管理

设计理念

这个项目遵循了OpenAI的ChatGPT应用程序设计指南： 对话式的
- 无缝融入聊天流程 智能
- 上下文感知工具调用 简单
- 集中注意力，进行单一目的的互动 响应式的
- 快速、轻量、边缘优化 可访问的

- 屏幕阅读器支持，键盘导航

用户界面/用户体验原则 系统优先设计
- 继承ChatGPT的颜色、字体和间距设置 主题代币
- 支持动态亮色/暗色主题 透明背景
- 与周围环境自然融合 组件作用域样式
- 不使用全局CSS以避免冲突 极简品牌塑造

______________________________________________________________________

- 在行动号召按钮上仅使用微妙的强调色

API 参考文档

Pexels API 集成

该工具向Pexels API v1发送请求： GET https://api.pexels.com/v1/search

终端点： 认证： Authorization 通过携带令牌（Bearer token）

头球速率限制：

每小时200次请求（免费层级） 响应格式：

在TypeScript中，将命名规范从snake_case转换为camelCase

______________________________________________________________________

如需完整的Pexels API文档，请访问：https://www.pexels.com/api/documentation/

高级功能

useOpenAiGlobal(key) 自定义 React Hooks

const theme = useOpenAiGlobal('theme'); // 'light' | 'dark'
const toolOutput = useOpenAiGlobal('toolOutput'); // Tool result data

useWidgetState(defaultState) - 访问OpenAI SDK全局变量

const [state, setState] = useWidgetState({ page: 1 });
// State survives widget remounts

useThemeTokens() - 持久的小部件状态

const tokens = useThemeTokens();
// tokens.colors.background, tokens.fonts.body, etc.

- 访问主题设计令牌

类型安全
全面的TypeScript覆盖，启用严格模式
对所有工具输入进行Zod验证
前后端共享的类型

从OpenAI SDK自动进行类型推断

错误处理

优雅处理：
API认证失败
网络错误
缺少配置
无效的参数
搜索结果为空

______________________________________________________________________

小部件中的用户友好型错误信息

安全

内容安全策略

default-src 'none';
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https://images.pexels.com;
frame-ancestors 'none';

该小部件强制执行严格的CSP（内容安全策略）：

最佳实践
.dev.vars.example API密钥存储为Cloudflare密钥（绝不在代码中存储）
作为模板提供

______________________________________________________________________

使用Zod模式进行输入验证

许可证这个项目采用MIT许可证授权——详见许可证

______________________________________________________________________

文件中有详细信息。

致谢 Pexels（注：Pexels是一个提供免费图片资源的网站名称，直接翻译为“佩克西”并不常见，通常保留原名）
- 为提供免费、高质量的库存照片 Cloudflare Workers（云防护网工）
- 用于无服务器基础设施 OpenAI（一家人工智能研究实验室）
- 对于ChatGPT和MCP规范 模型上下文协议

______________________________________________________________________

- 对于协议规范

了解更多

MCP TypeScript SDK

Wrangler 命令行界面 (CLI)

______________________________________________________________________

ChatGPT应用程序设计

目录标签

TypeScript搜索文档处理图片搜索本地部署聊天应用交互式画廊免版税图片Pexels集成

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

api-key

运行时（runtime，运行环境）

Node.js

来源包（packageName，安装包名）

wrangler

工具数量（toolCount，工具数）

0

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdioapi-key部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP World

mcpworld.com

/detail/c7b667a0778441c921e3253dbb8c2fd3

一个集成Pexels API的ChatGPT应用，允许用户在聊天中搜索高质量、免版税的图片，并提供交互式画廊小工具。

继续浏览同类 MCP

更多搜索检索 MCP（7,303）返回 MCP 目录

上一个 MCP

Chat Gpt

一个基于OpenAI向量存储API的语义搜索和文档检索服务器，适用于ChatGPT的模型上下文协议（MCP）服务。

下一个 MCP

Chatgpt Codex Test V2

一个基于Python的MCP服务器和客户端，用于调用外部HTTP服务获取创作者的练习和产品数据。

Chatgpt Apps SDK Examples

快速接入

详细介绍

Pexels ChatGPT 应用

这是什么？

主要特点

建筑学

技术栈

项目结构

入门指南

先决条件

安装

部署

使用方法/用途

MCP 工具： pexels.searchPhotos

“在Pexels上查看”按钮（在新标签页中打开）

发展

NPM 脚本

为了加快迭代速度，请在另一个终端中使用监视模式：

配置

生产环境（Cloudflare 密钥）：

：

- 秘密管理

- 屏幕阅读器支持，键盘导航

- 在行动号召按钮上仅使用微妙的强调色

API 参考文档

如需完整的Pexels API文档，请访问：https://www.pexels.com/api/documentation/

高级功能

- 访问主题设计令牌

从OpenAI SDK自动进行类型推断

小部件中的用户友好型错误信息

安全

该小部件强制执行严格的CSP（内容安全策略）：

使用Zod模式进行输入验证

文件中有详细信息。

- 对于协议规范

了解更多

MCP TypeScript SDK

Wrangler 命令行界面 (CLI)

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

MCP 工具： `pexels.searchPhotos`