如何把GitHub项目接入Adorable：双向同步完整设置指南

如何把GitHub项目接入Adorable双向同步完整设置指南【免费下载链接】AdorableOpen Source Lovable项目地址: https://gitcode.com/gh_mirrors/ad/AdorableAdorable 是一款开源 AI 应用构建器Open Source Lovable支持通过对话让 AI 在沙箱虚拟机中实时编写、运行并发布应用。它的核心亮点之一是GitHub 双向同步你可以把已有的 GitHub 项目一键接入 AdorableAI 修改的代码会自动提交回仓库你在 GitHub 上的更新也会同步到工作区实现代码与对话历史的双向持久化。本文将带你从零完成本地部署、GitHub App 配置和项目接入的完整流程。一、认识 Adorable为什么值得把 GitHub 项目接入它Adorable 把聊天框 实时预览 终端 一键发布整合在一个界面里主要能力包括对话式开发AI 在沙箱 VM 中直接写代码、改代码、跑命令️实时预览与终端嵌入浏览器即时看到效果终端可查看开发服务器日志一键发布单个按钮即可部署到生产域名项目持久化每个项目由一个 Git 仓库支撑对话和历史跨会话保留GitHub Sync从已有 GitHub 仓库创建项目并保持双向同步整体架构与功能说明可参考 README.md 和 adorable/README.md。二、准备工作5分钟完成本地部署1. 克隆并安装项目git clone https://gitcode.com/gh_mirrors/ad/Adorable cd Adorable/adorable cp .env.example .env.local # 填入你的 API Key npm install npm run dev打开http://localhost:3000即可进入工作台。2. 配置 LLM API Key在.env.local中配置模型提供商默认 OpenAI也可切换 ClaudeLLM_PROVIDERopenai OPENAI_API_KEYyour-openai-api-key如果启动时没有全局 Key界面会弹出引导页让你选择提供商并粘贴 Key密钥会以 HTTP-only Cookie 安全存储相关逻辑在 api-key-gate.tsx。默认模型等运行参数定义在 vars.ts。三、创建 GitHub App双向同步的前提双向同步依赖 GitHub App 获得对你仓库的读写授权步骤如下创建 GitHub App通过 Freestyle 控制台Dash按提示创建 GitHub App并记录 Client ID / Client Secret安装 App 到目标仓库在你的 GitHub 账号或组织中选择要接入的仓库授予 App 权限验证安装成功后即可在 Adorable 中使用 From GitHub 选项创建项目 App 只对你显式安装的仓库生效私有仓库同样支持安全性可控。详细步骤可参考 adorable/README.md 中的 Set Up GitHub Sync 章节。四、一键接入从 GitHub 仓库创建项目部署完成后操作非常直观在 Adorable 首页点击From GitHub带 GitHub 图标的按钮在弹窗中粘贴仓库地址必须使用owner/repo格式如my-name/my-app格式错误会提示 Repository must be in owner/repo format确认后即可在左侧项目列表看到新项目AI 会自动读取代码并开始对话这个入口的交互逻辑实现在 home-welcome.tsx创建请求由后端 repos/route.ts 处理它调用githubSync.enable开启同步然后为仓库挂载一台专属沙箱 VM。五、双向同步是如何工作的很多新手会问同步到底同步了什么代码AI 每次修改后会自动commit到仓库界面中可见 Committed 标记开启 GitHub Sync 后提交会同步到你的 GitHub 仓库反之你在 GitHub 上 push 的更新也能拉回工作区对话历史每段对话以 JSON 存入仓库的conversations/目录项目元数据记录在metadata.json预览地址、部署记录、生产域名等这些读写与提交逻辑集中在 repo-storage.tssaveConversationMessages保存对话writeCommit负责提交作者固定为 Adorable方便你在 GitHub 提交记录中识别 AI 产生的变更。六、上线与发布从同步到生产环境接入并调试满意后点击右上角Publish即可一键部署部署成功后获得独立预览 URL可进一步绑定生产域名每次发布都会记录 commit、域名与状态idle / deploying / live / failed元数据同样写回仓库实现部署历史持久化沙箱 VM 的创建与域名映射逻辑见 adorable-vm.ts七、常见问题速查问题解决办法输入仓库地址报错确认使用owner/repo格式且不含https://前缀创建项目卡在同步检查 GitHub App 是否已安装到该仓库想换模型提供商修改.env.local中LLM_PROVIDER并重启找不到历史对话对话按项目仓库持久化切换项目后在左侧列表查看总结只需三步——本地部署 → 安装 GitHub App → From GitHub 创建项目你就能把任意 GitHub 项目接入 Adorable享受 AI 对话式开发、双向代码同步与一键发布带来的完整工作流。项目采用 Next.js Vercel AI SDK Freestyle 云沙箱构建技术栈说明详见 README.md欢迎动手把下一个项目交给它来改。【免费下载链接】AdorableOpen Source Lovable项目地址: https://gitcode.com/gh_mirrors/ad/Adorable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考