[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-alan-ai--alan-sdk-web":3,"tool-alan-ai--alan-sdk-web":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",145895,2,"2026-04-08T11:32:59",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108111,"2026-04-08T11:23:26",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":10,"last_commit_at":59,"category_tags":60,"status":17},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[35,15,13,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":66,"readme_en":67,"readme_zh":68,"quickstart_zh":69,"use_case_zh":70,"hero_image_url":71,"owner_login":72,"owner_name":73,"owner_avatar_url":74,"owner_bio":75,"owner_company":76,"owner_location":76,"owner_email":77,"owner_twitter":76,"owner_website":78,"owner_url":79,"languages":76,"stars":80,"forks":81,"last_commit_at":82,"license":76,"difficulty_score":32,"env_os":83,"env_gpu":83,"env_ram":83,"env_deps":84,"category_tags":88,"github_topics":90,"view_count":32,"oss_zip_url":76,"oss_zip_packed_at":76,"status":17,"created_at":111,"updated_at":112,"faqs":113,"releases":144},5628,"alan-ai\u002Falan-sdk-web","alan-sdk-web","The Self-Coding System for Your App — Alan AI SDK for Web","alan-sdk-web 是 Alan AI 专为 Web 应用打造的开发工具包，旨在帮助开发者轻松将智能语音助手和生成式 AI 能力嵌入网站或网页应用中。它解决了传统开发中功能迭代慢、需手动编写大量代码以及难以实现自然语言交互的痛点，让应用能够根据用户需求实时生成业务逻辑和用户界面。\n\n这款工具特别适合前端开发者使用，无论是熟悉 JavaScript、React、Vue、Angular 还是其他主流框架的技术人员，都能通过简单的集成步骤，快速为应用添加“自编码”能力。用户只需在 Alan AI Studio 中设计对话脚本，再通过 sdk 将其接入项目，即可实现无需后端深度开发的功能扩展。\n\n其核心技术亮点在于独有的“三层 AI（3LAI）”架构，能够理解应用的 API、界面结构和文档，在运行时像引擎一样动态构建新功能。这意味着软件不再是一成不变的代码堆砌，而是能随业务需求自适应演进的智能体。通过 alan-sdk-web，团队可以在数天内完成原本需要数月开发的 AI 驱动型界面，显著提升开发效率与应用灵活性。","# The Self-Coding System for Your App — Alan AI SDK for Web\r\n\r\n[Alan AI Platform](https:\u002F\u002Falan.app\u002F) • [Alan AI Studio](https:\u002F\u002Fstudio.alan.app\u002Fregister) • [Docs](https:\u002F\u002Falan.app\u002Fdocs) • [FAQ](https:\u002F\u002Falan.app\u002Fdocs\u002Fusage\u002Fadditional\u002Ffaq) •\r\n[Blog](https:\u002F\u002Falan.app\u002Fblog\u002F) • [Twitter](https:\u002F\u002Ftwitter.com\u002Falanvoiceai)\r\n\r\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@alan-ai\u002Falan-sdk-web.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@alan-ai\u002Falan-sdk-web)\r\n[![GitHub release (latest by date)](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002Falan-ai\u002Falan-sdk-web)](https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Freleases)\r\n\r\n\r\n## The Intelligent App Platform\r\n\r\nAlan AI is transforming enterprise software with a new approach, **Application-Level AI**. Instead of relying on manual development or isolated AI tools, we embed an intelligent layer into your application that builds features on demand.\r\n\r\nPowered by our proprietary **Three-Layer AI (3LAI)** architecture, our system generates both business logic and UI in real time—no developers needed. It works across your entire app stack: the user interface, business logic, and data management.\r\n\r\nThe **Intelligent App Platform** lets companies integrate AI-driven interfaces into their existing apps in days, not months.\r\n\r\nIt creates a safe and validated environment from your app’s APIs, GUIs, and documentation, enabling accurate, context-aware code generation. At runtime, the AI acts like a self-coding engine—instantly creating new features based on user needs.\r\n\r\nWith Alan AI, your software becomes truly adaptive—responding, evolving, and scaling automatically.\r\n\r\nThis repository contains the **Alan AI SDK for Web**, enabling you to embed Alan's intelligent layer into your Web applications.\r\n\r\n## How to start\r\n\r\nTo create a Generative AI Agent for your web app:\r\n\r\n1. \u003Ca href=\"https:\u002F\u002Fstudio.alan.app\u002Fregister\" target=\"_blank\">Sign up for Alan AI Studio\u003C\u002Fa> to build dialog scripts in JavaScript and test them.\r\n2. Use the Alan AI SDK for Web to embed a Generative AI Agent to your app or website. For details, see Alan AI documentation for the necessary framework:\r\n\r\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Fvanilla\" target=\"_blank\">JavaScript\u003C\u002Fa>\r\n\t* \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Freact\" target=\"_blank\">React\u003C\u002Fa>\r\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Fangular\" target=\"_blank\">Angular\u003C\u002Fa>\r\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Fvue\" target=\"_blank\">Vue\u003C\u002Fa> \r\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Fember\" target=\"_blank\">Ember\u003C\u002Fa>\r\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Felectron\" target=\"_blank\">Electron\u003C\u002Fa>\r\n\r\n\r\n## Downloads\r\n\r\n* \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@alan-ai\u002Falan-sdk-web\" target=\"_blank\">Alan AI package\u003C\u002Fa>\r\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Freleases\" target=\"_blank\">Alan AI SDK for Web releases\u003C\u002Fa>\r\n\r\n## AI Agent examples\r\n\r\nIn the [Examples](https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Ftree\u002Fmaster\u002Fexamples) folder, you can find example web apps created with:\r\n\r\n* React\r\n* Angular \r\n* Vue\r\n* Ember\r\n* Electron\r\n\r\nTo launch the app, follow the instructions in the README file inside the example app folder. Then press the Alan AI button and try interacting with Alan AI.\r\n\r\n## Other platforms\r\n\r\nYou may also want to try Alan AI SDKs for the following platforms and frameworks:\r\n\r\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-ios\" target=\"_blank\">iOS\u003C\u002Fa>\r\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-android\" target=\"_blank\">Android\u003C\u002Fa>\r\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-flutter\" target=\"_blank\">Flutter\u003C\u002Fa>\r\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-ionic\" target=\"_blank\">Ionic\u003C\u002Fa>\r\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-cordova\" target=\"_blank\">Apache Cordova\u003C\u002Fa>\r\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-reactnative\" target=\"_blank\">React Native\u003C\u002Fa>\r\n\r\n\r\n## Have questions?\r\n\r\nIf you have any questions or something is missing in the documentation:\r\n- Join [Alan AI Slack community](https:\u002F\u002Fapp.slack.com\u002Fclient\u002FTL55N530A) for support\r\n- Contact us at [support@alan.app](mailto:support@alan.app)","# 您的应用自编码系统 —— Alan AI Web SDK\n\n[Alan AI 平台](https:\u002F\u002Falan.app\u002F) • [Alan AI Studio](https:\u002F\u002Fstudio.alan.app\u002Fregister) • [文档](https:\u002F\u002Falan.app\u002Fdocs) • [常见问题解答](https:\u002F\u002Falan.app\u002Fdocs\u002Fusage\u002Fadditional\u002Ffaq) •\n[博客](https:\u002F\u002Falan.app\u002Fblog\u002F) • [Twitter](https:\u002F\u002Ftwitter.com\u002Falanvoiceai)\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@alan-ai\u002Falan-sdk-web.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@alan-ai\u002Falan-sdk-web)\n[![GitHub 发布（按日期最新）](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002Falan-ai\u002Falan-sdk-web)](https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Freleases)\n\n\n## 智能应用平台\n\nAlan AI 正在以一种全新的方式——**应用级 AI**——重塑企业软件。我们不再依赖手动开发或孤立的 AI 工具，而是将智能层嵌入到您的应用程序中，按需构建功能。\n\n我们的系统基于专有的 **三层 AI (3LAI)** 架构，能够实时生成业务逻辑和用户界面，无需任何开发人员参与。它贯穿您整个应用栈：用户界面、业务逻辑和数据管理。\n\n借助 **智能应用平台**，企业可以在几天内而非数月内，将 AI 驱动的交互界面集成到现有应用中。\n\n该平台会从您的应用 API、GUI 和文档中创建一个安全且经过验证的环境，从而实现准确、上下文感知的代码生成。在运行时，AI 就像一个自编码引擎一样，根据用户需求即时创建新功能。\n\n通过 Alan AI，您的软件将真正具备自适应能力——自动响应、进化并扩展。\n\n本仓库包含 **Alan AI Web SDK**，使您能够将 Alan 的智能层嵌入到您的 Web 应用程序中。\n\n## 如何开始\n\n要为您的 Web 应用创建一个生成式 AI 助手：\n\n1. \u003Ca href=\"https:\u002F\u002Fstudio.alan.app\u002Fregister\" target=\"_blank\">注册 Alan AI Studio\u003C\u002Fa>，以 JavaScript 编写对话脚本并进行测试。\n2. 使用 Alan AI Web SDK 将生成式 AI 助手嵌入到您的应用或网站中。有关详细信息，请参阅 Alan AI 文档中针对所需框架的说明：\n\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Fvanilla\" target=\"_blank\">JavaScript\u003C\u002Fa>\n\t* \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Freact\" target=\"_blank\">React\u003C\u002Fa>\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Fangular\" target=\"_blank\">Angular\u003C\u002Fa>\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Fvue\" target=\"_blank\">Vue\u003C\u002Fa> \n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Fember\" target=\"_blank\">Ember\u003C\u002Fa>\n    * \u003Ca href=\"https:\u002F\u002Falan.app\u002Fdocs\u002Fclient-api\u002Fweb\u002Felectron\" target=\"_blank\">Electron\u003C\u002Fa>\n\n\n## 下载\n\n* \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@alan-ai\u002Falan-sdk-web\" target=\"_blank\">Alan AI 软件包\u003C\u002Fa>\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Freleases\" target=\"_blank\">Alan AI Web SDK 发布版本\u003C\u002Fa>\n\n## AI 助手示例\n\n在 [Examples](https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Ftree\u002Fmaster\u002Fexamples) 文件夹中，您可以找到使用以下技术创建的示例 Web 应用：\n\n* React\n* Angular \n* Vue\n* Ember\n* Electron\n\n要启动应用，请按照示例应用文件夹内 README 文件中的说明操作。然后点击 Alan AI 按钮，尝试与 Alan AI 互动。\n\n## 其他平台\n\n您也可以尝试适用于以下平台和框架的 Alan AI SDK：\n\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-ios\" target=\"_blank\">iOS\u003C\u002Fa>\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-android\" target=\"_blank\">Android\u003C\u002Fa>\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-flutter\" target=\"_blank\">Flutter\u003C\u002Fa>\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-ionic\" target=\"_blank\">Ionic\u003C\u002Fa>\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-cordova\" target=\"_blank\">Apache Cordova\u003C\u002Fa>\n* \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-reactnative\" target=\"_blank\">React Native\u003C\u002Fa>\n\n\n## 还有疑问吗？\n\n如果您有任何问题，或者文档中缺少某些内容：\n- 加入 [Alan AI Slack 社区](https:\u002F\u002Fapp.slack.com\u002Fclient\u002FTL55N530A) 获取支持\n- 请通过 [support@alan.app](mailto:support@alan.app) 联系我们","# Alan AI Web SDK 快速上手指南\n\nAlan AI 是一个应用级智能平台，通过嵌入智能层让您的 Web 应用具备实时生成业务逻辑和 UI 的能力。本指南将帮助您快速在 Web 项目中集成 Alan AI。\n\n## 环境准备\n\n在开始之前，请确保您的开发环境满足以下要求：\n\n*   **操作系统**：Windows, macOS 或 Linux\n*   **Node.js**：建议安装 LTS 版本 (v14.0.0 或更高)\n*   **包管理器**：npm 或 yarn\n*   **Alan AI Studio 账号**：您需要一个免费账号来获取项目的 `Key` 并编写对话脚本。\n\n> **提示**：国内开发者若遇到 npm 下载缓慢问题，可临时切换至淘宝镜像源：\n> ```bash\n> npm config set registry https:\u002F\u002Fregistry.npmmirror.com\n> ```\n\n## 安装步骤\n\n您可以通过 npm 或 yarn 将 Alan AI SDK 安装到您的项目中。\n\n**使用 npm 安装：**\n```bash\nnpm install @alan-ai\u002Falan-sdk-web\n```\n\n**使用 yarn 安装：**\n```bash\nyarn add @alan-ai\u002Falan-sdk-web\n```\n\n## 基本使用\n\n以下是以最通用的 **Vanilla JavaScript** 为例的集成步骤。如果您使用 React、Vue 或 Angular，请参考官方文档中对应的框架章节。\n\n### 1. 获取项目 Key\n1. 登录 [Alan AI Studio](https:\u002F\u002Fstudio.alan.app\u002Fregister)。\n2. 创建一个新项目（Project）。\n3. 在左侧边栏顶部复制您的 **Project Key**。\n\n### 2. 添加 Alan 按钮容器\n在您的 HTML 文件（通常是 `index.html`）的 `\u003Cbody>` 标签内，添加一个用于承载 Alan 语音按钮的容器：\n\n```html\n\u003Cdiv id=\"alan-btn\">\u003C\u002Fdiv>\n```\n\n### 3. 初始化 SDK\n在您的 JavaScript 入口文件（如 `main.js` 或直接在 `\u003Cscript>` 标签中）引入并初始化 SDK。请将 `'YOUR_PROJECT_KEY'` 替换为您在第 1 步中复制的实际 Key。\n\n```javascript\nimport alanBtn from '@alan-ai\u002Falan-sdk-web';\n\nalanBtn({\n  key: 'YOUR_PROJECT_KEY', \u002F\u002F 替换为您的 Project Key\n  container: 'alan-btn',\n  onCommand: (commandData) => {\n    if (commandData.command === 'goBack') {\n      \u002F\u002F 处理来自 Alan 的自定义命令，例如导航回上一页\n      window.history.back();\n    }\n  }\n});\n```\n\n### 4. 运行与测试\n启动您的本地开发服务器。页面加载后，您应该能在右下角看到 Alan 按钮。点击按钮即可开始与您的 AI 代理进行语音或文本交互。\n\n> **下一步**：前往 [Alan AI Studio](https:\u002F\u002Fstudio.alan.app\u002F) 编写 JavaScript 对话脚本，定义您的应用如何响应语音指令。","某电商企业急需在其 React 构建的后台管理系统中，为运营团队快速上线一个能自然语言查询实时库存与订单状态的智能助手。\n\n### 没有 alan-sdk-web 时\n- **开发周期漫长**：每新增一个查询维度（如“按地区筛选”），后端需重写 API 接口，前端需手动编写对应的 UI 组件和逻辑，耗时数天。\n- **交互形式僵化**：用户只能依赖预设的下拉菜单和搜索框，无法通过“显示上周销量最高的商品”这类自然语言直接获取数据。\n- **维护成本高昂**：业务逻辑变更时，开发人员必须同步修改前后端代码，容易出现版本不一致导致的 Bug。\n- **扩展性差**：面对突发的临时数据分析需求，无法即时响应，往往需要排期等待开发资源。\n\n### 使用 alan-sdk-web 后\n- **功能即时生成**：依托其三层 AI 架构，系统能根据对话上下文实时生成业务逻辑与界面，新查询功能从“天级”缩短至“分钟级”上线。\n- **自然语言驱动**：运营人员直接通过语音或文字指令与系统交互，alan-sdk-web 自动解析意图并动态渲染结果卡片，无需固定表单。\n- **自适应演进**：当数据库结构或业务规则调整时，AI 引擎自动适配现有 API 文档生成新代码，大幅减少人工维护工作量。\n- **全栈智能覆盖**：无需分别协调前后端开发，alan-sdk-web 直接在 Web 应用中嵌入智能层，统一处理界面、逻辑与数据管理。\n\nalan-sdk-web 将传统软件从“静态代码堆砌”转变为“按需自编码”的智能体，让应用具备随用户需求实时进化的能力。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Falan-ai_alan-sdk-web_af023f94.png","alan-ai","Alan AI","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Falan-ai_79988565.png","Add an Actionable AI Assistant with Text or Voice Conversations to your App or Website",null,"support@alan.app","https:\u002F\u002Falan.app\u002Fplatform","https:\u002F\u002Fgithub.com\u002Falan-ai",2435,104,"2026-04-04T07:07:27","未说明",{"notes":85,"python":83,"dependencies":86},"该工具为前端 Web SDK，主要通过 npm 安装并集成到 JavaScript、React、Angular、Vue、Ember 或 Electron 项目中。运行环境取决于宿主 Web 应用及浏览器，无需本地 GPU、特定 Python 版本或重型依赖库。使用前需在 Alan AI Studio 注册并获取密钥。",[87],"@alan-ai\u002Falan-sdk-web",[35,15,14,13,16,89],"音频",[91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110],"voice-ai","conversational-ai","machine-learning","ai-chat","generative-ai","ai","ai-assistant","ai-chat-bot","custom-dataset","enterprise","explainable-ai","large-language-models","llms","low-code","nlp","productivity","question-answering","text-ai","voice-ai-platform","workflow","2026-03-27T02:49:30.150509","2026-04-09T02:39:53.070948",[114,119,124,129,134,139],{"id":115,"question_zh":116,"answer_zh":117,"source_url":118},25547,"如何在 React 函数组件中正确添加 Alan Button 以避免创建多个实例？","在 React 函数组件中，应使用 `useEffect` 钩子来初始化 Alan Button，并将依赖数组设置为空数组 `[]`。这告诉 React 该效果不依赖于任何 props 或 state 值，因此永远不会重新运行，从而确保只创建一个 Alan Button 实例。代码示例如下：\n\n```javascript\nuseEffect(() => {\n  alanBtn({\n    key: 'alan-project-key',\n    onCommand: ({ command, articles, number }) => {\n      \u002F\u002F 调用客户端代码以响应接收到的命令\n    }\n  });\n}, []);\n```\n如果不传空数组，每次组件重新渲染时都会创建一个新的 Alan 实例，导致多个实例同时运行。","https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Fissues\u002F35",{"id":120,"question_zh":121,"answer_zh":122,"source_url":123},25548,"如何自定义 Alan Button 在网页上的位置？","Alan Button 默认位于右下角，但可以通过在初始化配置中设置 `bottom`、`left` 或 `right` 属性来自定义位置。\n\n例如，将其设置在右下角特定位置：\n```javascript\nvar alanBtnInstance = alanBtn({\n    key: \"your-key\",\n    rootEl: document.getElementById(\"alan-btn\"),\n    bottom: '150px',\n    right: '150px',\n});\n```\n\n或者将其设置在左侧：\n```javascript\nvar alanBtnInstance = alanBtn({\n    key: \"your-key\",\n    rootEl: document.getElementById(\"alan-btn\"),\n    bottom: '150px',\n    left: '150px',\n});\n```","https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Fissues\u002F18",{"id":125,"question_zh":126,"answer_zh":127,"source_url":128},25549,"如何隐藏 Alan 的语音转文字（Speech-to-text）面板，只保留按钮？","您可以在 Alan Studio 中随时隐藏语音转文字面板。操作步骤如下：\n1. 打开 Alan Studio。\n2. 进入 **Integrations**（集成）部分。\n3. 找到并禁用 **Show \"Speech to text\" panel**（显示“语音转文字”面板）选项。\n禁用后，前端将只显示 Alan 按钮，不再显示文字转录面板。","https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Fissues\u002F33",{"id":130,"question_zh":131,"answer_zh":132,"source_url":133},25550,"如何在 Alan Studio 中与他人共享我的语音脚本？","目前直接的链接共享功能即将推出。暂时您可以通过导出脚本来共享：\n1. 在 Alan Studio 中，点击 **Download scripts**（下载脚本）图标。\n2. 这将把语音脚本导出为一个压缩包文件。\n3. 您可以将该文件通过电子邮件或其他方式发送给协作者，他们导入后即可使用。","https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Fissues\u002F32",{"id":135,"question_zh":136,"answer_zh":137,"source_url":138},25551,"Alan SDK 是否提供官方的 TypeScript 类型定义？","是的，官方已经添加了 TypeScript 类型定义。您现在可以在项目中直接使用 TypeScript 进行开发，享受完整的类型提示支持。","https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Fissues\u002F41",{"id":140,"question_zh":141,"answer_zh":142,"source_url":143},25552,"在 Next.js 项目中遇到麦克风权限被拒绝（'microphone is not allowed in this document'）怎么办？","如果您在 Next.js 项目中即使已在浏览器设置中允许麦克风权限，仍收到此错误，可能是由 `next-safe` 等安全包引起的。这些包可能会拦截媒体设备请求。\n\n解决方案是禁用或配置该安全包以允许麦克风访问。有用户反馈，禁用 `next-safe` 包后，Alan 即可正常工作。请检查您的安全策略配置，确保 `microphone` 权限未被阻止。","https:\u002F\u002Fgithub.com\u002Falan-ai\u002Falan-sdk-web\u002Fissues\u002F55",[145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,220,225,230,235,240],{"id":146,"version":147,"summary_zh":148,"released_at":149},162864,"v.1.8.117","暴露的 WebSocket 连接错误","2026-03-24T15:31:15",{"id":151,"version":152,"summary_zh":153,"released_at":154},162865,"v.1.8.116","可自定义的点赞\u002F点踩按钮","2026-03-13T17:17:47",{"id":156,"version":157,"summary_zh":158,"released_at":159},162866,"v.1.8.115","发布版本 1.8.115","2026-03-12T12:56:31",{"id":161,"version":162,"summary_zh":163,"released_at":164},162867,"v.1.8.114","发布版本 1.8.114","2026-03-02T16:00:49",{"id":166,"version":167,"summary_zh":168,"released_at":169},162868,"v.1.8.113","新增可自定义的 iframe 加载器","2026-02-13T16:33:23",{"id":171,"version":172,"summary_zh":173,"released_at":174},162869,"v.1.8.112","发布版本 1.8.112","2026-02-10T06:05:52",{"id":176,"version":177,"summary_zh":178,"released_at":179},162870,"v.1.8.110","改进了 iframe 高度计算机制。","2026-02-03T19:20:04",{"id":181,"version":182,"summary_zh":183,"released_at":184},162871,"v.1.8.109","新增了为渲染后的 Markdown 应用自定义 CSS 样式的功能。","2026-01-23T19:48:01",{"id":186,"version":187,"summary_zh":188,"released_at":189},162872,"v.1.8.108","修复了 iframe 高度问题，并移除了不必要的滚动条。","2026-01-16T18:35:16",{"id":191,"version":192,"summary_zh":193,"released_at":194},162873,"v.1.8.107","新增了在全屏模式下控制内容宽度的功能。","2026-01-13T16:25:12",{"id":196,"version":197,"summary_zh":198,"released_at":199},162874,"v.1.8.106","Fixed issue with welcome message","2025-12-30T17:20:21",{"id":201,"version":202,"summary_zh":203,"released_at":204},162875,"v.1.8.105","Screenshots of chat will now contain iframe content","2025-12-30T16:19:51",{"id":206,"version":207,"summary_zh":208,"released_at":209},162876,"v.1.8.104","Fixed an SVG rendering issue affecting some response-status layouts.","2025-12-19T16:54:44",{"id":211,"version":212,"summary_zh":213,"released_at":214},162877,"v.1.8.103","Release version 1.8.103","2025-12-15T20:06:59",{"id":216,"version":217,"summary_zh":218,"released_at":219},162878,"v.1.8.102","Fixed progress icon exception","2025-12-15T19:30:51",{"id":221,"version":222,"summary_zh":223,"released_at":224},162879,"v.1.8.101","Update lib version to v1.8.101","2025-12-09T16:20:26",{"id":226,"version":227,"summary_zh":228,"released_at":229},162880,"v.1.8.100","Update lib version","2025-12-09T15:52:48",{"id":231,"version":232,"summary_zh":233,"released_at":234},162881,"v.1.8.99","Minor improvements to screenshot capturing functionality","2025-12-08T16:09:20",{"id":236,"version":237,"summary_zh":238,"released_at":239},162882,"v.1.8.98","Add fix for screenshot sending","2025-12-05T22:32:55",{"id":241,"version":242,"summary_zh":243,"released_at":244},162883,"v.1.8.97","Fix unnecessary media loading for button sounds  \r\nFix progress status display issues","2025-11-28T17:12:33"]