目录

项目背景

蓝耘平台

Seedream 4.0

环境搭建与MCP服务器配置

1.安装Node.js与Vue CLI

2.配置TypeScript

3.安装并配置MCP服务器

4.获取豆包API密钥

AI Creative Studio

前端页面

测试生成功能

效果图

完整界面

图片生成

图片效果

视频生成

视频效果

总结

---

项目背景

随着人工智能技术的飞速发展，大模型在文本、图像、视频等多模态生成领域展现出强大的能力。字节跳动推出的“豆包”系列大模型，以其卓越的性能和低廉的调用成本，成为开发者和企业关注的焦点。与此同时，各类算力云服务平台如雨后春笋般涌现，为AI模型的训练与推理提供基础设施支持。其中，蓝耘科技推出的“元生代”智算云平台，凭借其“算力中心+数据工厂+模型广场”三位一体的体系，致力于为AI时代提供全栈式赋能。本报告将深入调研蓝耘平台及其集成的豆包文生图、文生视频工具，并基于Vue3+TypeScript技术栈，开发一个集成MCP（Model Context Protocol）服务器的AI工具网站，实现文本生成图片和视频的功能。

蓝耘平台

蓝耘平台是蓝耘科技集团打造的面向AI时代的算力基础设施与全栈服务平台。其核心定位是成为值得信赖的算力服务提供商，为工程师、科研人员及企业提供高效、低成本的算力支持，加速AIGC（AI生成内容）产业创新。平台基于Kubernetes原生云设计，支持大规模GPU加速工作负载，通过自研的分布式算力调度能力，实现算力资源的高效利用。

Seedream 4.0

豆包是字节跳动推出的AI大模型系列，涵盖语言模型、文生图模型、文生视频模型等多种模态。其中，文生图和文生视频工具是本报告关注的重点。

豆包API调用与MCP集成：为了方便开发者将豆包模型能力集成到自己的应用中，字节跳动开放了豆包的API接口，并提供了详细的开发文档和SDK。开发者可以通过HTTP请求的方式调用豆包的对话、图像生成、视频生成等接口，实现与豆包模型的交互。同时，豆包模型也支持通过MCP协议进行集成。MCP（Model Context Protocol）是一种开放协议，旨在让大模型能够安全地访问外部数据源和工具。通过MCP，开发者可以将豆包模型作为一个工具（Tool）集成到自己的应用中，实现更高级的功能，如让AI模型直接操作本地文件系统、数据库等。本报告的实践部分将重点介绍如何通过MCP协议，将豆包文生图和文生视频能力集成到Vue3+TypeScript开发的AI工具网站中。

环境搭建与MCP服务器配置

在开始开发之前，需要搭建好开发环境并配置好MCP服务器。本节将介绍环境搭建的关键步骤，包括Node.js与Vue环境的安装、MCP服务器的配置，以及如何在VSCode中集成MCP。

1.安装Node.js与Vue CLI

Vue3项目依赖于Node.js环境。首先，确保系统中已安装Node.js（推荐使用LTS版本）。然后，通过以下命令安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以使用以下命令创建一个新的Vue3项目：

vue create my-project

在创建过程中，选择“Manually select features”，并勾选“TypeScript”选项，以启用TypeScript支持。这将生成一个包含TypeScript配置的Vue3项目模板。

2.配置TypeScript

Vue3与TypeScript的结合，为项目带来了强大的类型检查和开发体验。在生成的项目中，会包含一个tsconfig.json文件，用于配置TypeScript编译选项。以下是一个推荐的tsconfig.json配置示例：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

该配置启用了严格模式，以确保TypeScript能够对代码进行严格的类型检查。同时，通过设置moduleResolution为node，支持在Node.js环境下解析模块。

3.安装并配置MCP服务器

在本项目中，我们将使用蓝耘平台上一个名为doubao-mcp-server的MCP服务器，它封装了豆包文生图和文生视频的功能。首先，需要通过npm安装该服务器：

然后在使用pip进行安装

pip install doubao-mcp-server

这里遇到一个版本问题，更新到25.3即可

python.exe -m pip install --upgrade pip

然后重新使用pip安装，安装成功

pip install doubao-mcp-server

安装完成后，需要在VSCode中配置MCP服务器。打开VSCode的设置（settings.json），添加以下配置：

{
  "mcpServers": {
    "doubao-mcp-server": {
      "command": "uvx",
      "args": [
        "doubao-mcp-server"
      ],
      "env": {
        "DOUBAO_API_KEY": "your-api-key-here"
      }
    }
  }
}

这里，DOUBAO_API_KEY需要替换为从火山引擎获取的豆包模型的API密钥。配置完成后，VSCode会自动检测到MCP服务器，并在命令面板中提供“MCP: List Connected Servers”等命令，用于验证服务器连接状态。

4.获取豆包API密钥

豆包模型的API密钥可以通过火山引擎的“方舟大模型体验中心”获取。具体步骤如下：

登录火山引擎官网（https://www.volcengine.com）。进入“方舟大模型体验中心”，创建一个新的应用。

将获取到的API密钥配置到上述settings.json中的DOUBAO_API_KEY字段，测试连接成功。

完成以上步骤后，开发环境即搭建完成。接下来，我们将基于Vue3+TypeScript开发AI工具网站，并集成MCP服务器提供的豆包文生图和文生视频功能。

AI Creative Studio

输入提示词

开发一个基于Vue框架的在线工具网站，实现文本生成图片和视频功能。要求集成指定的MCP服务器配置：包含一个SSE类型服务DoubaoMCPServer，访问地址为http://027e2bbd8bec4465867bd79a067d7269.mcp.lanyun.net:8088/sse/DoubaoMCPServer。网站需具备以下特点：

1. 用户友好界面设计，包含清晰的文本输入区域和生成结果展示区
2. 实现与MCP服务器的稳定SSE连接，确保实时数据传输
3. 前端采用现代Vue技术栈，使用Vue3+TypeScript
4. 页面设计要酷炫但不过度花哨，建议采用科技感UI风格
5. 包含响应式布局，适配不同设备
6. 实现生成过程的进度显示和错误处理机制
7. 优化用户体验，添加生成历史记录功能

特别注意确保与MCP服务器的通信稳定性和数据传输安全性。

页面展示

测试生成功能

效果图

完整界面

图片生成

图片效果

视频生成

视频效果

总结

本报告首先调研了蓝耘平台及其集成的豆包文生图、文生视频工具，详细介绍了它们的技术原理和功能特点。然后，结合Vue3+TypeScript技术栈，从零开始开发了一个集成MCP服务器的AI工具网站，实现了文本生成图片和视频的功能。在开发过程中，我们重点解决了SSE实时通信、错误处理、进度显示和历史记录等关键问题。通过本报告的实践，开发者可以快速掌握将大模型能力集成到Web应用中的方法，为构建更复杂的AI应用奠定基础。