Gadgets: Personal app vibe coding that is actually safe — Kenton Varda, Cloudflare

频道: AI Engineer
视频: https://www.youtube.com/watch?v=RmS5s6Wbin4
原文语言: en
统计: 共 12 轮

[0:01]

[music] Okay. Hi. All right. I've got a lot to talk about, so I'm going to launch right into it here. Um, so Swix says that you only get to make one point at every talk, uh, one key takeaway. And so I figured I'd just lead with that. My, uh, key point is personal AI codegen breaks traditional cloud infrastructure. And to clarify what I mean about that, the word personal here is, uh, is is doing a lot of work. It's uh, loadbearing as cloud would say. Um my point is that um if we want to see this future where um everyone has personal apps and like can personalize uh the apps that they run um the infrastructure we're using today um for for software in general is is not the right thing and we need something completely different. So to explain what I mean um think about the way that uh uh software is produced and distributed today. You have a developer in an ivory tower who builds an app and then sends it down to the the people the users who use the app and many of them are happy with it but some of them are not. Some of them uh say this app needs uh some additional features for my use case and so they go to the developer and they say oh great developer will you please grant my feature request your app is literally unusable without it. And so then the the developer's representative, the product manager takes these feature requests and files them into Jira where they are never seen again. Um but sometimes sometimes the product manager sees a feature request and says ah I you know I want that too and then that feature request goes onto the road map and the developer um works on it and the developer is implementing all these features features that uh you know each one is only used by a small subset of users and each one is adding all these if statements their code and making things messy and uh they don't like it because the codebase is becoming a mess and each of these features which is really kind of boring to implement. And

（音乐）好，大家好。我今天要讲的东西不少，直接进正题。Swix 说过，每场演讲你只能立一个观点、只留一个核心结论。那我干脆从结论开始。我的核心观点是：个人化的 AI codegen 会打破传统的云基础设施。我得先说清楚，这里「个人化」这个词分量很重——用 Claude 的话说，它是「承重」的。我的意思是，如果我们真想走到那个未来——每个人都有自己的个人 app、能随手把自己在用的 app 改成想要的样子——那今天这套跑软件的基础设施根本不对路，我们需要的是完全不一样的东西。

为了说明这点，先看看今天软件是怎么生产、怎么分发的。有一个坐在象牙塔里的开发者，他做出一个 app，往下发给用户。很多用户挺满意，但总有一些不满意。他们会说：这个 app 得再加几个功能才够我用。于是他们去找开发者：伟大的开发者啊，求你把我这个需求做了吧，没有它你这 app 简直没法用。然后开发者的代言人——产品经理——收下这些需求，一股脑丢进 Jira，从此再没人见过它们。

不过偶尔，产品经理看到某条需求会说：哎，这个我也想要。于是这条需求进了路线图，开发者开始动手做。开发者就这样实现了一堆功能，每个功能只有一小撮用户在用，每个都往代码里塞一堆 if 判断，把代码搞得一团糟。开发者很不爽，因为代码库越来越乱，而且这些功能做起来都特别无聊。

[2:28]

so the developer says, "Ah, I know what I need to do. We need a rewrite. We need to we need a new architecture that has a plug-in system." And then every one of these features can be a plug-in and it can be nice and clean and easy to build and the core can stay clean. And so the developer goes off and starts working on the the new architecture with the plug-in system. and uh there are still feature requests coming in and the developer says,"Well, we can't do those features yet because uh we need the plug-in system. This will be so much easier once we have the plug-in system. And if we do it now, we're just delaying that and we'll just have to redo it later anyway." And so um the years go by and uh the new architecture is not ready yet and [snorts] none of the features are being implemented and people are saying, "What are they doing? this developer has given up their product and uh everybody is sad. So AI seems to present a new alternative to this. What if uh the developer could create their app, the first version of their app, give it to the users, and the users if they need a new feature could say that could ask their AI agent to write that feature just for them, add it to the app. Um, then everyone gets the features they need. No one is bogged down in everyone else's features. Uh, and the developer gets to keep the the core app nice and clean and beautiful.

于是开发者说：啊，我知道该怎么办了——我们得重写。我们需要一套新架构，带 plugin 系统。这样每个功能都能做成一个 plugin，干净、好写，内核也能保持清爽。于是开发者一头扎进新架构和 plugin 系统。这期间需求还在源源不断地进来，开发者就说：这些功能现在还做不了，得等 plugin 系统。有了 plugin 系统之后做起来会容易得多，现在硬做只会拖慢进度，反正后面还得重做一遍。

就这样，几年过去了，新架构还没就绪，功能一个都没实现，大家开始问：他们到底在干嘛？这开发者是不是把自己的产品放弃了？所有人都很沮丧。

AI 好像给了我们另一条路。假如开发者做出 app 的第一版，交给用户；用户需要新功能时，可以直接让自己的 AI agent 单独为自己写这个功能、加进 app 里。这样每个人都能拿到自己需要的功能，谁也不用被别人的功能拖累，开发者还能把核心 app 保持得干净漂亮。

[4:03]

But there's a there's a problem with this, which is that none of the the infrastructure we build software on today is like remotely designed for this. You've got uh Apple and Google for the past 15 years uh gatekeeping their systems to the point where there's like five companies that can build mobile apps now and uh because everyone else has been banned. Um and it's almost like easier to in the United States to buy a gun than it is to like get access to your own phone to install unsigned software. You go to Google and you say, "I want to install unsigned software." And now they're going to say, "Oh, whoa, hold on, buddy. uh you seem upset. Uh you should uh go home and think about this. Uh if you still want that unsigned software in 24 hours, then you can come back and talk to us. Fortunately, we have a workaround for all of that, which is the web. On the web, everyone can build whatever they want. And it turns out it's fine. It's not the security disaster that Apple and Google keep telling us would happen. So you can build whatever you want on the web but there's a different problem on the web which is that for the past uh 25 years of uh cloud architecture we've been running in the wrong direction.

但这里有个问题：我们今天用来构建软件的这套基础设施，压根就没往这个方向设计过。过去 15 年，Apple 和 Google 一直在把自家系统封得死死的，封到现在几乎只剩五家公司还能做移动 app，因为其他人全被挡在门外了。在美国，买把枪都比让自己的手机装个未签名的软件容易。你去跟 Google 说：我想装个未签名的软件。他们会说：哎哟，等等，兄弟，你看着情绪不太对，先回家冷静冷静。要是 24 小时之后你还想装那个未签名的软件，再回来找我们聊。

好在这一切有个绕过去的办法，那就是 Web。在 Web 上人人都能做自己想做的东西，而且事实证明并没出什么事——并不是 Apple 和 Google 天天吓唬我们的那种安全大灾难。所以在 Web 上你想做什么都行。但 Web 有另一个问题：过去 25 年的云架构，我们一直在朝错的方向狂奔。

[5:21]

uh when you distribute a web app, you run it on your own server like put it on your server and then users send requests to your server where the one version of your app, the one um you know blessed version runs uh for every single user. And so that's convenient for developers. That's why we've done it is so the developer can make sure things stay updated and everyone's on the same version. But um it obviously means that users cannot customize their apps. So you know last year uh vibe coding comes along and we have all these vibe coding um platforms out there and the most of them are targeting web apps because that's the easy thing to target but they're all targeting this existing infrastructure which is actually like not the right way to do it. Um, we need something entirely different. And hence my point. Do you uh do you like how the word breaks kind of wiggles every now and then? That was uh that was something Claude put in there and it was so stupid I just had to keep it. Um, I want to know where in Claude's training data it uh it learned that you could make words wiggle to give them emphasis because like I you know I understand the red I understand the underline but uh the wiggle like I don't think that's that's from humans. I I think that's an AI original.

你要分发一个 Web app，是把它跑在自己的服务器上，然后用户向你的服务器发请求，那唯一一份、被「钦定」的版本，为每一个用户运行。这对开发者当然方便，我们之所以这么干，就是为了让开发者能确保大家始终是最新版、所有人都在同一个版本上。但这显然也意味着，用户没法定制自己的 app。

去年 vibe coding 火起来，冒出一大堆 vibe coding 平台，绝大多数瞄准的是 Web app——因为这是最好做的。但它们瞄准的都是现有的这套基础设施，而这条路其实根本不对。我们需要的是完全不同的东西。所以才有我开头那个观点。

对了，你们注意到「breaks」这个词时不时在抖吗？那是 Claude 自己加上去的，蠢得我实在舍不得删。我特别想知道 Claude 的训练数据里到底哪来的「让字抖起来表示强调」这一招——标红我懂，下划线我懂，但抖……我觉得这不是人类会干的事。我认为这是 AI 原创。

[6:51]

[laughter] This this is ASI folks. Yeah, it's beyond my puny human brain's ability to comprehend. Um anyway, uh so you might be wondering at this point like who is this this guy who hasn't introduced himself up on stage um giving a Richard Stallman-esque rant about how we should have the freedom to modify our own software and what does he know about cloud infrastructure. So I'm Kenton Varta. I created Cloudflare workers. I started the project um back in 2017 when I joined Cloudflare. I am still the lead engineer today. um it now is uh you know it's a serverless application hosting platform. We have millions of developers. We serve trillions requests per day. But what I'm going to talk to you a little bit about today is uh sort of a side project I've been working on on top of workers which is um designed to is my exploration in how to uh uh solve this problem. So, uh, this thing you're looking at right now is actually a little app that I created in this platform. But, um, we're going to the the front page here. So, you have your your Vibe Code prompt. You know, these things are a diamond dozen. Um, we all seen this before, but I'm just going to put in a little prompt to make to show that it works. Uh, make a silly counter app. Silly Max it silly.

（笑声）这就是 ASI 啊，各位。是的，超出了我这颗渺小人类大脑的理解能力。

好，说回来。你们这会儿可能在想：这家伙上台到现在都没自我介绍，还在这儿发表一通 Richard Stallman 式的演说，讲我们应该有修改自己软件的自由——他懂云基础设施吗？我叫 Kenton Varda，Cloudflare Workers 是我做的。这个项目是我 2017 年加入 Cloudflare 时启动的，到今天我还是主力工程师。它现在是一个 serverless 应用托管平台，有数百万开发者，每天处理数万亿次请求。

不过我今天要讲的，是我在 Workers 之上做的一个副项目，也是我对「怎么解决这个问题」的探索。你们现在看到的这个东西，其实就是我在这个平台上做的一个小 app。我们回到首页。这里是 vibe code 的输入框，这种东西现在遍地都是，大家都见过，但我还是输一段 prompt 演示一下它能用。做一个傻乎乎的计数器 app。傻乎乎的，给我傻到极致。

[8:22]

All right, but I'm not actually gonna sit here and watch it. Oh no, it said error. Yep, the internet doesn't work. That's okay. That's not the most important part of my talk. So um so what I what I want you to understand about this environment is uh this is not like your typical vibe coding environment where you're deploying apps to a web page. This is um uh you need to think about more like uh like an office suite. So think about Google Docs. You open Google Docs, you have a bunch of documents, hundreds, maybe thousands of documents. You open one, you edit it, you share it with people. This is the same thing except instead of documents, you have gadgets. And each gadget is an application with code. They can all be different code. I have um I have an app here which is like a collaborative whiteboard app. Like this is a oneshot prompt. Um, I have a uh an app here which So, I get a lot of email in Spanish. It's a long story. I don't know Spanish, but I need help like filtering all the Spanish email. So, I made a little app to help me do that. Uh, a gadget. Um, I have a gadget to help me sort uh pull requests that I need to uh review on GitHub. And uh but those are, you know, things that I just like vibe coded from scratch. But we also have this concept over here of blueprints. And um a blueprint is someone made a gadget and they decided that it was useful and they took a a blueprint of it which is just taking the code exporting the code without the data which they can then share with someone else and then other people can uh instantiate gadgets from these blueprints.

好，不过我也不打算坐在这儿干等它跑完。哎呀，报错了。对，网络不通。没事，这不是我演讲里最重要的部分。

我想让大家理解的是，这个环境跟你们熟悉的那种 vibe coding 环境不一样——不是把 app 部署成一个网页那种。你得把它想成一套办公套件。想想 Google Docs：你打开 Google Docs，里面有一堆文档，几百上千个；你打开一个，编辑它，分享给别人。这里是同一回事，只不过里面装的不是文档，而是 gadget。每个 gadget 都是一个带代码的应用，代码可以各不相同。比如我这儿有一个协同白板 app——这是一次 prompt 出来的。还有一个……我会收到很多西班牙语邮件，说来话长，我不懂西班牙语，但我得把这些西班牙语邮件筛一遍，于是我做了个小 app 帮我干这事，一个 gadget。我还有个 gadget 帮我整理 GitHub 上待我 review 的 pull request。

这些都是我从零 vibe code 出来的。但我们这边还有个概念叫 blueprint。有人做了个 gadget，觉得挺有用，就给它做一份 blueprint——其实就是把代码导出来、不带数据——然后分享给别人，别人就能从这份 blueprint 实例化出自己的 gadget。

[10:12]

So um we have like a you know document editor app here, a combon board and um a slide builder. So like you know typical office apps uh I'm going to s so this this slide builder um was built by my colleague Philip here um who's a product manager at Cloudflare and of course these days all product managers are also prolific engineers um so he you know he vibed this in an afternoon I believe but uh if I instantiate this gadget I get this nice little slide deck um you know it has things I can edit it and so on. Yay. And if I shared it, it would well. So an important point here is that when I instantiate this app, it is only for one slide deck. If I want multiple slide decks, I make multiple instances of the gadget uh one for each. And the reason for that is that all gadgets are um sharable and uh you know you can collaborate with other people on them and the sharing model is implemented by the platform instead of by the app itself. So if I click up here, I get sort of a a share dialogue kind of like a Google Docs share dialogue. I can create a share link and send it to people. And uh because each gadget is just the one thing that you want to share, that means that the platform can implement the sharing model and the access control such that the gadget itself can't possibly get that wrong.

所以我们这儿有文档编辑器 app、看板，还有一个幻灯片工具，都是典型的办公类应用。这个幻灯片工具是我同事 Philip 做的，他是 Cloudflare 的产品经理——当然，现在的产品经理个个也都是高产工程师。我记得他一个下午就 vibe 出来了。我把这个 gadget 实例化一下，就得到这么一份挺不错的 deck，里面的东西我都能编辑，等等。不错吧。要是我把它分享出去……

这里有个重点：我实例化这个 app 时，它只对应一份 deck。如果我要多份 deck，就实例化多个 gadget，一份一个。原因在于，所有 gadget 都是可分享的，你可以跟别人协作，而分享模型是由平台实现的，不是由 app 自己实现的。我点这里，会弹出一个分享对话框，有点像 Google Docs 的分享框，我可以生成分享链接发给别人。正因为每个 gadget 就只是你想分享的那一样东西，平台才能统一实现分享模型和访问控制，让 gadget 自己根本没机会把这块做错。

[11:40]

So I'm going to go over to actually another instance of the same slides app. This is the um the slides I originally wrote for this talk, which yesterday I decided these slides were trash and I threw them all away and rewrote it. Um but the the reason they're bad is is entirely my fault. It's not Philip's fault. It's uh not the software's fault. Um but this this can still serve as an example uh to to demonstrate some of what you can do on this platform. So if I uh click on here, I can see the conversation. And you know, of course, I didn't edit the slides myself by hand. I asked the agent to make them for me, right? Um, and every app in this platform automatically integrates with agents so that you can do that. And so what I did is I gave Claude a link to this document, this Google doc where I had described all of the gadgets that I wanted or all the the slides that I wanted in my um in my presentation. And crucially though, this is the interesting point. I said, if you need uh if you need to add any new features to the slides app itself to support some of these slides, feel free to do so. And it did. Um Claude read all the code for the app and read my doc and said, "Yes, actually, let's see. Slide three needs a uh strikethrough formatting. That's not implemented." Um we can add that. Um, some of the slides require things to be centered. And you know, I guess Philip's design taste is too good for centering text. Uh, but my more pedestrian taste called for some centering. And that's okay. Cloud can add that. Um, more interestingly, slides uh five and six here. So, I asked for this like really crappy diagram of the cloud, right? And the the app um didn't support sort of like arbitrary diagrams.

我切到同一个幻灯片 app 的另一个实例。这是我一开始为这场演讲写的那版 slides——昨天我觉得这些 slides 太烂了，全扔了重写。不过烂完全是我的锅，不怪 Philip，也不怪软件。但它还是能当个例子，展示在这个平台上能干什么。

我点开这里，可以看到对话记录。当然，slides 不是我一张张手动做的，我是让 agent 帮我做的。这个平台上的每一个 app 都自动接上了 agent，所以你可以这么干。我当时给了 Claude 一个链接，指向一份 Google doc，里面写了我想要哪些 gadget——其实是我这场演讲里想要哪些 slides。关键的一点，也是有意思的地方在于：我跟它说，如果为了做出某几页 slides，你需要给这个幻灯片 app 本身加新功能，那就尽管加。它真加了。

Claude 把 app 的代码全读了一遍，又读了我的文档，然后说：好，我看看——第 3 页需要删除线格式，这个还没实现，我们可以加上。还有几页要求文字居中。我猜 Philip 的设计品味太好了，看不上居中；但我这种更接地气的品味就是要居中。没关系，Claude 可以加。更有意思的是第 5、6 页。我要的是一张画得很糙的云的示意图，对吧？可这个 app 不支持这种随手画的图。

[13:38]

It supported, you know, uh box diagrams and arrows and such, but not an arbitrary drawing like this. And so Claude said, "Okay, that's okay. We can add a feature. We'll add a feature that allows uh you to insert a bunch of SVG. Just paste it into this box here. And now it becomes uh part of the slide." And now that's not very useful for any human, but it was perfectly useful for Claude who then generated the SVG. Now, at this point, you might be looking at this and saying, "That's a little scary. SVG can contain JavaScript. Uh, are there XSS bugs here?" And the answer to that is, uh, it doesn't really matter because of the way this environment is set up. So the UI that you see for the app here is running inside a null origin iframe sandbox um with content security policy set so that it basically cannot talk to anything any of the rest of the world can't access any cookies so on um the only thing it can do is post message to the parent frame and through that post message channel we set up a a captain web RPC uh session which forwards onto the server and all the way back to the server code for this gadget which is uh this code here which is written as a a durable object on Cloudflare workers and uh basically that means so so this this server code runs in a dynamic worker sandbox uh on the server side where it too is prevented from talking to any of the rest of the world. So now we've set up this environment where there's a vibecoded client and a vibecoded server.

它支持的是那种方框加箭头的图，但不支持像这样随便画的东西。于是 Claude 说：没事，我们可以加个功能——加一个能让你粘贴一段 SVG 的功能，直接贴进这个框里，它就变成幻灯片的一部分。这个功能对人类来说没什么用，但对 Claude 特别好用，它随后就把 SVG 生成出来了。

看到这儿你可能会想：这有点吓人吧？SVG 里可以塞 JavaScript，这里会不会有 XSS 漏洞？答案是：其实无所谓，因为这个环境的搭法就决定了它无所谓。你看到的这个 app 的 UI，是跑在一个 null origin 的 iframe sandbox 里的，还配了 content security policy，基本上它跟外面任何东西都通不了信，拿不到任何 cookie 之类的。它唯一能做的事，就是向父窗口 postMessage。我们在这条 postMessage 通道上建了一个 Cap'n Web RPC 会话，把调用转发到服务端，一路转到这个 gadget 的服务端代码，也就是这段代码——它是写成 Cloudflare Workers 上的一个 durable object 的。这段服务端代码跑在服务端的一个 dynamic worker sandbox 里，同样被禁止跟外部世界通信。

所以我们搭出来的这个环境里，客户端是 vibe code 出来的，服务端也是 vibe code 出来的。

[15:17]

They can only talk to each other and produce the UI uh for the user. And so if you have an XSS bug, it actually doesn't end up mattering because these can't leak anything. Um they're prevented from doing so. And it basically there is no security bug you can have in this code that matters. Um, and that makes it safe to, you know, go and do things. So, uh, I, uh, there's a whole lot that I would like to talk about that I won't have time for here, unfortunately. So the um uh so there there like for instance the uh we created a whole system by which these apps can talk to external services in a safe way but I could give you know two more talks about that. Um we created um there's a lot of stuff here. the the points that I want to make in the time that I have left though is so everything you see here is uh is built on everything except for the LLM is built on Cloudflare workers. Um a lot of people don't know this but you can actually build complex apps on workers. There are no containers involved here. There's just dynamic workers. There are no there's no database involved. It just uses durable objects. Um, and furthermore, all of this is actually running locally on my laptop, which is why it doesn't matter that uh the internet didn't work because uh so this is all running on workerd, which is our open source runtime. A lot of people don't know this. The Cloudflare workers runtime is open source. You can self-host it. And I'm excited about that because we have in here a uh Home Assistant uh connector and a Spotify connector. And I want to run this in my basement and uh use it to do home automation tasks.

它们只能互相通信，然后把 UI 呈现给用户。所以就算你有 XSS 漏洞，最后也无所谓，因为它们什么都泄不出去——这条路被堵死了。基本上，这段代码里你不可能写出一个有杀伤力的安全漏洞。这就让你可以放心大胆地去折腾。

还有很多东西我特别想讲，可惜今天时间不够。比如我们做了一整套机制，让这些 app 能以安全的方式跟外部服务通信，光这个我就能再讲两场。我们还做了……这里面东西太多了。

剩下的时间里我想强调的是：你们看到的这一切，除了 LLM 之外，全都建在 Cloudflare Workers 上。很多人不知道，其实你是可以在 Workers 上构建复杂应用的。这里没有用到任何容器，只有 dynamic workers；也没有用任何数据库，只用了 durable objects。而且这一切现在都跑在我的笔记本上——所以刚才网络不通也没关系。它跑在 workerd 上，也就是我们开源的运行时。很多人不知道，Cloudflare Workers 的运行时是开源的，你可以自己部署。这一点让我很兴奋，因为我们这儿有一个 Home Assistant 连接器和一个 Spotify 连接器，我想把这套东西跑在我家地下室，用它来做家庭自动化。

[17:17]

Um so [sighs] this is where though I have to give a little bit of an apology. Um so a couple of months ago when I submitted the the uh the proposal for this talk. This was like a side project I was working on and the plan was I was going to come here and I was going to present it and then I was just at the end of the talk going to ye it onto GitHub so that everyone could go and download and play with it themselves. In the last couple of weeks um there's been a lot of excitement inside Cloudflare and this has become a more serious project. And so last Thursday Dne our CTO pulled me uh into a room and said Kenton I don't think you should yeet this. I don't think this is yeet material. I think we need a uh we need to be more careful and disciplined and intentional about how we release this. So, let's hold it off for a few weeks. And I was pretty upset about that because I promised in the abstract that I was going to open source it, but sorry. Uh that's not happening today. It will happen soon though. Um, and I wish the silly counter worked because GPT makes some silly counters, but um oh well, it's not a big deal. And that's uh that's all I got. [applause]

呃，所以……[叹气] 讲到这儿我得先道个歉。几个月前我提交这场演讲的提案时，这还只是我在做的一个业余项目，当时的计划是：我来这儿讲一讲，然后在演讲结尾直接把它「甩」到 GitHub 上，这样大家都能下载下来自己玩。结果最近这几周，Cloudflare 内部对它非常兴奋，它就变成了一个更正式的项目。所以上周四，我们的 CTO Dane 把我叫进一个房间说：Kenton，我觉得你不该就这么甩出去。我觉得这东西不是「随手一甩」的料。我觉得我们得更谨慎、更有章法、更有意识地去规划怎么发布它。所以，先压几周再说。我当时挺郁闷的，因为我在摘要里承诺过要开源，但是抱歉——今天不行了。不过很快就会开源的。另外，我真希望那个傻乎乎的计数器能用起来，因为 GPT 做的计数器还挺逗的，但是……唉，算了，也不是什么大事。我要讲的就这些。[掌声]

[18:51]

[music]

[音乐]