idoubi

统计数据

82
文章
0
粉丝
0
获赞
911
阅读
avatar
idoubi
10个月前
# 分享一个 idea 最近 AI Coding 越来越🔥。此类产品依赖的一项核心能力，是对 AI 生成的代码实时预览。 不同的项目代码，用到的预览方案不太一样。 如果生成的代码是单个文件，直接放到 iframe.srcdoc 就能预览，这个方案实现起来很容易。 如果生成的代码是多个文件，涉及到框架 / 组件 / 依赖，预览方案要复杂很多。 比如，让 AI 生成一个 Landing Page，按照 nextjs 的项目规范返回代码，AI 生成的文件树示例： - app/page.tsx - app/globals.css - components/ - Header.tsx - Hero.tsx - Features.tsx - Footer.tsx 这样的一组代码文件，要实时预览，就必须走自定义预览服务的方案。 考虑到想切入 AI Coding 赛道的产品很多，每个人都去实现一个预览服务，成本很高。 可以做一个通用的 code-preview 服务，提供 API 供第三方接入，支持预览任意类型的项目代码，包括单文件 / 多文件。 这个 code-preview 服务，可以用 go 实现，基于 docker + 预置镜像支持各类项目的预览需求。 1. 先制作几套常用的代码模板，打包成 docker 镜像，包括 - vite + react - vite + vue - nextjs + shadcn/ui - nuxtjs 2. 用 go 实现一个服务管理模块 - 接收上游传递的代码包 - 解压缩拿到所有的代码文件 - 根据预览的项目类型，选用特定的 docker image 启动 docker 容器，挂载要预览的代码文件到容器，替换掉模板中的特定文件 - 返回容器的预览端口，拼接可公网访问的预览地址给到上游 - 接到上游预览关闭信号，销毁 docker 容器，或者通过定时程序来清理不再活跃的 docker 容器 3. 需要评估预览服务的启动耗时（文件传输耗时，容器启动耗时），需要支持并发请求（可能会有本地端口占用冲突的问题，服务器资源不够问题） code-preview 服务跟 AI Coding 业务完全解耦，业务方请求 AI 生成完代码，请求 code-preview 服务的 API 拿到预览地址，通过 iframe.src 预览 code-preview 服务需要保证稳定性和启动预览的速度，如果因为代码问题导致预览报错，需要把错误信息返回给业务方，以便业务方带上错误请求 AI 修正代码后重新启动预览 code-preview 服务按照业务方的 API 调用次数计费 跟 bolt 公司用到的 WebContainer 技术有点类似，只不过 WebContainer 是跑在浏览器端，code-preview 服务是跑在云端，code-preview 的接入会更方便，灵活性也会更高。预览速度方面需要调试后才能对比。 你看好这套方案吗？
#AI #AI Coding #实时预览 #生成代码 #多文件预览 #iframe.srcdoc #框架 #组件 #依赖 #Landing Page
avatar
idoubi
10个月前
今天下午 MCP So 在 ProductHunt 发布，趁机分享下我是如何通过程序化 SEO 在 MCP Servers 关键词拿到搜索第一名的： 先了解下什么是程序化 SEO： 简单的描述就是通过自动化程序，生成对搜索引擎友好的页面，让搜索引擎尽可能多收录网站页面，让网站内容更容易命中用户搜索需求。 拿 MCP So 举例，如何实现程序化 SEO👇 1. 先写个爬虫，尽可能多的收集网络上的 MCP Servers，入库的初始数据是 MCP Server 的名称，简介，GitHub 链接等信息 2. 做一遍数据清洗，根据 GitHub 链接拼凑出来 readme 文档地址，用 jina reader 读到内容 3. 根据 readme 的 Markdown 内容，设置提示词，要求 AI 按照固定格式返回一个 JSON，结构化内容可以是这种形式： - category 自动归类 - tags 自动打标签 - summary 固定格式摘要 - what is xxx - how to use xxx - features of xxx - use cases of xxx - faq from xxx 4. 合理规划网站页面路径，设置面包屑导航。 比如： - 首页导航点击进入分类页 - 分类页点击进入详情页 - 详情页通过面包屑点击回到分类页 - 详情页通过随机推荐进入其他详情页 通过网站上清晰的路径规划，让搜索引擎蜘蛛能爬到更多的内容，收录更多的页面 5. 服务端渲染结构化内容，提升详情页的关键词覆盖密度。比如： - 详情页的 URL 路径可以是 /server/mcp-server-chatsum - meta 里面的 title 是 mcp-server-chatsum，description 放 mcp-server-chatsum 的介绍 - H1-H3 标签都包含 chatsum 关键词 6. 为长尾关键词自动构造页面，比如 mcp-server 搜索量不大，但是 xxx-mcp-server 搜索量加起来很大，xxx 可以是一批长尾关键词，就可以定时选一批 xxx-mcp-server 关键词造页面，提高搜索命中率 7. 合理设置 sitemap.xml，可以在 gsc 提交一个主要的 sitemap.xml，在主 sitemap.xml 链接到一个 sitemap_categories.xml 和 sitemap_servers.xml，然后周期性的更新后面两个 xml 的内容，一次性不要提交太多，几十个最好。 以上就是我使用程序化 SEO 做 MCP So 这个导航站的一些经验。
#MCP So #ProductHunt #程序化 SEO #MCP Servers #搜索引擎 #自动化程序 #网站收录 #用户搜索需求 #爬虫
avatar
idoubi
11个月前
《祛魅 AI 三部曲》的内容提纲整理好了，希望能坚持写出来。 你对哪几 part 感兴趣？
#祛魅AI #AI三部曲 #文章提纲 #写作计划
avatar
idoubi
11个月前
用 ShipAny 重构的 MCP 导航站上线了，颜值提升了很多。 应该是目前收录 MCP Server 最多的导航站。
#ShipAny #MCP导航站 #颜值提升 #MCP Server
avatar
idoubi
11个月前
AI 生成代码，实时预览的几种方案👇 一、 html + srcdoc + iframe 1. AI 生成可以通过浏览器直接打开的 html 文件（单文件，html/css/js 写到一起） 2. 通过 iframe 的 srcdoc 传入 html 源码预览 3. 通过 importmap 指定依赖包的 CDN 资源。 这种方案实现起来简单，预览效率高。 二、react/vue + blob + iframe 1. AI 生成 react / vue 组件代码（单文件组件，无本地 import 依赖） 2. 通过 Babel.transform 转换 react 组件/通过 VueCompiler 编译 vue 组件 3. 使用转换/编译后的组件，构建一个 html 文件 4. 使用 blob 构建预览 url，传入 iframe.src 预览 const blob = new Blob([html], { type: 'text/html' }); iframe.src = URL.createObjectURL(blob); 这种方案稍微复杂一些，适合 react / vue 单文件组件预览。 3. webcontainer 1. AI 生成组件代码（可以返回多个组件文件，组件可以互相 import） 2. 构建一个最小可运行的 vite 项目骨架，把 vite 骨架包含的文件和 AI 生成的组件打包在一起，构建一个文件树 3. 启动 webcontainer 容器，挂载文件树 4. 通过 webcontainer 执行终端命令，安装项目依赖 5. 通过 webcontainer 启动预览服务，得到预览地址 6. 把预览地址传入 webcontainer 容器外的 iframe.src 实现项目预览 这种方案依赖 webcontainer，可以实现多组件预览，灵活性更高，但是涉及到文件挂载，命令行安装依赖等步骤，预览速度会慢一些。 ----- 总结 ----- 方案一适合用户不关心代码，只想快点看到效果的场景，比如用 Pagen 一句话生成 landing page，页面内容都在一个 html 文件里面。 方案二适合辅助前端写组件场景。比如用 CopyWeb 截图复刻设计，生成单个 react 组件，在线预览效果，导出到本地项目使用。 方案三适合一句话生成完整项目场景，比如用 bolt/v0 一句话生成 nextjs 项目骨架，可在线预览，可导出 zip 到本地修改。
#AI生成 #代码预览 #实时预览 #HTML #浏览器 #前端开发 #技术方案 #React #Vue #框架对比
avatar
idoubi
1年前
错峰写了一篇年终总结。 按时间线总结了 2024 一年，我做过的 AI 项目。 - 2024.01 AI Cover - AI 红包封面生成器 - 2024.02 Sora FM - Sora AI 视频展示站 - 2024.03 ThinkAny - AI 搜索引擎 - 2024.04 Melodisco - AI 音乐播放器 - 2024.05 HeyBeauty - AI 虚拟试衣 - 2024.06 Summary Copilot - AI 摘要浏览器插件 - 2024.08 Pagen - AI 落地页生成器 - 2024.09 CroSearch - 跨语言搜索引擎 - 2024.10 PodLM - AI 播客生成器 - 2024.11 MCP So - MCP Servers 导航站 - 2024.12 ShipAny - AI SaaS 开发脚手架 回顾过去，展望未来。 感谢 2024 所有关注我 / 支持我 / 信任我 / 帮助过我的朋友。 2025： > 继续 All in AI, 相信未来可期。 > 厚积薄发，Make things happen.
#AI #年终总结 #AI项目 #2024
avatar
idoubi
1年前
微信机器人和消息总结 MCP Server 代码已开源👇
#微信机器人 #消息总结 #MCP Server #开源