CopilotKit 与 LlamaIndex 多模态 Demo 端到端验收指南图片 / PDF 附件问答实战【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit本指南以 CopilotKit 仓库中showcase/integrations/llamaindex集成的多模态MultimodalDemo 为主线系统讲解如何在 LlamaIndex Agent 后端上实现上传图片 / PDF 并针对其内容提问的能力涵盖前置条件、测试步骤、前后端完整链路、源码级原理与自动化回归验证。读完本文你将掌握 CopilotKit 聊天界面如何把图片与 PDF 附件送入视觉模型gpt-4o并返回基于附件内容的回答以及如何用 Playwright 端到端用例固化该行为。多模态 Demo 验收目标showcase/integrations/llamaindex/qa/multimodal.md是该项目 QAQuality Assurance体系中针对多模态演示页的验收文档。它的核心目标非常聚焦验证 Agent 能否真正看见用户上传的图片、读懂用户上传的 PDF并基于附件内容回答问题而不仅是把附件当作装饰性的聊天元素。这对应了 CopilotKit 生态中Bring Your Own Agent、Any Channel理念下的一个具体落地场景——把 CopilotKit 的对话 UI 与 LlamaIndex 的 Agent 运行时对接让多模态输入在 AG-UI 协议与 LlamaIndex 工作流之间无损流转。该功能的完整工程实现位于 showcase/integrations/llamaindex/src/agents/multimodal_agent.py前端页面、独立运行时路由、示例文件与端到端测试共同构成一个可复现的参考实现。前置条件根据 QA 文档运行与验收该 Demo 需要满足两个硬性前提Demo 已部署且可访问多模态演示页/demos/multimodal需要处于可访问状态。它的注册信息位于 manifest.yaml其中声明了 Demo 名称Multimodal Attachments、演示路由、依赖的 Agent 源码与前端组件以及需要 vision-capable agent (gpt-4o)这一关键约束。Agent 后端配置了视觉能力模型gpt-4o这是整个多模态能力成立的基础。gpt-4o同时接受文本与图像输入是 Demo 中默认指定的视觉模型gpt-4o本身并不接受原生 PDF 输入因此 PDF 需要在 Python 侧先做压平flatten为文本的预处理详见下文。视觉模型在 Agent 侧的落地方式在 multimodal_agent.py 中Agent 通过llama-index-protocols-ag-ui包的get_ag_ui_workflow_router构造multimodal_router get_ag_ui_workflow_router( llmOpenAI(modelgpt-4o, temperature0.2, **_openai_kwargs), frontend_tools[], backend_tools[], system_promptSYSTEM_PROMPT, initial_state{}, )关键参数含义llmOpenAI(modelgpt-4o, temperature0.2)视觉模型配置。temperature0.2让回答偏保守、稳定适合描述附件内容这类事实性任务。OPENAI_BASE_URL环境变量若设置了该变量会把其值写入api_base透传给 OpenAI 客户端_openai_kwargs逻辑方便接入代理或兼容端点。frontend_tools[]/backend_tools[]多模态 Demo 刻意不注册任何工具把全部上下文预算留给附件内容理解。system_prompt模块顶部定义的SYSTEM_PROMPT明确指导模型行为——用户可能附带图片或文档PDF当出现附件时仔细分析附件并回答用户问题若没有附件则正常回答文本问题回复保持简洁1-3 句话除非用户要求深入。这段提示词是 QA 验收Agent 基于图片内容回答的行为来源。文档头注释还说明了协议层的关键事实llama-index-protocols-ag-ui0.4.1会把 AG-UI 协议中的文本、图像与文档内容部件content parts转换为对应的 LlamaIndex blocks交给 workflow router 处理。这也是该 Demo 在requirements.txt中锁定llama-index-core0.14.24、llama-index-llms-openai0.7.10、llama-index-protocols-ag-ui0.4.1三个版本的原因。PDF 的处理策略压平为文本来自前端页面的架构说明page.tsx图片以原生形式转发给模型gpt-4o 原生支持图像输入PDF 在 Python 侧通过pypdf压平为文本以实现provider-agnostic不依赖具体模型是否支持 PDF的统一行为。这意味着对 PDF 的提问实际上走的是PDF → 抽取文本 → 放入模型上下文的路径对任何文本能力模型都成立不必强求模型原生支持文档输入。测试步骤QA 文档原文验收清单QA 文档multimodal.md规定的验收步骤为进入多模态 Demo 页面Navigate to the multimodal demo page上传一张图片并就其提问Upload an image and ask a question about it验证 Agent 基于图片内容回答Verify the agent answers based on the image content上传一个 PDF 并就其内容提问Upload a PDF and ask a question about its contents下面分别说明每一步在实现层面的对应链路与可验证依据。步骤 1进入 Demo 页面页面入口为/demos/multimodal。前端入口 page.tsx 将页面结构组织为CopilotKit runtimeUrl/api/copilotkit-multimodal agentmultimodal-demo LegacyConverterShim / MultimodalChat / /CopilotKitruntimeUrl/api/copilotkit-multimodal指向专属的运行时路由而非主路由把视觉模型的调用成本隔离到该 Demo 单独承担其他演示单元继续使用更便宜的纯文本模型。agentmultimodal-demo绑定专用 Agent slug。LegacyConverterShim负责新旧 AG-UI 内容部件形状的兼容重写与附件去重详见下文源码原理。页面主体MultimodalChatmultimodal-chat.tsx渲染了一个带示例按钮行和CopilotChat组件的全屏对话区并注入了一段一次性弹跳动画CSS 来吸引用户注意回形针附件按钮。步骤 2 与 3上传图片并验证基于图片的回答上传能力的开关在CopilotChat的attachments配置上const MAX_FILE_SIZE_BYTES 10 * 1024 * 1024; // 10 MB const ACCEPT_MIME image/*,application/pdf; CopilotChat agentIdmultimodal-demo attachments{{ enabled: true, accept: ACCEPT_MIME, maxSize: MAX_FILE_SIZE_BYTES, onUpload, onUploadFailed: (err) { console.warn([multimodal-demo] attachment rejected, err); }, }} /参数说明enabled: true开启附件上传能力聊天输入框出现回形针附件菜单。accept: image/*,application/pdf文件选择器只接受图片与 PDF从入口处约束上传类型。maxSize: 10 MB单文件上限 10 MB超出时由CopilotChat的默认 UI 弹出校验失败提示同时触发onUploadFailed回调记录告警。onUpload绑定到 file-to-data-attachment.ts 中的fileToDataAttachment用浏览器FileReader把文件读成data:mime;base64,payload形式再剥离前缀只把原始 base64 作为AttachmentUploadResult的data变体返回含mimeType与metadata.filename/size。该 Demo 刻意选择base64 内联而非上传到外部存储保证 Demo 自包含、无外部依赖。图片上传后Agent 侧把图片以原生视觉输入交给 gpt-4o回答即来源于图片内容本身。这也是 QA 步骤 3 的验证点。步骤 4上传 PDF 并验证基于内容的回答PDF 走同一条附件管线区别在于后端处理pypdf在 Python 侧把 PDF 内容压平为文本后进入模型上下文。因此对 PDF 的提问同样能得到基于文档内容的回答且不依赖模型是否原生支持 PDF 输入。源码原理一条消息的完整往返链路专属运行时路由成本隔离api/copilotkit-multimodal/route.ts 为该 Demo 单独创建了一个CopilotRuntimeconst AGENT_URL process.env.AGENT_URL || http://localhost:8000; const multimodalAgent new HttpAgent({ url: ${AGENT_URL}/multimodal/run });AGENT_URL默认指向http://localhost:8000本地 Agent 服务可通过环境变量覆盖。使用ag-ui/client的HttpAgent连接 LlamaIndex 服务的/multimodal/run端点并把 slugmultimodal-demo与default都映射到该 Agent。路由文件头注释再次强调gpt-4o 是视觉能力模型把它隔离到独立 runtime让视觉模型的成本只由这一个 Demo 承担。前端示例按钮与回形针共用的单一代码路径page.tsx 的架构说明指出示例文件位于public/demo-files/即sample.png与sample.pdf示例按钮组件在客户端 fetch 文件、包装成File并通过 DataTransfer 驱动与回形针相同的隐藏input typefile触发change事件——示例路径与真实上传路径共用同一套onUpload/useAttachments管线一个能用一个就能用。file-to-data-attachment.ts 中fileToDataAttachment的注释特别说明maxSize: 10 MB是为了给浏览器内联 base64方案兜底防止把消息体撑爆。旧版转换垫片新协议形状与旧转换器的桥接legacy-converter-shim.tsx 修复了三个真实存在的兼容问题值得作为多模态接入的参考出站现代部件对 Agent 不可见已发布的ag-ui/langgraph转换器0.0.x只认旧的{ type: binary, mimeType, data | url }形状会静默丢弃现代的{ type: image | document, source: {...} }部件。垫片在onRunInitialized中为每个现代媒体部件追加而非替换一个binary镜像——不能替换是因为聊天 UI 的getMediaParts只渲染image|audio|video|document替换会让附件在消息回环后从界面上消失。回环媒体被加倍且类型错乱转换器把出站的binary部件发成 LangChain 的image_url又把传入的image_url一律收回为 AG-UIimage部件导致 PDF 被标记成type: image却带mimeType: application/pdf被渲染成加载失败的img。垫片在onMessagesSnapshotEvent与onRunFinalized中按source.value去重并按 mimeType 重新推导类型image/*→image、audio/*→audio、video/*→video、其余→document让 PDF 正确落到DocumentAttachment图标 文件名。PDF 压平文本泄漏进聊天气泡早期实现中 Python 中间件通过before_model改写状态导致[Attached document]\npdf body这样的占位文本残留在用户消息里。当前实现改为在模型请求层面作用域内重写wrap_model_call彻底消除 UI 泄漏该点由 E2E 用例固化。E2E 测试把行为固化为回归防线tests/e2e/multimodal.spec.ts 是multimodal.mdQA 步骤的可执行化版本用 Playwright 覆盖五个场景页面加载完整性示例按钮行、示例按钮、聊天输入框、回形针菜单均可见示例图片点击后自动发送预设提示词、用户消息中恰好一个img、无 Failed to load image、助手回答引用附件断言/copilotkit|logo|image/i示例 PDF用户消息中恰好一个PDF 文档 chip而非破碎图片、消息体不含[Attached document]泄漏文本、助手回答引用附件同会话图片→PDF与PDF→图片每个用户消息各自保留唯一的正确 chip无交叉污染、无加倍。测试文件头还记录了固化的回归点每个都曾是真实 bug自动发送被上传竞态吞掉、附件重复显示两个缩略图、PDF 被错误渲染成破图、压平文本泄漏、以及同一会话内连续上传不同类型的交叉污染。测试约定两个预置提示词与showcase/aimock/feature-parity.json中的 canned prompts 一一对应can you tell me what is in this demo image I just attached / …demo pdf I just attached。常见故障排查来自源码注释的实测经验多模态 Demo 的源码注释里沉淀了几个实操中易踩的坑Git LFS 指针文件冒充真资源如果部署环境未执行git lfs pullNext.js 可能以Content-Type: image/png返回 Git LFSpointer以version https://git-lfs...开头的纯文本短桩。示例按钮组件用魔数校验兜底PNG 必须以89 50 4E 47开头、PDF 必须以25 50 44 46开头并在头部 64 字节内检测 LFS pointer 前缀失败时抛出可操作的错误提示而非把坏字节发给模型。附件显示成两个 chip / 一个破图多半是ag-ui/langgraph回环导致的重复与类型错乱确认LegacyConverterShim已正确挂载并在onRunInitialized/onMessagesSnapshotEvent/onRunFinalized三个时机执行重写与去重。Cannot send while attachments are uploading自动发送时若附件仍处于status: uploadingCopilotChat.onSubmitInput会拒绝发送并清空输入。示例按钮组件改用 V2 Agent 编程式接口agent.addMessage(...)copilotkit.runAgent({ agent })在调用前就把附件组装成已含 base64 的内容部件从根本上消除上传竞态。结论与延伸阅读多模态 QA 验收进入页面 → 传图提问 → 验证图片回答 → 传 PDF 提问在本仓库中不是孤立的检查清单而是由完整工程实现支撑的闭环gpt-4o视觉模型 LlamaIndex AG-UI workflow routermultimodal_agent.py、独立运行时路由route.ts、附件配置与 base64 转换multimodal-chat.tsx、file-to-data-attachment.ts、协议兼容垫片legacy-converter-shim.tsx以及 Playwright 回归用例multimodal.spec.ts。参照这些文件你可以把上传图片/PDF 并基于内容提问的能力复用到自己的 LlamaIndex CopilotKit 集成中。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 CopilotKit 与 LlamaIndex 多模态 Demo 端到端验收指南：图片 / PDF 附件问答实战
CopilotKit 与 LlamaIndex 多模态 Demo 端到端验收指南图片 / PDF 附件问答实战【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit本指南以 CopilotKit 仓库中showcase/integrations/llamaindex集成的多模态MultimodalDemo 为主线系统讲解如何在 LlamaIndex Agent 后端上实现上传图片 / PDF 并针对其内容提问的能力涵盖前置条件、测试步骤、前后端完整链路、源码级原理与自动化回归验证。读完本文你将掌握 CopilotKit 聊天界面如何把图片与 PDF 附件送入视觉模型gpt-4o并返回基于附件内容的回答以及如何用 Playwright 端到端用例固化该行为。多模态 Demo 验收目标showcase/integrations/llamaindex/qa/multimodal.md是该项目 QAQuality Assurance体系中针对多模态演示页的验收文档。它的核心目标非常聚焦验证 Agent 能否真正看见用户上传的图片、读懂用户上传的 PDF并基于附件内容回答问题而不仅是把附件当作装饰性的聊天元素。这对应了 CopilotKit 生态中Bring Your Own Agent、Any Channel理念下的一个具体落地场景——把 CopilotKit 的对话 UI 与 LlamaIndex 的 Agent 运行时对接让多模态输入在 AG-UI 协议与 LlamaIndex 工作流之间无损流转。该功能的完整工程实现位于 showcase/integrations/llamaindex/src/agents/multimodal_agent.py前端页面、独立运行时路由、示例文件与端到端测试共同构成一个可复现的参考实现。前置条件根据 QA 文档运行与验收该 Demo 需要满足两个硬性前提Demo 已部署且可访问多模态演示页/demos/multimodal需要处于可访问状态。它的注册信息位于 manifest.yaml其中声明了 Demo 名称Multimodal Attachments、演示路由、依赖的 Agent 源码与前端组件以及需要 vision-capable agent (gpt-4o)这一关键约束。Agent 后端配置了视觉能力模型gpt-4o这是整个多模态能力成立的基础。gpt-4o同时接受文本与图像输入是 Demo 中默认指定的视觉模型gpt-4o本身并不接受原生 PDF 输入因此 PDF 需要在 Python 侧先做压平flatten为文本的预处理详见下文。视觉模型在 Agent 侧的落地方式在 multimodal_agent.py 中Agent 通过llama-index-protocols-ag-ui包的get_ag_ui_workflow_router构造multimodal_router get_ag_ui_workflow_router( llmOpenAI(modelgpt-4o, temperature0.2, **_openai_kwargs), frontend_tools[], backend_tools[], system_promptSYSTEM_PROMPT, initial_state{}, )关键参数含义llmOpenAI(modelgpt-4o, temperature0.2)视觉模型配置。temperature0.2让回答偏保守、稳定适合描述附件内容这类事实性任务。OPENAI_BASE_URL环境变量若设置了该变量会把其值写入api_base透传给 OpenAI 客户端_openai_kwargs逻辑方便接入代理或兼容端点。frontend_tools[]/backend_tools[]多模态 Demo 刻意不注册任何工具把全部上下文预算留给附件内容理解。system_prompt模块顶部定义的SYSTEM_PROMPT明确指导模型行为——用户可能附带图片或文档PDF当出现附件时仔细分析附件并回答用户问题若没有附件则正常回答文本问题回复保持简洁1-3 句话除非用户要求深入。这段提示词是 QA 验收Agent 基于图片内容回答的行为来源。文档头注释还说明了协议层的关键事实llama-index-protocols-ag-ui0.4.1会把 AG-UI 协议中的文本、图像与文档内容部件content parts转换为对应的 LlamaIndex blocks交给 workflow router 处理。这也是该 Demo 在requirements.txt中锁定llama-index-core0.14.24、llama-index-llms-openai0.7.10、llama-index-protocols-ag-ui0.4.1三个版本的原因。PDF 的处理策略压平为文本来自前端页面的架构说明page.tsx图片以原生形式转发给模型gpt-4o 原生支持图像输入PDF 在 Python 侧通过pypdf压平为文本以实现provider-agnostic不依赖具体模型是否支持 PDF的统一行为。这意味着对 PDF 的提问实际上走的是PDF → 抽取文本 → 放入模型上下文的路径对任何文本能力模型都成立不必强求模型原生支持文档输入。测试步骤QA 文档原文验收清单QA 文档multimodal.md规定的验收步骤为进入多模态 Demo 页面Navigate to the multimodal demo page上传一张图片并就其提问Upload an image and ask a question about it验证 Agent 基于图片内容回答Verify the agent answers based on the image content上传一个 PDF 并就其内容提问Upload a PDF and ask a question about its contents下面分别说明每一步在实现层面的对应链路与可验证依据。步骤 1进入 Demo 页面页面入口为/demos/multimodal。前端入口 page.tsx 将页面结构组织为CopilotKit runtimeUrl/api/copilotkit-multimodal agentmultimodal-demo LegacyConverterShim / MultimodalChat / /CopilotKitruntimeUrl/api/copilotkit-multimodal指向专属的运行时路由而非主路由把视觉模型的调用成本隔离到该 Demo 单独承担其他演示单元继续使用更便宜的纯文本模型。agentmultimodal-demo绑定专用 Agent slug。LegacyConverterShim负责新旧 AG-UI 内容部件形状的兼容重写与附件去重详见下文源码原理。页面主体MultimodalChatmultimodal-chat.tsx渲染了一个带示例按钮行和CopilotChat组件的全屏对话区并注入了一段一次性弹跳动画CSS 来吸引用户注意回形针附件按钮。步骤 2 与 3上传图片并验证基于图片的回答上传能力的开关在CopilotChat的attachments配置上const MAX_FILE_SIZE_BYTES 10 * 1024 * 1024; // 10 MB const ACCEPT_MIME image/*,application/pdf; CopilotChat agentIdmultimodal-demo attachments{{ enabled: true, accept: ACCEPT_MIME, maxSize: MAX_FILE_SIZE_BYTES, onUpload, onUploadFailed: (err) { console.warn([multimodal-demo] attachment rejected, err); }, }} /参数说明enabled: true开启附件上传能力聊天输入框出现回形针附件菜单。accept: image/*,application/pdf文件选择器只接受图片与 PDF从入口处约束上传类型。maxSize: 10 MB单文件上限 10 MB超出时由CopilotChat的默认 UI 弹出校验失败提示同时触发onUploadFailed回调记录告警。onUpload绑定到 file-to-data-attachment.ts 中的fileToDataAttachment用浏览器FileReader把文件读成data:mime;base64,payload形式再剥离前缀只把原始 base64 作为AttachmentUploadResult的data变体返回含mimeType与metadata.filename/size。该 Demo 刻意选择base64 内联而非上传到外部存储保证 Demo 自包含、无外部依赖。图片上传后Agent 侧把图片以原生视觉输入交给 gpt-4o回答即来源于图片内容本身。这也是 QA 步骤 3 的验证点。步骤 4上传 PDF 并验证基于内容的回答PDF 走同一条附件管线区别在于后端处理pypdf在 Python 侧把 PDF 内容压平为文本后进入模型上下文。因此对 PDF 的提问同样能得到基于文档内容的回答且不依赖模型是否原生支持 PDF 输入。源码原理一条消息的完整往返链路专属运行时路由成本隔离api/copilotkit-multimodal/route.ts 为该 Demo 单独创建了一个CopilotRuntimeconst AGENT_URL process.env.AGENT_URL || http://localhost:8000; const multimodalAgent new HttpAgent({ url: ${AGENT_URL}/multimodal/run });AGENT_URL默认指向http://localhost:8000本地 Agent 服务可通过环境变量覆盖。使用ag-ui/client的HttpAgent连接 LlamaIndex 服务的/multimodal/run端点并把 slugmultimodal-demo与default都映射到该 Agent。路由文件头注释再次强调gpt-4o 是视觉能力模型把它隔离到独立 runtime让视觉模型的成本只由这一个 Demo 承担。前端示例按钮与回形针共用的单一代码路径page.tsx 的架构说明指出示例文件位于public/demo-files/即sample.png与sample.pdf示例按钮组件在客户端 fetch 文件、包装成File并通过 DataTransfer 驱动与回形针相同的隐藏input typefile触发change事件——示例路径与真实上传路径共用同一套onUpload/useAttachments管线一个能用一个就能用。file-to-data-attachment.ts 中fileToDataAttachment的注释特别说明maxSize: 10 MB是为了给浏览器内联 base64方案兜底防止把消息体撑爆。旧版转换垫片新协议形状与旧转换器的桥接legacy-converter-shim.tsx 修复了三个真实存在的兼容问题值得作为多模态接入的参考出站现代部件对 Agent 不可见已发布的ag-ui/langgraph转换器0.0.x只认旧的{ type: binary, mimeType, data | url }形状会静默丢弃现代的{ type: image | document, source: {...} }部件。垫片在onRunInitialized中为每个现代媒体部件追加而非替换一个binary镜像——不能替换是因为聊天 UI 的getMediaParts只渲染image|audio|video|document替换会让附件在消息回环后从界面上消失。回环媒体被加倍且类型错乱转换器把出站的binary部件发成 LangChain 的image_url又把传入的image_url一律收回为 AG-UIimage部件导致 PDF 被标记成type: image却带mimeType: application/pdf被渲染成加载失败的img。垫片在onMessagesSnapshotEvent与onRunFinalized中按source.value去重并按 mimeType 重新推导类型image/*→image、audio/*→audio、video/*→video、其余→document让 PDF 正确落到DocumentAttachment图标 文件名。PDF 压平文本泄漏进聊天气泡早期实现中 Python 中间件通过before_model改写状态导致[Attached document]\npdf body这样的占位文本残留在用户消息里。当前实现改为在模型请求层面作用域内重写wrap_model_call彻底消除 UI 泄漏该点由 E2E 用例固化。E2E 测试把行为固化为回归防线tests/e2e/multimodal.spec.ts 是multimodal.mdQA 步骤的可执行化版本用 Playwright 覆盖五个场景页面加载完整性示例按钮行、示例按钮、聊天输入框、回形针菜单均可见示例图片点击后自动发送预设提示词、用户消息中恰好一个img、无 Failed to load image、助手回答引用附件断言/copilotkit|logo|image/i示例 PDF用户消息中恰好一个PDF 文档 chip而非破碎图片、消息体不含[Attached document]泄漏文本、助手回答引用附件同会话图片→PDF与PDF→图片每个用户消息各自保留唯一的正确 chip无交叉污染、无加倍。测试文件头还记录了固化的回归点每个都曾是真实 bug自动发送被上传竞态吞掉、附件重复显示两个缩略图、PDF 被错误渲染成破图、压平文本泄漏、以及同一会话内连续上传不同类型的交叉污染。测试约定两个预置提示词与showcase/aimock/feature-parity.json中的 canned prompts 一一对应can you tell me what is in this demo image I just attached / …demo pdf I just attached。常见故障排查来自源码注释的实测经验多模态 Demo 的源码注释里沉淀了几个实操中易踩的坑Git LFS 指针文件冒充真资源如果部署环境未执行git lfs pullNext.js 可能以Content-Type: image/png返回 Git LFSpointer以version https://git-lfs...开头的纯文本短桩。示例按钮组件用魔数校验兜底PNG 必须以89 50 4E 47开头、PDF 必须以25 50 44 46开头并在头部 64 字节内检测 LFS pointer 前缀失败时抛出可操作的错误提示而非把坏字节发给模型。附件显示成两个 chip / 一个破图多半是ag-ui/langgraph回环导致的重复与类型错乱确认LegacyConverterShim已正确挂载并在onRunInitialized/onMessagesSnapshotEvent/onRunFinalized三个时机执行重写与去重。Cannot send while attachments are uploading自动发送时若附件仍处于status: uploadingCopilotChat.onSubmitInput会拒绝发送并清空输入。示例按钮组件改用 V2 Agent 编程式接口agent.addMessage(...)copilotkit.runAgent({ agent })在调用前就把附件组装成已含 base64 的内容部件从根本上消除上传竞态。结论与延伸阅读多模态 QA 验收进入页面 → 传图提问 → 验证图片回答 → 传 PDF 提问在本仓库中不是孤立的检查清单而是由完整工程实现支撑的闭环gpt-4o视觉模型 LlamaIndex AG-UI workflow routermultimodal_agent.py、独立运行时路由route.ts、附件配置与 base64 转换multimodal-chat.tsx、file-to-data-attachment.ts、协议兼容垫片legacy-converter-shim.tsx以及 Playwright 回归用例multimodal.spec.ts。参照这些文件你可以把上传图片/PDF 并基于内容提问的能力复用到自己的 LlamaIndex CopilotKit 集成中。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考