00:00:00十多年来,数以百万计的开发者在 Vercel 的前端云平台上进行构建。
00:00:04从个人项目到企业级软件,我们一直在使用 Vercel 来部署一切。
00:00:10当你构建智能体(Agents)和 AI 功能来为用户或团队减少摩擦时,
00:00:15你最不希望看到的就是生产环境中存在难以维护的复杂环节。
00:00:21Vercel 的“自动驾驶”级基础设施让运维变得像部署一样简单。
00:00:25你只需生成代码并构建智能体,Vercel 就会自主优化全球规模的性能、
00:00:31配置计算资源、编排 AI 工作流,甚至调查异常情况。
00:00:38这一切都无需任何配置。
00:00:40现在,让我通过一次“快速挑战”来展示我的意思。
00:00:43让我们挑战迁移一个现有的 Web 应用。
00:00:46这是一个为拥有烘焙坊和咖啡馆的中型咖啡公司制作的招聘平台演示应用。
00:00:53它是一个简单的应用,包含前端、一个存储职位申请和简历的数据库,
00:00:58以及一个用于总结求职信以加快申请审核的后端服务。
00:01:03它目前托管在一个非常古老的托管商那里,我不打算说是哪一家,
00:01:07但我们肯定想让它现代化,所以动手吧。
00:01:10我们将迁移到 Vercel,这将加速功能开发、部署和协作。
00:01:17现在让我们把这个应用导入 Vercel。
00:01:19我将从后端开始,这是一个基础的 FastAPI Python 服务。
00:01:24我先点击“Add New”。
00:01:26我已经连接了我的 Git 账号,可以看到我的仓库都在这里。
00:01:31我在 API 仓库上点击“Import”。
00:01:33导入过程是完全可配置的,包括构建和输出配置,
00:01:38但 Vercel 开箱即用地支持 FastAPI 和其他后端框架。
00:01:44所以我只需点击“Deploy”,它就能正常运行。
00:01:46几秒钟内,我的 Python 后端服务就在 Vercel 上部署并运行了。
00:01:52Vercel 自动为这个项目生成了一个 URL。
00:01:55我要复制它,以便将其作为下一个应用的环节变量添加。
00:02:01我再添加一个新项目,在下一个应用上点击“Import”,
00:02:05我要导入这个应用的环境变量,以便它能与 Supabase 通信。
00:02:11太好了,现在我的应用可以连接 Supabase 了,至于 FastAPI 变量,
00:02:15我会加上刚才复制的 URL,然后部署应用。
00:02:20Vercel 正在构建和部署该项目,
00:02:23它将运行在支撑着数百万个网站和应用的同一套基础设施上。
00:02:27Vercel 的 126 个全球节点会自动将内容定位到离用户最近的地方,
00:02:33这意味着它永远都会非常快。
00:02:37我们可以看到应用已经成功部署了。
00:02:40让我们来看看。
00:02:42我能看到职位列表,也能在仪表板中看到带有 Python 总结功能的后端。
00:02:49一旦投入生产,我就能监控整个应用。
00:02:53但现在,我先跳转到另一个可以看到实时数据的项目。
00:02:57通过 Web 分析、速度洞察、日志和可查询的可观测性仪表板,我可以掌握全局。
00:03:04例如,这是我们网站 skills.sh 的分析数据,人们去那里寻找智能体技能。
00:03:11我可以找到详细的流量和来源信息,包括引流网站。
00:03:15如果我点击这里的“Speed Insights”,它会显示核心 Web 指标。
00:03:19这样我就可以诊断并解决任何速度或加载问题。
00:03:23点击“Observability”,我会进入仪表板,它让我能探索和查询应用的任何诊断信息,
00:03:29从日志到函数,再到边缘请求和数据传输。
00:03:34好了,现在我想让总结功能对招聘经理更有用。
00:03:38目前,FastAPI 只是用一个 Python 库来总结求职信。
00:03:43但我们可以构建一个简单的智能体来同时分析求职信和 PDF 简历,
00:03:48将它们与职位描述进行对比,对候选人做出初步评估,
00:03:52并生成一封供招聘经理发送的电子邮件。
00:03:56我已经本地克隆了仓库,现在进入目录并安装所需的工具。
00:04:01现在我要使用 Vercel CLI 将我的本地项目连接到 Vercel。
00:04:06CLI 让我能轻松地直接从命令行控制 Vercel 平台。
00:04:11我先执行 `vercel link`。
00:04:14是的,我要链接这个本地项目。
00:04:16选择 Vercel demo 组织和 coffee shop jobs 项目。
00:04:21已经找到了。
00:04:22然后我们将拉取环境变量。
00:04:24搞定。
00:04:25我也可以通过 `vercel dev` 在本地运行应用,它会在本地模拟 Vercel 的部署环境。
00:04:31试试看,`vercel dev`。
00:04:34启动服务器,让我们直接测试一下。
00:04:37没问题了。
00:04:38非常酷。
00:04:40现在让我们安装构建智能体所需的 AI 工具。
00:04:43Vercel 为我提供了构建功能和智能体所需的所有 AI 工具。
00:04:47首先,我需要集成一个实际的 AI 模型来进行总结。
00:04:51我可以通过 Vercel AI Gateway 使用数百种不同的模型,
00:04:55运行 `vercel dev` 还能让我通过 OIDC 令牌自动获得访问权限,这很酷。
00:05:00接下来,我将安装 AI SDK,它为我提供了一套完整的 AI 原语,用于文本总结等功能。
00:05:07执行 `pnpm install ai`。
00:05:12很好。
00:05:13之后,我将安装工作流开发套件(Workflow Dev Kit),它将持久地编排智能体采取的每一步。
00:05:21如果我的应用正在生成代码,我还可以使用 Vercel Sandbox 安全地运行它。
00:05:26但这是一个简单的总结智能体,所以我不需要 Sandbox。
00:05:31最后但同样重要的一点是,前端是 Next.js。
00:05:34所以我将把“React 最佳实践”技能添加到我的项目中,以确保前端整洁且快速。
00:05:40我要使用 skills.sh。
00:05:43来到这里,搜索“React best practices”。
00:05:47我要复制安装命令。
00:05:50搞定。
00:05:53确保为 `clog code` 和其他一些东西安装它。
00:05:56全局范围内,我喜欢符号链接版本,安装完成了。
00:06:01现在让我们来构建智能体。
00:06:02它非常简单,所以我直接给 `clog code` 下指令。
00:06:06这是我最初的提示词。
00:06:08它告诉 `clog code` 构建智能体,去总结求职信和 PDF 简历,
00:06:12合并总结内容并对比职位描述,给出初步建议,并生成一封跟进邮件。
00:06:20当然,我花了一些时间与 `clog` 把它磨练成了一个“一步到位”的提示词,
00:06:25我现在把它粘贴到 `clog code` 中,让它自由发挥。
00:06:29通过视频演示的“魔法”,假设我已经靠这些提示词搞定了,
00:06:35我确实做到了,现在我直接打开带有输出内容的另一个目录。
00:06:39好了,部署吧。
00:06:41我将提交更改并推送我正在处理的分支。
00:06:47现在 Vercel 的自动驾驶基础设施将自动识别 AI 工作负载,
00:06:51并为这些计算任务配置基础设施。
00:06:55这里的“活跃计算定价”非常给力。
00:06:57我只需为实际的计算付费,而无需支付等待模型 API 响应的往返时间。
00:07:03好了,现在我能看到应用了,让我们进入仪表板查看新功能并查看一份申请。
00:07:10事实上,这里已经有了这份申请的拒绝文本和生成的拒绝邮件。
00:07:17我觉得预览环境(Preview Environments)最棒的地方在于,团队中的任何人都可以对应用的任何部分发表评论。
00:07:24我现在就演示一下,我打算让 Eric 加一个按钮。
00:07:31酷,这只是 Vercel 工具栏的一个功能。
00:07:34你还可以测试特性开关(Flags)、运行无障碍审计、运行追踪等等。
00:07:38预览环境运行在与生产环境完全相同的基础设施上,
00:07:42所以我在测试中看到的正是最终用户在生产环境会看到的。
00:07:46好的,我们已经给应用加了智能体,但我希望团队中的其他人也能迭代 UI。
00:07:52v0 让其他人可以轻松地在基于 Web 的开发环境中协作,
00:07:57同时通过 Git 工作流保持一切版本受控且安全。
00:08:01这真的非常酷。
00:08:03我要导入 GitHub 项目,选择 main 作为基础分支,v0 就会设置项目。
00:08:13如你所见,我的环境变量也被导入了。
00:08:19现在,不到一分钟,我的应用就在 v0 中运行了。
00:08:23因为这是一个现有项目,v0 会启动一个沙盒来运行代码。
00:08:28这与我们在 Vercel 上用于启动隔离环境的沙盒原语完全相同。
00:08:33如果我点击 Git,你可以看到 v0 已经自动为我创建了一个新分支。
00:08:39我想稍微调整一下职位页面的设计。
00:08:42虽然想法可能有点疯狂,但让我们把职位卡片设为页面全宽吧。
00:08:50v0 完成了修改,额,我不太喜欢我做的这个决定,但让我们看看设计团队怎么想。
00:08:57我可以把这个 v0 聊天发给团队,让他们继续迭代,
00:09:00或者我可以开启一个 PR(拉取请求)并分享预览环境进行协作。
00:09:06一旦部署了应用并以全球规模提供服务,Vercel 就会确保它默认安全。
00:09:13运行应用的同一套自动驾驶基础设施也会在边缘保护它。
00:09:18这是我们 Next.js 网站的防火墙视图。
00:09:20它的流量很大,而且并非所有流量都是善意的。
00:09:24Vercel 的 Web 应用防火墙会自动在边缘检查并过滤恶意请求,以免它们到达你的应用。
00:09:33Bot ID 会悄无声息地辨别真实用户和自动化流量,在不增加验证码(CAPTCHAs)摩擦的情况下拦截滥用爬虫。
00:09:40Vercel 的全球边缘网络会自动检测并缓解大规模攻击,确保你的应用在负载下依然保持响应。
00:09:49你刚才看到的一切——迁移、AI 工作流、协作、安全——都在一个平台上运行,且无需任何基础设施配置。
00:09:59这就是“自动驾驶”的含义。
00:10:01平台不再是阻碍,让你能专注于交付。
00:10:05我们的项目量已达到 1100 万个,并且还在增加。
00:10:08下一个就是你的。