探索 AI 驱动的 Web 应用程序构建器

我一直在我的 Web 项目中使用许多 Vercel 产品 - 例如，他们的 Next.js 应用程序框架、部署基础设施 和 Vercel AI SDK。我喜欢这些工具，因为它们易于使用和上手，可靠且快速 - 而且它们中的大多数都是开源的，这太棒了 ❤️。

他们最新的创新是 v0.dev，这是一个 AI 驱动的工具，可帮助您使用对话式聊天界面构建前端应用程序。当我第一次听说它时，我以为它只是另一个带有聊天界面的 AI 编码工具，类似于要求 ChatGPT 或 Claude 生成代码。然而，v0.dev 最近宣布了一项重大更新，其中包括与流行的 shadcn UI 组件的集成以及拉取外部 npm 包的能力。所以我决定昨天试用一下。

体验令人震惊。仅仅一个小时，我就能够使用 v0.dev 的聊天界面构建一个功能齐全、外观精美的网站。感觉就像魔法一样 - 一系列“惊掉下巴”的时刻。我非常兴奋，以至于当 George 下班回家时，我跑下楼去滔滔不绝地谈论这个工具有多么棒。有趣的是 - 他已经试用过了，并且印象深刻，只是比我兴奋的反应更平静一些 🙂。

现在在这篇文章中，我将简要 介绍 v0.dev 是什么，分享 我的第一手经验 - 我喜欢它的哪些方面，在使用它时发现的一些怪癖，以及我希望该工具可以做得更好的地方。最重要的是，我将 讨论我认为 v0.dev 对 开发人员、设计师、企业家以及任何使用 Web 的人意味着什么。

如果您读到这里，并且认为这是一些疯狂的技术，与您无关，我强烈建议您阅读最后一节 最终想法。在那里，我解释了这个工具如何能够（如果这听起来很老套请原谅）改变您自己构建任何网站的能力（或您认为的缺乏能力）。无论您是开发人员、设计师、产品经理，还是只是任何梦想自己创建网站的人，您都会看到 v0 如何使之成为可能。也许这会说服您回来阅读下一节，该节解释了 v0.dev 是什么以及您可以用它做什么。

什么是 v0.dev？

v0.dev 是一个基于聊天的网站构建器，它使用现代 Web 技术（如 Next.js、React、Tailwind CSS 和 shadcn UI 组件）生成代码。它使用 AI 以最少的努力生成交互式网页，所有操作都在您的浏览器中完成。您可以预览、修改并将这些页面无缝部署到云端。让我们探索一个简单的练习来了解这个工具的实际应用。

入门的简单示例

访问 https://v0.dev 并给出一个简单的提示 - 创建一个具有蓝色主题的待办事项列表应用程序。它将生成一个“待办事项列表”页面，并在右侧的应用程序预览中显示它。在这个完全交互的页面中，您可以添加、查看和删除任务。该页面是使用 React、Tailwind CSS 和 TypeScript 构建的。您可以切换到代码模式以查看其背后的简洁、现代的代码。

从这里开始，您可以通过聊天界面中的提示轻松修改页面 - 所有操作都在您的浏览器中完成。例如，您可以说“实现编辑功能，我可以在列表中编辑任务”，它将生成一个更新版本的代码，实现编辑功能的 UI 和逻辑。您可以尝试一下并进行测试。

这是我们的应用程序的最初两个版本：

待办事项应用程序的最初版本

您可以通过用简单的英语“与它交谈”来获得更多乐趣，例如，

标题中的蓝色太暗了，让它更亮一些，更赏心悦目。另外添加搜索和排序功能 - 我想按字母顺序对任务进行排序

它将在几秒钟内更新页面和包含所有这些更改的代码。令人印象深刻，对吧？代码的质量也给我留下了深刻的印象 - 组织整洁，并遵循 TypeScript、React 和 Tailwind 的最佳实践。

这是我们应用程序的最终版本：

待办事项应用程序的最终版本

等一下，这不就是 ChatGPT 或 Claude 所做的吗？

是的，在一定程度上是这样，因为这两个工具都提供了基于聊天的界面来生成和执行代码。然而，v0 所做的远不止这些。

首先，它使用 Next.js 的最新信息，包括实验性版本中的功能，因为 v0 使用该框架的最新知识进行了微调。举个例子，如果您要求 ChatGPT“创建一个 Next.js 表单”，它将使用客户端表单提交范例而不是 Next.js 的服务器操作最佳实践来生成代码。同样，该代码将使用 Pages 路由而不是更新、改进的 App 路由范例，后者现在是构建 Next.js 应用程序的事实标准方式。

v0 更进一步 - 这是我最大的“哇！”时刻 - 通过开箱即用地创建一个 Next.js 项目。使用与上述相同的提示，ChatGPT 会为您提供有关如何创建 Next.js 项目、安装 Tailwind、创建组件、运行应用程序等的逐步说明。但是 v0 实际上会为您完成所有这些操作。它为您提供了一个完整的项目，您可以下载、在您最喜欢的 IDE 中打开并运行 - 所有这些都是开箱即用的。在下一节中查看有关它的更多详细信息。

v0.dev 可以做什么？

为了更好地阅读和理解，我们将将其分为两部分 - 基础知识和高级知识。

它可以做什么 - 基础知识

v0.dev 是构建 Web 应用程序的完整解决方案。

  • 您还可以与他人分享您的工作 - 单击“分享”按钮，然后单击“使用链接公开”。它会创建一个包含完整聊天交互以及代码和预览的链接。这是我们上面创建的 待办事项应用程序的聊天记录。
  • 您可以与他人发布网站 - 单击顶部的“分享”按钮，然后转到“发布”部分。在这里，聊天保持私密，但网站是公开的。例如，这是待办事项应用程序的已发布页面 - https://b_qrktsdrxhbg.v0.build/。这是一个完全功能的应用程序，已发布到云端 - 快去尝试一下吧！
  • 如果您有一个喜欢的网站，并希望将其用作您正在构建的网站的灵感来源，您只需在聊天提示中提供该网站的 URL（或只是它的屏幕截图），并要求它创建一个以该网站为灵感的网站。我用我自己的网站尝试了一下，效果很好。
  • v0 可以从您在聊天中创建的网页中创建一个 Next.js 项目。您可以单击顶部的添加到代码库按钮，它将生成一个可以在本地计算机上运行的 npx 命令。此命令创建一个 Next.js 项目，其中包含本地 git 存储库、正确的配置文件，并遵循最佳实践约定和文件夹结构。您可以在您最喜欢的 IDE 中打开此项目并运行以下命令：
npm run dev

瞧！新网站将在 http://localhost:3000 上运行（如果端口号已被占用，则可能会有所不同）。这有多酷？

v0.dev 还有很多其他功能，但在我们深入了解之前，请允许我分享我第一次使用它的体验。

我的 v0 使用经验

我使用了 v0.dev 几天，尽管我的免费套餐中可用的消息数量有限。最初，我创建了简单的应用程序，如待办事项列表、带有绿色主题的 BlueSky 克隆和一个 LinkedIn 克隆。

然后，我尝试使用以下提示克隆我自己的网站：

这是网站的屏幕截图。你能创建一个像这样的功能正常的网站吗？

它创建了我的主页的克隆版本。这是输出 - 显然不是完美无缺，但非常接近。看着它生成代码，并带有酷炫的动画，仿佛在“打印”我的网站，这真是太有趣了。

然后我突然想到，我曾答应叔叔要为他创建一个慈善网站。我已经考虑这个项目一段时间了，记下了他对网站的需求，并参考了一些慈善网站作为灵感，并最终确定了一些我喜欢的主题。

我在 v0.dev 中打开了一个新的聊天，并简单地开始将所有这些信息作为“需求”输入。它创建了主页的第一个版本。然后我给出了额外的提示来调整 UI 并使其更具交互性。起初，我打字输入提示，但后来我发现使用 macOS 内置的听写工具更容易。

现在好戏开始了 - 我启动了听写工具，双手离开键盘，开始叙述提示 - 进行更多更改，创建具有不同主题和模板的页面的多个版本。当基本版本足够好时，我要求它创建更多页面，如 关于我们、我们的工作、故事 和 联系我们 页面。v0 认真地按照我的指示进行操作。这非常有趣 - 我感觉自己像个上帝，你知道的 😎。

在整个过程中，它会解释它要做什么，进行这些更改，然后在一个详细的逐步部分中解释它做了什么。这种链式思考推理非常有用，因为如果它弄错了什么，您可以查看错误发生在哪里。

最后，我使用“添加到代码库”按钮从这些页面创建一个项目，在我的本地计算机上运行 npx 命令，并在我的 IDE 中打开。当我尝试运行该应用程序时，出现了一些问题 - 更多内容请参见下一节。

一路上的小问题

问题 #1

在我从 v0.dev 创建项目并尝试运行命令 npm run dev 以运行应用程序后，我收到了以下错误：

v0 生成的项目中的构建错误

我以为这是一个一次性问题，所以用另一个 v0 项目再次尝试，得到了相同的错误。正如错误所示，Page 组件存在名称冲突，即在同一作用域中有两个名称为 Page 的组件，它们在没有限定符的情况下相互引用。 以下是生成代码中的两个组件：

导入的 Page 组件：

import { Page } from "@/components/page"

默认导出的函数也命名为 Page：

export default function Page() {
  return <Page />;
}

解决方案很简单 - 重命名其中一个并解决冲突，或将两者合并为一个组件。解决此问题的最佳方法是解决根本原因 - 主页应该只有一个 Page 组件。 因此，将 components 中的 page.tsx 重命名为 HomePage.tsx，并修改主要的 Page.tsx 以按如下方式引用它：

export default function Page() {
  return <HomePage />;
}

问题 #2

还有另一个构建错误，如下所示：

找不到模块“@/components/ui/use-toast”或其相应的类型声明。ts(2307)

来自这一行

import { toast } from 
  "@/components/ui/use-toast"

在这里，use-toast 是一个钩子，位于 /components/hooks 文件夹中，因此请更新导入语句中的路径

import { toast } from "@/hooks/use-toast"

当您修复此问题时，use-toast 钩子文件还会出现一个错误

找不到模块“@/components/ui/toast”或其相应的类型声明。ts(2307)

因此您需要为此添加 shadcn 组件

npx shadcn@latest add toast

有关此组件的详细信息，请参阅 https://ui.shadcn.com/docs/components/toast。

问题 #3

我在 v0 聊天中创建了三个页面，并使用“添加到代码库”按钮创建 Next.js 项目。我期望所有这三个页面都添加到项目中。但是，该项目只包含其中一个页面。所以我不得不手动将其他页面复制到项目中。

它可以做什么 - 高级知识

它生成的 UI 代码是使用 shadcn UI 组件构建的，这是一个流行的可重用组件集合，它们是可访问的、可定制的和开源的。反之亦然，shadcn.ui 上的每个组件都可以在 v0 上编辑。因此，您可以选择任何 shadcn 组件，例如，这个 日历组件，然后单击“预览”模式下的“在 v0 中打开”按钮。它将打开包含该组件的 v0。因此，您可以通过聊天界面对其进行编辑和自定义。这种双向集成效果很好。

对于每个提示，聊天响应都包含一个它将要做什么的部分以及它所做的事情的逐步分解 - 代码更改、它正在实现的新功能以及它的工作原理。这是我的下一个最大的惊喜。我们知道好的 LLM 会给出链式思考推理，但这是一个很好地完成并以有用的方式完成的例子。

您可以从其现有状态派生一个聊天记录到一个新的快照。当您有一个基本版本并希望在不干扰迄今为止完成的工作的情况下对其进行修改，或者您想修改从其他人那里收到的版本时，这非常有用。

它可以使用第三方 npm 包来渲染 UI。例如，它使用 use-debounce 包在表单提交交互结束时显示彩带。它使用 three.js 库并生成复杂的代码来渲染草地。

它可以利用 Mermaid 生成图表，以便用更具意义的图表来回应您的问题。

除了 Next.js 之外，它还可以生成 Vue.js 中的代码。它不支持其他 Web 框架，如 Svelte 或用于移动设备的 Flutter。在 Lee Robinson 的这个视频中，他们说他们正在积极努力添加对更多框架的支持。

我对 v0.dev 的愿望清单

虽然我对 v0 的初步体验非常棒，但我认为仍有一些方面可以改进。以下是我将提供给 v0 团队的反馈：

开发周期中的连续性：在我创建项目并在本地运行它之前，一切都很好。但是在那之后，聊天和项目之间没有联系。我在项目中做的任何更改都不会反映在聊天中，反之亦然。如果有一种方法可以在 IDE 和聊天之间来回传递更改，那就太好了。也许 v0 和 Cursor AI 或 GitHub Copilot 之间的无缝切换会很棒。我相信他们正在开发类似的东西。

项目生成不完整：我失望地看到自动生成的项目仅包含我创建的网页之一。项目应该包含所有这些页面，而不仅仅是选中的页面。

文档有限：v0.dev 的文档非常有限。我是在使用过程中发现这些东西的。令人惊讶的是，v0.dev 没有全面的登录页面。我不确定他们为什么没有构建它，尽管该项目处于公开测试阶段。

使用限制：v0.dev 的使用非常受限。我发了几条消息就达到了最大限制，然后不得不等到第二天。我仍在评估是否选择付费订阅。如果他们为个人项目提供免费套餐，类似于他们的构建基础设施，那就太好了。

最终想法

我的主要结论是，使用 v0 就像与真正理解您想要什么的人进行结对编程。在浏览器中实时迭代和测试的能力对于 Web 开发来说是颠覆性的。想到 v0 时，脑海中浮现的词语是“无限”、“世界是你的牡蛎”和“构建你的梦想”。

我们脑海中都有想法，但将它们变为现实通常涉及很大的摩擦。以我自己的经验来看，当我有全职工作时，我无法想到构建快速项目。仅仅是构建一些东西的想法就让人望而生畏，以至于我甚至不想去追求它。我认为我们大多数人都处于相同的境地。v0 可以改变这一点。

v0 的美妙之处在于它仅使用一些文本提示即可生成出色的代码。这是生产就绪的代码，而不是用胶带拼凑在一起的一堆废弃代码。您可以直接签入代码并自豪地与他人分享。这为任何人构建高质量的 Web 应用程序开辟了可能性。令人印象深刻的是，它使用最流行的前沿技术创建真实的、常规的代码，而不是中间语言或框架。

这意味着任何知道如何打字并且有想法或直觉的人都可以实际看到它的运行：

有想法的企业家可以快速构建原型来向潜在客户展示，而无需聘请他人。

知道如何设计网站但不会编码的设计师现在可以创建可工作的原型。

厌倦了等待设计或工程团队的产品经理可以自己构建原型并获得客户反馈。

学习 React、Next.js 等的初级开发人员可以获得该技术的实践经验。

经验丰富的开发人员擅长编程但在设计方面较弱，可以使用此工具创建外观不错的网站。

资深开发人员可以使用 v0 来处理重复的底层工作，帮助他们更快地完成 60% 的工作。

使用 v0，您可以提升自己的技能，您可以以前所未有的方式扩展您的影响力。可能性是无限的，这令人兴奋。这就是为什么我认为每个人都应该关注这个工具并尝试一下。

我并不是说这是将完成所有事情的终极工具，但它将帮助您入门。它可以让您在自己构建某些东西的旅程中完成 40-50% 的路程，无论您在技术方面的专业知识如何。

这让我想起了 黄仁勋几个月前说的话

编程语言是人类。现在世界上每个人都是程序员。这就是 AI 的奇迹。

这句话如此真实。v0 是这个概念的一个生动而真实的例子。

总之，我认为 v0 体现了 AI 可以弥合人类语言和代码之间差距的理念，使更广泛的受众可以进行 Web 开发。无论您的技术背景如何，它都是将您的想法变为现实的门户。