Cursor + MCP 快速构建网站：自然摄影师作品集

前期准备

在开始构建作品集之前，需要进行一系列的准备工作以确保项目的顺利进行。

1、初始化一个 nextjs 项目：首先，我们需要创建一个新的Next.js项目，这将作为我们作品集的基础架构。这里我们给项目命名为“image-blog”。

npx create-next-app@latest image-blog

2、生成 Replicate API token：为了将AI图像生成功能集成到我们的项目中，我们需要从Replicate平台获取一个API token。这个token将在后续步骤中用于配置ai-image-gen-mcp项目。

3、克隆开源 MCP 服务：接下来，我们需要克隆一个开源的MCP（Model Context Protocol）服务，这个服务可以帮助我们管理和运行AI模型。

git clone https://github.com/mikeyny/ai-image-gen-mcp.git

Bash在克隆的项目中，我们需要按照项目的README文件指示进行配置，包括配置Replicate API token到 .env 配置文件中，并安装项目依赖，然后构建项目。

# 进入克隆的项目目录
cd ai-image-gen-mcp
# 安装项目依赖
npm install
# 构建项目
npm run build

完成以上步骤后，我们还需要复制构建好的 server.js 文件的路径，这将用于后续配置MCP Server。

配置 MCP Server 服务

配置MCP Server是将AI图像生成功能集成到我们的Next.js项目中的关键步骤。

1、添加 MCP Server：在Next.js项目中，我们需要通过Cursor设置来添加一个新的MCP Server。

# 打开刚初始化的项目 image-blog
cd image-blog
# 打开 Cursor setting
# 点击 Features
# 找到 MCP Servers ，Add new MCP server

在添加MCP Server时，我们需要填写以下信息：

• Name：服务器的名称，这里我们可以命名为“generate-image”。
• Type：服务器类型，选择“command”。
• Command：执行命令，这里填写我们之前复制的 server.js 文件的路径。

例如：

node /Volumes/ExtremeSSD/MCP/ai-image-gen-mcp/dist/server.js

构建图片作品集

1、使用Compose 的 agent 模式：在构建作品集时，我们必须使用Compose的agent模式，这是因为它提供了必要的接口和功能来与我们的MCP Server进行交互。

2、录入生成图片博客的 prompt：通过Compose的界面，我们可以录入生成图像的prompt，这些prompt将指导AI生成特定主题和风格的图像。

3、生成网站并显示效果：最后，我们可以使用Compose来生成我们的作品集网站，并预览生成的图像和网站效果。

注意事项

• 使用MCP Server时，必须确保使用Compose的agent模式，这是因为它提供了与MCP Server交互所需的所有必要功能。
• 录入的prompt将直接影响生成的图像效果和最终的网站内容，因此需要仔细设计prompt以确保生成的内容符合预期。