Skip to content

搞英语 → 看世界

翻译英文优质信息和名人推特

Menu
  • 首页
  • 作者列表
  • 独立博客
  • 专业媒体
  • 名人推特
  • 邮件列表
  • 关于本站
Menu

与 Claude 一起构建和分享 AI 驱动的应用程序

Posted on 2025-06-26

与 Claude 一起构建和分享 AI 驱动的应用程序

Anthropic 为Claude Artifacts添加了最重要的缺失功能之一:作为工件构建的应用程序现在能够通过新的 API 针对 Claude 运行自己的提示。

Claude Artifacts 是在严格控制的浏览器沙箱中运行的 Web 应用程序:它们对 localStorage 等功能的访问或通过fetch()调用访问外部 API 的能力受到 CSP 标头和<iframe sandbox="..."机制的限制。

新的window.claude.complete()方法打开了一个漏洞,允许针对 Claude 运行由 JavaScript 工件应用程序组成的提示。

与之前一样,您可以发布使用工件构建的应用程序,以便任何人都可以看到它们。当您的应用程序尝试执行提示时,当前用户将需要登录他们自己的 Anthropic 帐户,以便向他们(而不是您)收取提示费用。

与往常一样,关于这一切如何运作的关键细节都隐藏在系统提示符中的工具描述中。幸好这条提示符很容易泄露。以下是完整的说明,开头如下:

使用工件和分析工具时,您可以访问 window.claude.complete。这使您可以向 Claude API 发送完成请求。这是一个强大的功能,可让您通过代码编排 Claude 完成请求。您可以使用此功能通过分析工具进行子 Claude 编排,并通过工件构建由 Claude 驱动的应用程序。

用户可能会将此功能称为“Claude in Claude”或“Claudeception”。

[…]

该 API 接受一个参数——您想要完成的提示。您可以像这样调用它: const response = await window.claude.complete('prompt you would like to complete')

我还没有在他们的任何官方文档中看到“Claudeception”!

window.claude.complete(prompt)方法也适用于 Claude 分析工具。它接受一个字符串并返回一个字符串。

有趣的是,这个工具只处理字符串。工具说明为 Claude 提供了一些技巧,教他如何快速设计出一个看起来熟悉又令人沮丧的 JSON 响应:

  1. 使用严格的语言:强调响应必须仅采用 JSON 格式。例如:“您的整个响应必须是单个有效的 JSON 对象。请勿包含 JSON 结构之外的任何文本,包括反引号 “`。”
  2. 强调只使用 JSON 格式的重要性。如果你真的想让 Claude 注意到,你可以将所有内容全部大写——例如,写“请勿输出任何非有效 JSON 格式的内容。请勿在前导反引号中使用 “`json。”。

API 没有提供处理先前对话的机制,但 Anthropic 通过告诉工件构建器如何将先前对话设计为 JSON 编码数组来解决这个问题:

像这样构造你的提示:

 const conversationHistory = [   {角色: “用户” ,内容: “你好,克劳德!” } ,   { role : "assistant" , content : "您好!今天我可以为您提供什么帮助?" } ,   { role : "user" , content : "我想了解 AI。" } ,   { role : "assistant" , content : "当然!AI,即人工智能,指的是......" } ,   //...所有先前的消息都应包含在此处 ] ;  const提示= ` 以下是完整的对话记录。在制定回复时,请务必考虑所有这些信息: $ { JSON.stringify (对话历史) }  重要提示:您的回复应该考虑上面提供的整个对话历史记录,而不仅仅是最后一条消息。  使用以下格式的 JSON 对象进行响应: { "response": "考虑到完整的对话历史,您的回复", “情绪”:“对话当前情绪的简要描述” }  您的整个响应必须是一个单一的、有效的 JSON 对象。 ` ;  const响应=等待窗口.克劳德.完成(提示) ;

其中还有另一个示例,展示了如何将角色扮演游戏的状态序列化为 JSON 并与每个提示一起发送。

工具说明承认了当前 Claude Artifacts 环境的另一个限制:在该环境中执行的代码对于主 LLM 来说实际上是不可见的——错误消息不会自动往返到模型。因此,它提出了以下建议:

使用window.claude.complete可能需要跨多个不同的完成请求进行复杂的编排。一旦创建了 Artifact,您将无法查看完成请求是否已正确编排。因此,在构建 Artifact 之前,您应该始终先在分析工具中测试完成请求。

我已经在自己的实验中看到它这样做:它会启动“分析”工具(允许它直接运行 JavaScript 并查看结果)来执行快速原型,然后构建完整的工件。

这是我第一次尝试开发一个支持人工智能的软件:一个翻译应用。我使用以下简单的命令构建了它:

Let's build an AI app that uses Claude to translate from one language to another

以下是文字记录。您可以在这里试用最终的应用程序——它为我构建的应用程序如下所示:

Claude AI Translator 界面截图显示:Claude AI Translator 徽标带有蓝色圆形图标,其中包含“文A”、“由 Claude AI 提供支持,可实现准确的上下文感知翻译”,语言选择下拉菜单显示“从英语”和“到西班牙语”,它们之间带有蓝色交换箭头按钮,文本输入区域标记为“输入要翻译的文本”,其中包含“告诉我一些关于鹈鹕的有趣事实”、“提示:按 Ctrl+Enter 进行翻译”,翻译部分带有绿色的“高置信度”指示符和西班牙语翻译“Cuéntame algunos datos curiosos sobre los pelícanos”带有复制按钮图标。

如果您想亲自使用此功能,需要在“设置 -> 个人资料”部分底部的“功能预览”部分中启用“创建 AI 驱动的工件”。由于我在 Claude iOS 应用程序中找不到此功能切换开关,所以我只能在 Claude 网页版中执行此操作。claude.ai / settings/profile 页面应该有您帐户的此功能。

标签:人工智能、提示工程、生成人工智能、法学硕士、人择、克劳德、克劳德人工制品、氛围编码

原文: https://simonwillison.net/2025/Jun/25/ai-powered-apps-with-claude/#atom-everything

本站文章系自动翻译,站长会周期检查,如果有不当内容,请点此留言,非常感谢。
  • Abhinav
  • Abigail Pain
  • Adam Fortuna
  • Alberto Gallego
  • Alex Wlchan
  • Answer.AI
  • Arne Bahlo
  • Ben Carlson
  • Ben Kuhn
  • Bert Hubert
  • Bits about Money
  • Brian Krebs
  • ByteByteGo
  • Chip Huyen
  • Chips and Cheese
  • Christopher Butler
  • Colin Percival
  • Cool Infographics
  • Dan Sinker
  • David Walsh
  • Dmitry Dolzhenko
  • Dustin Curtis
  • eighty twenty
  • Elad Gil
  • Ellie Huxtable
  • Ethan Marcotte
  • Exponential View
  • FAIL Blog
  • Founder Weekly
  • Geoffrey Huntley
  • Geoffrey Litt
  • Greg Mankiw
  • Henrique Dias
  • Hypercritical
  • IEEE Spectrum
  • Investment Talk
  • Jaz
  • Jeff Geerling
  • Jonas Hietala
  • Josh Comeau
  • Lenny Rachitsky
  • Liz Danzico
  • Lou Plummer
  • Luke Wroblewski
  • Matt Baer
  • Matt Stoller
  • Matthias Endler
  • Mert Bulan
  • Mostly metrics
  • News Letter
  • NextDraft
  • Non_Interactive
  • Not Boring
  • One Useful Thing
  • Phil Eaton
  • Product Market Fit
  • Readwise
  • ReedyBear
  • Robert Heaton
  • Rohit Patel
  • Ruben Schade
  • Sage Economics
  • Sam Altman
  • Sam Rose
  • selfh.st
  • Shtetl-Optimized
  • Simon schreibt
  • Slashdot
  • Small Good Things
  • Taylor Troesh
  • Telegram Blog
  • The Macro Compass
  • The Pomp Letter
  • thesephist
  • Thinking Deep & Wide
  • Tim Kellogg
  • Understanding AI
  • Wes Kao
  • 英文媒体
  • 英文推特
  • 英文独立博客
©2025 搞英语 → 看世界 | Design: Newspaperly WordPress Theme