Vercel 产品演示 (2026)

VVercel
AI/미래기술창업/스타트업컴퓨터/소프트웨어

Transcript

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下一个就是你的。

Key Takeaway

Vercel 2026 通过集成自动化基础设施、全栈 AI 工具链和 v0 协作平台,打造了一个无需配置即可全球扩展、安全且智能的“自动驾驶”开发生态。

Highlights

Vercel 定位为“自动驾驶”级前端云平台,旨在消除 AI 应用在生产环境中的运维复杂性。

平台开箱即用支持 FastAPI 等后端框架,实现前端、后端及数据库环境变量的快速集成与一键部署。

提供全套 AI 开发工具栈,包括 AI Gateway 模型接入、AI SDK 文本处理以及持久化编排的 Workflow Dev Kit。

Vercel CLI 和预览环境(Preview Environments)支持团队实时协作、特性开关测试及无障碍审计。

v0 工具实现了基于 Web 的开发环境协作,允许非开发人员通过自然语言迭代 UI 并自动生成 Git 分支。

内置企业级安全防护,通过 Web 应用防火墙和 Bot ID 在边缘侧自动过滤恶意流量与爬虫攻击。

采用“活跃计算定价”模式,开发者仅需为实际处理任务的计算时间付费,显著降低 AI 应用成本。

Timeline

Vercel 愿景与“自动驾驶”基础设施

视频开篇介绍了 Vercel 十多年来作为数百万开发者首选前端云平台的演进历程。演讲者强调在构建 AI 智能体和功能时,开发者不应被生产环境中复杂的运维环节所困扰。Vercel 提出的“自动驾驶”概念意味着平台能自主优化全球性能、配置资源并编排工作流。这种模式实现了真正的“零配置”体验,让开发者能全身心投入到代码生成和智能体构建中。这标志着云平台从简单的托管服务向智能化、自动化的生产力工具转型。

旧应用迁移:从 FastAPI 后端到前端部署

演示通过一个中型咖啡公司的招聘平台展示了如何将老旧托管商的应用迁移到 Vercel。流程从导入基于 FastAPI 的 Python 后端开始,展示了 Vercel 对多种后端框架的开箱即用支持。随后,通过配置环境变量将应用与 Supabase 数据库连接,并利用生成的 URL 串联前后端服务。得益于全球 126 个节点,部署后的应用能自动实现就近访问,极大提升了加载速度。这一过程证明了 Vercel 在现代化 Web 应用迁移中的高效性,让复杂架构的部署变得轻而易举。

可观测性与实时数据分析

一旦应用投入生产,Vercel 提供了详尽的监控手段来掌握全局运行状态。通过“Speed Insights”功能,团队可以实时监测核心 Web 指标,从而精准诊断并解决潜在的加载问题。Web 分析模块则展示了详细的流量来源和引流网站信息,帮助开发者了解用户行为。此外,可观测性仪表板允许用户查询从日志到函数、再到边缘请求的所有诊断数据。这些工具为应用的稳定性提供了坚实保障,确保开发者能在问题影响用户前进行干预。

构建 AI 智能体:CLI、SDK 与工作流集成

这一章节深入演示了如何将简单的总结功能升级为复杂的 AI 智能体。开发者首先使用 Vercel CLI 将本地项目连接到云端,并通过 `vercel dev` 环境模拟生产配置。随后集成了 AI Gateway 以接入数百种模型,并安装了 AI SDK 和 Workflow Dev Kit 进行任务编排。通过名为 `clog code` 的工具,开发者利用自然语言提示词快速生成了能分析 PDF 简历并撰写邮件的代码。最后,开发者还引入了 skills.sh 上的 React 最佳实践来优化前端表现,展示了 Vercel 强大的 AI 开发工具链。

自动驾驶部署、预览协作与 v0 迭代

在代码推送后,Vercel 的自动驾驶基础设施会自动识别 AI 工作负载并配置计算资源。值得注意的是,其“活跃计算定价”让用户无需为模型响应的等待时间付费,仅针对实际计算计费。预览环境功能允许团队成员在与生产环境一致的配置下发表评论、测试特性开关和进行审计。此外,v0 工具的引入让非技术团队成员也能参与 UI 迭代,通过对话式界面直接修改页面设计并自动同步至 Git 分支。这种无缝的协作机制打破了开发与设计之间的壁垒,显著提升了产品交付效率。

边缘安全防护与总结

视频最后展示了 Vercel 如何在不牺牲性能的前提下保障应用安全。通过 Web 应用防火墙(WAF),平台能在边缘侧自动拦截恶意请求,确保它们无法触达核心业务逻辑。Bot ID 技术则能在不使用验证码的情况下,精准识别并拦截滥用爬虫,从而减少真实用户的交互摩擦。这种原生集成的安全机制让开发者无需额外配置即可应对大规模攻击。最后,演讲者总结了 Vercel 在迁移、AI、协作和安全方面的全方位优势。他呼吁开发者加入已拥有 1100 万个项目的 Vercel 生态,体验真正无需关注基础设施的开发模式。

Community Posts

View all posts