分享一点 Codex 实践经验：照葫芦画瓢法

需求是这样的，我要重构一个基于 Claude Agent SDK 写的 Agent UI 的消息发送功能，让它能支持发送图片（当前只支持发送文本，图1）

我不会说：帮我把输入框改造一下，支持图片上传🙅

因为上下文信息太少，你这么说它肯定做不了。

要实现这个功能，如果手动做的话：
1. 要改造 UI，让它能支持上传图片
2. 要改造 API 接口，让图片能从前端传到后端
3. 要改造服务端处理，让后端程序将图片传给 Claude Agent SDK

所以我首先要把任务拆分，当然理论上来说这些任务最好分成三个小任务依次做，但实际上 GPT-5-Codex High 已经可以一次性完成这样复杂的任务了，前提是你提示得当，给足上下文。

看我是怎么提示的（图2）：

> 1. 替换现在的发送消息组件为 {参考代码文件1}
> 2. 参考 {参考代码文件2} 的async send(
> prompt: string,
> attachments?: AttachmentData[],
> includeSelection?: boolean,
> ) 和 {参考代码文件3} 的
> export const composeUserContent = (
> text: string,
> attachments?: AttachmentData[],
> selection?: SelectionSnapshot | null,
> ) 实现对附件的处理
> 3. 点击发送后，将附件转成base64字符串后发送给websocket
> 4. 参考下面的代码，重写 ccsdk/ai-client.ts 的消息处理部分代码，让它支持发送附件
{官方文档示例代码docs.claude .com/en/api/agent-sdk/streaming-vs-single-mode}
> 请仔细思考后执行

总结一下就是：
1. 清楚的告诉它怎么做
2. 把参考代码一次性都给到它
参考代码是我事先找到的开源的相关的代码，或者是官方文档，反正东拼西凑，跟我平时要实现系统找资料类似的

就这么简单，执行了 9m52s 完成任务，测试一下有 Bug，描述一下 Bug，让它自己修复（图3），再测试就成了！（图4）

点击图片查看原图

点击图片查看原图

点击图片查看原图

点击图片查看原图