人工智能大模型本地部署AI 应用移动开发AI AgentAI 技能MCP Clients【免费下载链接】galleryA gallery that showcases on-device ML/GenAI use cases and allows people to try and use models locally.项目地址https://gitcode.com/GitHub_Trending/gallery44/gallery点击查看免费下载本篇指南以 AI Edge Gallery 仓库内置的interactive-map技能为例完整讲解一个 JavaScript Webview 类型技能JS Skill的目录结构、SKILL.md元数据规范、run_js工具调用契约以及底层如何通过隐藏 Webview 执行index.html、并把 Google Maps 嵌入页渲染进聊天界面的完整链路。读完本文你将掌握声明式技能描述 → LLM 触发工具调用 → JS 脚本返回 Webview的端到端实现并能以此模板编写自己的地图、图表、游戏等交互型技能。技能概览一句话让 LLM 打开地图在 skills/built-in/interactive-map/SKILL.md 中这个技能的定义极其精简全文仅包含三段核心信息--- name: interactive-map description: Show an interactive map view for the given location. --- # Interactive map ## Examples - Show [a place] on interactive map - Find [a place] on interactive map ## Instructions Call the run_js tool with the following exact parameters: - data: A JSON string with the following field - location: The location to show on the map.这段描述传递了三个关键信息元数据frontmattername与description决定了 LLM 何时认出这个技能。当用户说出 Show a place on interactive map 这类请求时模型会把该技能纳入候选。触发示例Examples给 LLM 提供语义相近的自然语言样例帮助它在模糊表达下仍能命中技能。工具调用指令Instructions明确告诉 LLM 必须调用run_js工具并规定了data参数的 JSON 结构——唯一的字段是location。该技能属于仓库 skills 体系中标注为JS Webview的类型见 skills/README.md 的示例清单即用 JS 逻辑生成交互页面再以内嵌 Webview 的形式展示给用户。技能如何被加载与触发在动手写技能之前先理解 AI Edge Gallery 的 Skill 加载机制这有助于把握SKILL.md中每个字段的作用。SKILL.md 的解析规则从 SkillManager.kt 中的convertSkillMdToProto实现可以看到SKILL.md 的解析规则是文件内容按---分隔符切分parts[1]是 frontmatter 头部parts[2]及之后是 Instructions 正文。frontmatter 中name:、description:为必填字段缺失会直接产生解析错误可选的metadata:块支持require-secret、require-secret-description、homepage等扩展字段。内置技能由 loadBuiltInSkills 从assets/skills/dirName/SKILL.md逐目录扫描读取importDirName会被记录为assets/skills/dirName作为脚本资源的定位基准。触发链路描述进入 System Prompt从 skills/README.md 的说明可以看出当用户输入 prompt 时应用会把所有已启用selected技能的名称与描述拼入系统提示词formatSelectedSkills见 SkillExtensions.kt。LLM 判断请求与某个技能匹配后就会按 Instructions 调用对应工具。这也是为什么description必须写得精准、可被模型检索——它直接决定了技能能否被正确触发。run_js 工具契约LLM 与脚本之间的桥梁interactive-map的 Instructions 要求调用run_js工具其真实实现在 RunJsTool.kt工具签名如下fun runJs( skillName: String, // 技能名称如 interactive-map scriptName: String, // 脚本名缺省用 index.html data: String, // 传给脚本的 JSON 字符串 ): MapString, Any关键行为包括data若为空会被规范化成{}再传给脚本见 RunJsTool.kt。脚本 URL 由getJsSkillUrl构造内置技能最终解析为assets/skills/name/scripts/scriptName见 SkillExtensions.kt。脚本的返回值是一个字符串化 JSON必须能被解析为CallJsSkillResult含result/error/image/webview四个可选字段见 ToolAction.kt。解析失败或三个业务字段全空时整个返回值会被当作普通result文本处理。对interactive-map而言LLM 实际发出的调用大致是run_js(skillNameinteractive-map, scriptNameindex.html, data{\location\: \Tokyo Tower\})脚本实现解析 location 并返回 iframe 地图技能的执行逻辑在 skills/built-in/interactive-map/scripts/index.html 中这也是整个技能唯一真正干活的代码。核心代码如下script window[ai_edge_gallery_get_result] async (data) { try { const jsonData JSON.parse(data); const location jsonData.location; const encodedLocation encodeURIComponent(location); return JSON.stringify({ webview: { iframe: true, url: https://maps.google.com/maps?q${encodedLocation}outputembed, }, }); } catch (e) { console.error(e); return JSON.stringify({error: Failed to query location on map: ${e.message}}); } }; /script这段代码演示了 JS Skill 的标准实现范式挂载全局函数ai_edge_gallery_get_result必须挂在window上它是应用调用脚本逻辑的唯一入口。入参是字符串data是字符串化的 JSON必须先JSON.parse才能取字段。这里只取location一个字段与 SKILL.md 中定义的 schema 严格对应。URL 编码通过encodeURIComponent把地点文本安全地拼进 Google Maps 查询 URL避免空格、中文、特殊字符破坏 URL。返回 stringified JSON返回的webview对象包含iframe: true与url。iframe: true表示用嵌入式 iframe 渲染而非 App 内的独立 Webview 页面Google Maps 的outputembed参数正是为 iframe 嵌入设计的无 UI 精简版地图。异常兜底任何解析或执行错误都返回error字段上层会将其标记为失败状态对应 RunJsTool.kt 的 error 分支。仓库中同样结构的内置 JS 技能如calculate-hash、query-wikipedia、qr-code也都遵循这一模式可对照 skills/built-in 目录交叉验证。Webview 结果在 UI 层如何呈现返回的webview对象最终由 AgentChatScreen.kt 消费agentTools.resultWebviewToShow?.let { webview - val url webview.url ?: val iframe webview.iframe true val aspectRatio webview.aspectRatio ?: 1.333f viewModel.addMessage( model model, message ChatMessageWebView( url url, iframe iframe, aspectRatio aspectRatio, hideSenderLabel true, ), ) }两个值得注意的细节iframe 分支当iframe true时地图以内嵌 iframe 形式直接出现在聊天流中否则会用应用内 Webview 加载页面。interactive-map选择 iframe 方案是为了直接复用 Google Maps 的官方嵌入 URL无需维护独立的webview.html页面文件。aspectRatio 默认值Webview 在聊天中占满屏幕宽度aspectRatio用于换算高度缺省为1.333即 4:3。如果你的地图页面想用竖屏或方形比例可以在返回对象里显式指定该字段。编写你自己的交互地图技能参照interactive-map的模板你可以快速落地一个自定义地图技能。完整目录结构如下my-map-skill/ ├── SKILL.md └── scripts/ └── index.html第一步编写 SKILL.md--- name: my-map-skill description: Show an interactive map view for the given location. --- # My interactive map ## Examples - Show [a place] on interactive map - Find [a place] on interactive map ## Instructions Call the run_js tool with the following exact parameters: - data: A JSON string with the following field - location: The location to show on the map.请保持name与目录名一致kebab-casedescription简短且包含触发关键词。这里刻意复用了与内置技能相同的调用契约便于读者对照。第二步编写 scripts/index.html!DOCTYPE html html langen head meta charsetUTF-8 titleInteractive map/title /head body script window[ai_edge_gallery_get_result] async (data) { try { const jsonData JSON.parse(data); const location jsonData.location; if (!location) { throw new Error(Missing location field in data.); } const encodedLocation encodeURIComponent(location); return JSON.stringify({ webview: { iframe: true, url: https://maps.google.com/maps?q${encodedLocation}outputembed, aspectRatio: 1.333, }, }); } catch (e) { console.error(e); return JSON.stringify({error: Failed to query location on map: ${e.message}}); } }; /script /body /html相对内置版本这里补充了location缺失时的显式校验并显式写出aspectRatio方便你根据页面比例调整。第三步把技能加进 App技能可以通过三种方式加入 AI Edge Gallery操作入口见 skills/README.md 的 How to Add Skills in the Gallery App 章节从 Featured 列表添加在 Agent Skills 用例中点击 Skills chip 进入 Skill Manager点 () 选择Add skill from featured list。从 URL 加载将技能托管在真正的 Web 托管服务如 GitHub Pages注意需在仓库根目录放置.nojekyll文件以避免 Markdown 被转成 HTML然后选择Load skill from URL并填入指向技能目录的 URL。本地导入用adb push my-map-skill/ /sdcard/Download/把整个技能目录推送到设备再选择Import local skill并选中该目录。应用会解析SKILL.md并把整个目录复制到内部存储。导入后即可在对话中尝试 Show the Eiffel Tower on interactive map 之类的指令验证技能是否被触发。常见问题与调试技能未被触发优先检查description是否包含与用户表达语义相近的关键词同时确认技能在 Skill Manager 中处于启用状态selected true只有启用技能才会进入 System Prompt对应 SkillManager.kt 的getSelectedSkills。地图没有渲染确认返回对象中webview.url的outputembed参数未被丢弃且iframe: true已设置。若使用自定义地图服务如高德、Leaflet需保证返回的 URL 允许被 iframe 嵌入目标站点的X-Frame-Options/ CSP 可能拦截嵌入。返回被当作纯文本脚本返回值必须是字符串化的JSON且至少包含result、webview、image三者之一否则上层会把它整体当作普通文本展示见 RunJsTool.kt。需要断点排查运行 JS 技能时可展开执行面板查看传给脚本的具体data与调用详情该面板同时提供实时 console 日志可直接观察console.error(e)的输出。小结interactive-map是 AI Edge Gallery 中最小可用 JS Webview 技能的典范SKILL.md只负责声明元数据与工具调用契约index.html通过ai_edge_gallery_get_result接收 LLM 传来的location将其编码进 Google Maps 嵌入 URL再以iframeWebview 形式渲染到聊天界面。理解这条链路后你既可以直接复用、扩展这个地图技能也能举一反三用同样的SKILL.md scripts/index.html Webview 返回结构搭建图表、日历、游戏面板等各类交互型技能。赞分享人工智能大模型本地部署AI 应用移动开发AI AgentAI 技能MCP Clients【免费下载链接】galleryA gallery that showcases on-device ML/GenAI use cases and allows people to try and use models locally.项目地址https://gitcode.com/GitHub_Trending/gallery44/gallery点击查看免费下载相关推荐AI Edge Gallery 内置 Skill 剖析calculate-hash 的 SKILL.md 定义与 run_js 工具调用机制AI Edge Gallery 内置 Skill 剖析calculate hash 的 SKILL.md 定义与 run_js 工具调用机制 AI Edge人工智能大模型本地部署AI 应用移动开发AI AgentAI 技能MCP ClientsAI Edge Gallery 交互式地图技能 interactive-map 全解析从 SKILL.md 指令到 WebView 渲染的端侧 Agent 调用链AI Edge Gallery 交互式地图技能 interactive map 全解析从 SKILL.md 指令到 WebView 渲染的端侧 Agent 调人工智能大模型本地部署AI 应用移动开发AI AgentAI 技能MCP ClientsAI Edge Gallery 文本型 Agent Skill 实战解析 kitchen-adventure 的 SKILL.md 设计范式AI Edge Gallery 文本型 Agent Skill 实战解析 kitchen adventure 的 SKILL.md 设计范式 导读 本文以 A人工智能大模型本地部署AI 应用移动开发AI AgentAI 技能MCP Clients上一篇WarcraftHelper终极指南5分钟解锁魔兽争霸3现代兼容性与性能优化下一篇SO100 仿真 3 分钟跑通URDF 模型解析 rerun 可视化实操创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考