标签： Next.js

HTML Anything：让本地 AI 智能体一键生成可发布的 HTML（8K+ Stars）
HTML Anything 是 nexu-io 开源的本地优先（local-first）AI HTML 编辑器：你只需提供 Markdown、CSV、Excel、JSON 或零散笔记，按下 ⌘+Enter，本地已登录的编码智能体就会把内容渲染成可直接发布的单文件 HTML。

HTML Anything — 智能体时代的 HTML 编辑器

项目简介

它不做模型、不卖 API，而是把你已经装好的 Claude Code、Cursor Agent、Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider、IBM Bob 等 9 款编码智能体 CLI 当作后端，通过 75 个可组合技能模板，输出 9 种常见“交付形态”：杂志文章、演示文稿、简历、海报、小红书卡片、推文卡片、网页原型、数据报告、Hyperframes 视频帧。生成结果支持一键粘贴到微信公众号、知乎、X / 微博 / 小红书，或下载 .html / .png。

核心亮点速览：9 CLI / 75 技能 / 9 交付形态 / 零 API Key / 一键导出

安装要求与快速开始

环境要求
- Node.js ≥ 18，推荐安装 pnpm
- 任意一款已登录的编码智能体 CLI（如 claude / cursor-agent / codex / gemini / copilot 等）
- 不需要额外 API Key，复用你已登录的会话
快速安装
```
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
# → http://localhost:3000
```
启动后浏览器会自动扫描 PATH（包括 ~/.local/bin、/opt/homebrew/bin 等 GUI 应用常忽略的目录），并在顶部工具栏列出可识别的 CLI。选一个模板、贴入内容、⌘+Enter 即可。

主界面：左侧编辑器 / 中间模板选择器 / 右侧实时 iframe 预览

核心功能
- 零 API Key：复用本地已登录的编码智能体会话，边际成本为 0。
- 9 大智能体自动检测：Claude Code、Cursor、Codex、Gemini、Copilot、OpenCode、Qwen、Aider、IBM Bob，顶部一键切换。
- 75 个技能模板：覆盖 prototype / deck / frame / social / office / doc / mockup / vfx 等模式，从 SaaS 落地页到财务报告、从瑞士国际主义幻灯片到 Hyperframes 视频帧都有现成模板。
- 9 种交付形态：杂志文章、演示文稿、简历、海报、小红书卡片、推文卡片、网页原型、数据报告、Hyperframes 视频帧。
- 实时 SSE 流式渲染：智能体输出 JSON-line，服务端转成 Server-Sent Events，浏览器实时追加到 iframe srcdoc，像看 AI 打字一样看网页生成。
- 沙箱预览：用户 HTML 运行在 <iframe sandbox> 中，脚本仍可执行，但 cookies/localStorage 与宿主隔离。
- 一键导出：juice 内联 CSS → 微信公众号 / 知乎；modern-screenshot 2× PNG → X / 微博 / 小红书；另可下载单文件 .html 或 .png。
一键导出：微信公众号 · X/微博 · 知乎 · 小红书 · HTML · PNG

典型使用场景

场景 1：公众号长文排版

写好 Markdown 初稿，选择 article-magazine 或 doc-kami-parchment 技能，智能体会自动套用 CJK 优先字体栈、8px 基线网格、对比度 ≥4.5 的配色，生成可直接粘贴到公众号编辑器的 HTML，无需二次调样式。

场景 2：小红书 / X 卡片

把一段金句或数据结论贴进去，选择 card-xiaohongshu 或 social-x-post-card 模板，即可生成 1080×1080 或 1600×900 的高清 PNG，复制后直接进入小红书 / X 发布界面，避免手动修图。

场景 3：投资人路演 PPT

输入产品要点，选择 deck-pitch、deck-swiss-international 或 deck-open-slide-canvas，自动产出 1920×1080 的横向幻灯片，支持键盘左右翻页、演讲者备注和 PDF 导出。

幻灯片模式：内置 20 套主题，可直接导出或路演

推荐理由

它是目前把“本地 AI 智能体”和“中文内容创作”结合得最顺手的开源工具之一：不绑 API、不抢隐私，复用你已经付费订阅的 Claude / Cursor / Copilot；针对微信公众号、知乎、小红书等中文平台做了专门适配，解决了 Markdown 转公众号格式崩坏、转小红书要手动修图的老大难问题；技能模板基于 SKILL.md 协议，新增模板只需复制一个文件夹、改一段 frontmatter，社区扩展门槛低。如果你平时需要大量产出图文、PPT、产品原型，把它接进工作流能省不少时间。

下载与资源
- GitHub 仓库：https://github.com/nexu-io/html-anything
- 在线介绍页：https://open-design.ai/html-anything/
- Stars：8,030+ | Fork：786 | License：Apache-2.0
- 主技术栈：Next.js 16 + React 19 + Tailwind v4 + TypeScript
2026年8月1日
Next AI Draw.io：用自然语言一句话生成 draw.io 架构图的 AI 绘图神器
还在为画架构图、流程图熬夜对峙 draw.io？Next AI Draw.io 让你用一句话描述需求，AI 就直接生成、修改并渲染出标准的 draw.io 图表——支持 RAG 架构、云架构（AWS/Azure/GCP）、认证流程、甚至”会动的” Transformer 连接线。

📌 项目简介

Next AI Draw.io 是一个基于 Next.js 的开源 Web 应用，把大语言模型（LLM）与 draw.io 深度结合，让你通过自然语言命令创建、修改和增强专业图表——”Chat, Draw, Visualize” 三者合一。

🖼️ 效果一览（原项目示例）

下面是项目 README 中的真实生成效果，输入只是几句提示词：

提示词：为聊天应用生成 RAG 架构图，数据入采用连通图

提示词：用 React + AWS（Serverless）生成认证流程

提示词：用动画连线展示 Transformer 架构

⚙️ 安装要求与过程

环境要求
- Node.js 18+（项目基于 Next.js 16.x / React 19.x）
- 包管理器：npm（或 pnpm/yarn）
- 大模型 API Key：默认走 AWS Bedrock，也支持 OpenAI / Anthropic / Google / DeepSeek / Ollama 等 15+ .provider；可自带 Key，也可由管理员配置服务端模型
- 推荐模型：Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1（需强长文本+严格格式能力来生成 draw.io XML）
快速安装（本地开发）
```
# 1. 克隆仓库
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

# 2. 安装依赖并配置环境变量
npm install
cp env.example .env.local

# 3. 启动开发服务器
npm run dev

# 4. 浏览器打开 http://localhost:6002
```
不想装？直接访问官方在线 Demo next-ai-drawio.jiang.jp，或下载 Windows / macOS / Linux 桌面端（Releases 页），也能一键部署到 EdgeOne Pages / Vercel / Cloudflare Workers。

✨ 核心功能
- 自然语言生成与编辑：用中文/英文命令直接创建、修改 draw.io 图表，AI 输出标准 XML 并实时渲染。
- 图片 / PDF / 文本复用：上传已有草图、截图、PDF 或文档，AI 自动”仿绘+增强”成规范图表。
- 云架构图专精：内置 AWS、Azure、GCP 等云厂商图标，生成云原生/Serverless 架构图尤其拿手（Claude 系列对云图标训练充分）。
- AI 推理过程可见 + 版本历史：可查看模型思考链路，并对每次编辑前的版本做版本控制、随时回滚。
- 动画连线 & MCP 服务：支持”会动”的连接线提升表达力；并提供 MCP Server，让 Claude Desktop / Cursor / VS Code 等 Agent 也能调用它画图。
🎯 典型使用场景
1. 技术方案评审 & 架构设计：架构师口述”用 React + AWS 做认证流程”，秒出 Serverless 架构图，评审会直接拿去讨论，省去手拖元件的半天。
2. 知识沉淀与教学：把 Henry Chesbrough 开放式创新模型、RAG 数据流等抽象概念，用一句提示词变成可读可视化的示意图，写文档、做 PPT 事半功倍。
3. AI Agent 自动化出图：在 Claude Code / Cursor 里装好 MCP，让编码 Agent 边写代码边自动产出”用户登录 + MFA + 会话管理”流程图，图直接实时出现在浏览器。
💡 推荐理由

我自己最吃它的”零摩擦”：打开网页、打一句话，图就出来了——对不擅长画图、或只想快点把脑子里的结构固定下来的人太友好了。它不像某些”AI 画图”只给不可编辑的图片，Next AI Draw.io 产出的是标准 draw.io XML，可继续在 draw.io 里精修，这点对工程场景很重要。多 Provider 支持 + 可自带 Key + 服务端模型配置，部署灵活；搭配 MCP 还能塞进 Agent 工作流。缺点是要出高质量云架构图对模型有要求（建议 Claude/GPT-5/Gemini 档位），弱模型偶尔 XML 会错位。总体 33K+ Star、Apache-2.0 协议，值得一试。

📥 下载地址
- 官方网站 / 在线 Demo：https://next-ai-drawio.jiang.jp/
- GitHub 仓库：https://github.com/DayuanJiang/next-ai-draw-io（⭐ 33.5K+，Apache-2.0，TypeScript）
- 桌面端 / 一键部署：Releases 页下载，或一键部署到 EdgeOne Pages / Vercel / Cloudflare Workers
2026年7月14日
ai-website-cloner-template：AI 一键克隆任意网站，26K+ Stars 让网站逆向工程变得全自动
ai-website-cloner-template：用 AI 编程助手一键克隆任意网站

📌 项目简介

ai-website-cloner-template 是一个可复用的开源模板，让你用一条命令、借助任意 AI 编程助手，将任何网站逆向工程为干净、现代的 Next.js 代码库——相当于给 AI 下了个「克隆这个网站」的指令，它就能把设计令牌、组件结构、交互逻辑全部还原出来。

⭐ GitHub Stars：26,229+
🏷️ 开源许可：MIT（免费商用）
💻 主要语言：TypeScript（Next.js 16 + React 19）
🤖 支持 AI 助手：13 款（Claude Code / Codex / Cursor / Windsurf 等）

⚙️ 安装要求和过程

环境要求
- Node.js 24+（必需，项目使用 Next.js 16 App Router）
- 一个 AI 编程助手（推荐 Claude Code，也支持 Codex CLI / Cursor / Windsurf 等 13 款）
- Git（用于多 worktree 并行开发）
快速安装步骤
1. 从模板创建自己的仓库
  在 GitHub 页面点击 Use this template → Create a new repository
2. 克隆到本地
  git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git cd YOUR-NEW-REPOSITORY
3. 安装依赖
  npm install
4. 启动 AI 助手（推荐 Claude Code）
  claude --chrome
5. 开始克隆网站！
  /clone-website https://example.com
Docker 方式（可选）：
```
docker compose up app --build   # 构建并运行应用
docker compose up dev --build    # 开发模式，端口 3001
```
🌟 核心功能

① 13 款 AI 编程助手全覆盖

无论你用的是哪款 AI 编程工具，都能直接上手。支持 Claude Code、Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider 共 13 款，真正做到了「一次配置，到处运行」。

② 五阶段智能流水线

克隆过程被精心设计为五个阶段，模拟专业前端工程师的工作流：
- 侦察阶段：自动截图、提取设计令牌（颜色/字体/间距）、扫描交互行为（滚动/点击/悬停/响应式）
- 基础构建：更新字体、颜色、全局样式，下载所有静态资源
- 组件规格：为每个组件编写详细规格文件（含精确 CSS 计算值、状态、行为、内容）
- 并行构建：在独立 git worktree 中分派多个构建代理，每个代理负责一个 section/component，极大加速生成
- 组装与 QA：合并 worktree，连接页面，与原始网站进行视觉差异对比
③ 多 URL 并行处理

传入多个 URL，系统自动并行处理，每个站点输出隔离，互不干扰。非常适合克隆拥有多个子页面的完整网站。
```
/clone-website https://example.com https://example.com/about https://example.com/pricing
```
④ 单一真相来源架构

采用 AGENTS.md 和 .claude/skills/clone-website/SKILL.md 作为源文件，通过同步脚本自动生成各平台（Claude Code / Cursor / Windsurf 等）的配置文件，避免多平台维护的噩梦。
```
bash scripts/sync-agent-rules.sh   # 重新生成代理指令文件
node scripts/sync-skills.mjs       # 重新生成所有平台的 /clone-website 技能
```
⑤ 生产级技术栈

生成的代码库本身就是高质量成品：
- Next.js 16（App Router）+ React 19 + TypeScript strict
- shadcn/ui（Radix primitives）+ Tailwind CSS v4
- Lucide React 图标（克隆时自动替换为提取的 SVG）
- 内置 npm run check（lint + typecheck + build）完整质量检查链
🚀 典型使用场景

场景一：平台迁移

你的网站跑在 WordPress / Webflow / Squarespace 上，想迁移到现代化的 Next.js 技术栈，但舍不得原有的设计和交互细节。ai-website-cloner-template 可以完整克隆原站的外观和交互，生成一个干净的 Next.js 项目，你可以在此基础上继续开发，告别笨重的旧平台。

场景二：丢失源码的网站恢复

网站还在运行，但代码库早已丢失（或者前开发者跑路了）。只要网站还能访问，就能用它逆向生成完整的 Next.js 源码。虽然不能保证 100% 还原（特别是复杂的后端交互），但前端部分可以还原到惊人的精度。

场景三：学习生产级前端实现

看到一个网站的布局、动画或响应式实现特别惊艳，想研究它是怎么做的？与其对着 DevTools 一行行扒代码，不如直接让 AI 克隆一份，然后在生成的代码库里慢慢研究。相当于有了一个「可运行的解构说明书」。

💡 推荐理由

作为前端开发者，我曾经多次遇到「这个网站的某个交互效果真好，我想知道它是怎么实现的」的情况。传统做法是在浏览器 DevTools 里对着压缩过的 CSS 和 JS 猜谜，效率低得令人发指。

ai-website-cloner-template 最让我惊艳的地方在于它把「克隆网站」这个复杂任务分解成了 AI 助手真正擅长的子任务：侦察、提取设计令牌、编写组件规格、并行构建。整个流程设计得非常专业，不是简单的「让 AI 写代码」，而是模拟了一个资深前端工程师的工作流程。

特别值得一提的是 并行构建 阶段——它利用 git worktree 让多个 AI 代理同时工作，每个代理负责不同的组件，最后再合并。这个设计既聪明又实用，大大缩短了等待时间。

当然，这个项目也有局限性：它主要处理前端部分，动态后端逻辑无法完整还原；对于高度依赖状态的复杂 SPA，还原精度会有所下降。但作为「前端快速原型 + 设计逆向学习」工具，它已经远超我的预期。

如果你正在考虑从旧平台迁移、需要快速做网站原型、或者单纯想学习优秀网站的前端实现，这个项目绝对值得一试。

⚠️ 使用提醒：请遵守法律法规和网站服务条款。不要将克隆的网站用于钓鱼、冒充或侵犯他人知识产权。项目作者也明确列出了不允许的用途。

📥 下载地址
- 🌐 在线体验：https://ai-website-cloner-template.vercel.app/
- 🐙 GitHub 仓库：https://github.com/JCodesMore/ai-website-cloner-template（26,229+ ⭐）
- 📖 使用文档：仓库 README 包含完整的使用说明和技巧
- 💬 社区支持：GitHub Issues / Discussions
本文由 AI 自动生成 · 数据来源 GitHub Trending · 如有错误或遗漏欢迎指正
2026年7月7日
Vercel AI SDK：构建流式 AI 应用的官方 TypeScript 工具包，25K+ Stars 让 Next.js 开发 AI 应用变得简单
🤖 Vercel AI SDK：构建 AI 应用的官方 TypeScript 工具包

The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents

⭐ GitHub Stars

25.251

💻 主要语言

TypeScript

📜 开源许可

NOASSERTION

🏢 开发团队

Vercel

📦 最新版本

@ai-sdk/xai@4.0.3

🔄 周下载量

100万+

📌 项目简介

Vercel AI SDK 是 Vercel 官方推出的 TypeScript 工具包，专为构建跨框架、跨平台的流式 AI 应用而设计。它提供了一套统一的 API，让开发者可以在 Next.js、React、Vue、Svelte 等任何 JavaScript 框架中，轻松集成 OpenAI、Anthropic、Google 等主流 LLM，并以流式方式将 AI 生成内容实时渲染到 UI 中。

作为 Vercel AI 工程平台 的开源核心，AI SDK 已被广泛用于构建 ChatGPT 类应用、AI 写作助手、智能客服等场景。它不仅是 Vercel 官方 AI 解决方案的基石，也是 TypeScript 生态中最流行的 AI 应用开发工具包，GitHub 星标超过 25,000+，npm 周下载量超过 100 万次。

⚙️ 安装要求和过程

环境要求
- 运行环境：Node.js 18.0+（推荐 20+）
- 框架支持：Next.js 14+（App Router 优先）、React 18+、Vue 3+、Svelte 4+
- TypeScript：推荐 5.0+（完整类型支持）
- 包管理器：npm / pnpm / yarn / bun 均可
快速安装

在 Next.js 项目中一键安装：
// 核心包 + OpenAI 提供商 npm install ai @ai-sdk/openai // 或使用 pnpm pnpm add ai @ai-sdk/openai // Vue/Nuxt 项目 npm install ai @ai-sdk/vue @ai-sdk/openai // Svelte/SvelteKit 项目 npm install ai @ai-sdk/svelte @ai-sdk/openai
最小可用示例（Next.js App Router）
// app/api/chat/route.ts import { openai } from '@ai-sdk/openai'; import { streamText } from 'ai'; export async function POST(req: Request) { const { prompt } = await req.json(); const result = await streamText({ model: openai('gpt-4o'), prompt, }); return result.toDataStreamResponse(); }
前端调用（React hooks）：
// app/components/Chat.tsx 'use client'; import { useChat } from 'ai/react'; export default function Chat() { const { messages, input, handleInputChange, handleSubmit } = useChat(); return ( <div> {messages.map(m => ( <div key={m.id}> <strong>{m.role}:</strong> {m.content} </div> ))} <form onSubmit={handleSubmit}> <input value={input} onChange={handleInputChange} /> </form> </div> ); }
无需手动管理流式响应、无需手写 ReadableStream 解析，AI SDK 全部帮你搞定。

🌟 核心功能
- 📡 流式输出（Streaming） — 内置完整的流式响应处理，AI 生成内容可逐字实时渲染到 UI，用户体验媲美 ChatGPT。支持 streamText、streamObject、streamData 等多种流式 API，兼容 Edge Runtime。
- 🧩 多框架支持 — 提供 React、Vue、Svelte 专用 hooks（useChat、useCompletion、useObject），一套核心逻辑适配所有主流前端框架。每个框架都有独立的 @ai-sdk/xxx 适配器包。
- 🔌 多模型统一接口 — 通过 @ai-sdk 系列提供商适配器，统一接入 OpenAI、Anthropic、Google Gemini、AWS Bedrock、Azure、Ollama、Groq 等 30+ LLM 提供商，切换模型只需改一行代码。
- 🛠️ 工具调用（Tool Calling） — 原生支持 LLM 工具调用（Function Calling），可用 TypeScript 函数定义 AI 可调用的”工具”，LLM 自行决定调用哪些工具。支持多步工具调用链（maxSteps），轻松构建自主 Agent。
- 💾 对话持久化 — 内置 useChat 的持久化支持，可对接 Vercel KV、Upstash Redis、PostgreSQL 等存储方案，轻松实现对话历史管理与多会话管理。
- 🖼️ 多模态支持 — 支持图像输入（Vision）、语音转文字（Transcription）、文字转语音（Speech）、图像生成（Image Generation）等多模态能力，覆盖 AI 应用全链路。
💡 典型使用场景

场景一：构建类 ChatGPT 的对话应用

AI SDK 的 useChat hook 封装了完整的对话状态管理（消息列表、输入状态、提交处理、流式更新），开发者只需几行代码即可构建支持流式输出的多轮对话 UI。配合 Next.js App Router 的 Server Actions，可实现端到端的类型安全。

适用项目：AI 聊天助手、智能客服系统、企业内部知识库问答、教育辅导机器人。

场景二：AI 辅助写作与内容生成

利用 useCompletion hook，可在任意输入框中集成 AI 续写、改写、翻译、摘要等功能。流式输出让用户实时看到生成结果，配合 streamObject 还可生成结构化 JSON 数据（如自动填充表单、结构化数据提取）。

适用项目：AI 写作工具、邮件智能助手、代码补全插件、SEO 内容生成器。

场景三：AI Agent 与自动化工作流

AI SDK 的 Tool Calling 功能允许定义 JavaScript 函数作为 AI 可调用的”工具”，LLM 可自行决定调用哪些工具来完成任务。配合 maxSteps 参数可实现多轮工具调用链，构建能自主规划并执行任务的 AI Agent。Vercel 还提供了 Agent 专用 API，支持中断/恢复、状态持久化等高级能力。

适用项目：智能数据分析助手、自动化工作流编排、AI 运维助手、个人生产力 Agent。

🔥 推荐理由

为什么选择 Vercel AI SDK？

1. Vercel 官方背书，生态最完整
作为 Next.js 母公司 Vercel 的官方 AI 解决方案，AI SDK 与 Next.js App Router 深度集成，部署到 Vercel 平台可享受零配置体验。同时支持 Netlify、Cloudflare Pages 等所有主流部署平台，Edge Runtime 全面兼容。

2. 流式输出体验最佳
AI SDK 的流式处理是 TypeScript 生态中最成熟的实现，支持文字、对象、工具调用结果、Data Stream 附件等多种数据类型的流式传输，前端渲染延迟低至毫秒级。内置的 Data Stream Protocol 还支持在流式响应中夹带自定义数据（如推理过程、来源引用）。

3. 跨框架复用，学习成本低
核心 API 设计高度一致，从 React 迁移到 Vue 只需更换 import 路径。官方文档提供各框架的完整示例，且每个示例都有 TypeScript 类型标注，上手非常快。AI SDK Core（模型调用）甚至可以脱离前端框架在纯 Node.js 环境中使用。

4. 内置多模态 AI 工具链
除了基础对话，还内置了 generateImage（图像生成）、embed（文本嵌入向量化）、transcribe（语音转文字）、speech（文字转语音）等多模态能力，并支持通过统一接口调用。未来还将支持视频生成等更多模态。

5. 活跃的社区与持续迭代
Vercel 团队保持高频迭代（平均每周发布），积极跟进 LLM 最新能力（如 Anthropic 的 Computer Use、OpenAI 的 o1 推理模式）。GitHub 上 25K+ Stars，npm 周下载量 100 万+，社区提供的示例项目和模板非常丰富。

💡 个人使用感受：我用 AI SDK 构建过两个 AI 聊天项目，最深刻的印象是”省心”——流式输出不用自己处理 ReadableStream，工具调用不用手写 JSON Schema 解析，连 TypeScript 类型都是自动推导的。如果你在用 Next.js，这基本上是唯一选择；如果你在用其他框架，它同样是最好的 TypeScript AI 工具包。

📥 下载地址

📦 GitHub 仓库
 📚 官方文档
 🚀 Vercel AI 模板
 📦 npm 包

开源许可：NOASSERTION（实际以仓库 LICENSE 文件为准）
GitHub：github.com/vercel/ai
官网/文档：sdk.vercel.ai
所属公司：Vercel（Next.js 母公司）
适合人群：Next.js/React/Vue 开发者、AI 应用创业者、全栈工程师、前端 AI 集成需求者
2026年6月30日
NextChat：轻量快速的跨平台 AI 助手，88K+ Stars 让部署专属 ChatGPT 变得简单
💬 NextChat

轻量快速的跨平台 AI 助手，一键部署专属 ChatGPT 替代品

⭐ 88,330+ Stars | Fork 59,509+ | MIT 许可

一句话介绍：NextChat（原 ChatGPT-Next-Web）是一款轻量、快速的跨平台 AI 助手，支持 Web、iOS、macOS、Android、Linux、Windows 全平台，兼容几乎所有主流大模型 API，是部署私人 AI 聊天服务的首选开源方案。
📦 安装要求与过程

环境要求

Node.js ≥ 18（本地开发）

Docker ≥ 20（容器部署）

Vercel / Zeabur / Gitpod 账号（一键部署）

Tauri 运行时（桌面客户端）

方式一：Vercel 一键部署（推荐）

访问 NextChat GitHub 仓库，点击 README 中的 Vercel 部署按钮

在 Vercel 中配置环境变量：OPENAI_API_KEY（必填）、CODE（访问密码，选填）

点击部署，约 1 分钟内完成，获得专属域名

方式二：Docker 部署

docker run -d -p 3000:3000 \ -e OPENAI_API_KEY=sk-xxxx \ -e CODE=your-password \ yidadaa/chatgpt-next-web

如需开启 MCP 功能，添加 -e ENABLE_MCP=true

方式三：直接下载客户端（无需部署）

网页端直接使用：app.nextchat.club

桌面端下载：GitHub Releases（Windows/macOS/Linux，约 5MB）

iOS App：在 App Store 搜索 “NextChat AI” 下载
🚀 核心功能

🌐

全平台支持

Web、iOS、macOS、Android、Linux、Windows 六端全覆盖，Tauri 桌面端仅约 5MB，PWA 网页端无需安装

🔌

多模型兼容

支持 OpenAI、Azure、Google Gemini、Anthropic Claude、百度、阿里云、DeepSeek、智谱 ChatGLM 等数十家厂商 API

🔒

隐私优先

所有数据默认存储在浏览器本地，桌面端 Tauri 版本支持直接调用 API，避免前端暴露密钥

🧩

MCP & 插件扩展

支持 Model Context Protocol（需开启 ENABLE_MCP），支持插件系统扩展网络搜索、计算器、第三方 API 等能力

🎨

Artifacts 内容预览

支持 Artifacts & Stable Diffusion，可单独窗口预览、复制、分享生成的内容/网页，支持实时对话

⚡

极致性能优化

首屏仅约 100KB，支持流式响应，自动压缩聊天历史以节省 Token，支持长对话

💡 典型使用场景

场景一：个人私有 AI 聊天服务

通过 Vercel 一键部署，绑定自己的域名，接入 OpenAI / DeepSeek / Claude 等 API，为个人或团队提供专属 AI 聊天界面。相比官方 ChatGPT，无地域限制、支持多模型切换、聊天记录完全私有。

场景二：企业内网 AI 助手（私有化部署）

通过 Docker 或企业服务器部署，接入企业内部知识库，配合 MCP 协议连接企业数据源。NextChat 提供企业定制版，支持品牌定制、权限管控、安全审计、私有化部署，满足企业合规需求。

场景三：多模型对比与 Prompt 调试

利用 Prompt 模板（Mask）功能，创建、分享和调试自定义聊天工具。在同一界面中切换不同模型对比输出质量，配合 Artifacts 功能实时预览生成的网页或内容，大幅提升 AI 辅助开发效率。

✨ 推荐理由

NextChat 是我用过的最流畅的开源 AI 聊天界面。相比其他同类项目，它的核心优势在于 “轻量”和”快速”——首屏仅约 100KB，Tauri 桌面端不到 5MB，从打开到开始对话只需几秒。

对于个人用户，Vercel 一键部署真的做到了”1分钟上线”；对于企业用户，MIT 许可 + 私有化部署 + MCP 支持，让它可以无缝融入企业 AI 基础设施。支持 14 种语言（含简体中文），对国内用户非常友好。

如果你在寻找一个 ChatGPT 的开源替代品，或者需要为团队搭建私有 AI 聊天服务，NextChat 是目前 GitHub 上 Star 最多、最活跃的选择之一，88K+ Stars 和 59K+ Forks 的数据足以证明其实力。

📥 下载地址

🐙

GitHub 仓库

ChatGPTNextWeb/NextChat • 88,330+ Stars

🌐

网页端在线使用

app.nextchat.club • 无需安装，打开即用



🏠

官方网站

nextchat.club • 产品介绍 & 企业版咨询



💻

桌面端 & iOS 下载

GitHub Releases • Windows/macOS/Linux/iOS

本文由 AI 自动整理，信息来自 GitHub 仓库，最新版本请以官方为准。
2026年6月29日

标签： Next.js

HTML Anything：让本地 AI 智能体一键生成可发布的 HTML（8K+ Stars）

项目简介

安装要求与快速开始

环境要求

快速安装

核心功能

典型使用场景

场景 1：公众号长文排版

场景 2：小红书 / X 卡片

场景 3：投资人路演 PPT

推荐理由

下载与资源

Next AI Draw.io：用自然语言一句话生成 draw.io 架构图的 AI 绘图神器

📌 项目简介

🖼️ 效果一览（原项目示例）

⚙️ 安装要求与过程

环境要求

快速安装（本地开发）

✨ 核心功能

🎯 典型使用场景

💡 推荐理由

📥 下载地址

ai-website-cloner-template：AI 一键克隆任意网站，26K+ Stars 让网站逆向工程变得全自动

📌 项目简介

⚙️ 安装要求和过程

环境要求

快速安装步骤

🌟 核心功能

① 13 款 AI 编程助手全覆盖

② 五阶段智能流水线

③ 多 URL 并行处理

④ 单一真相来源架构

⑤ 生产级技术栈

🚀 典型使用场景

场景一：平台迁移

场景二：丢失源码的网站恢复

场景三：学习生产级前端实现

💡 推荐理由

📥 下载地址

Vercel AI SDK：构建流式 AI 应用的官方 TypeScript 工具包，25K+ Stars 让 Next.js 开发 AI 应用变得简单

🤖 Vercel AI SDK：构建 AI 应用的官方 TypeScript 工具包

📌 项目简介

⚙️ 安装要求和过程

环境要求

快速安装

最小可用示例（Next.js App Router）

🌟 核心功能

💡 典型使用场景

场景一：构建类 ChatGPT 的对话应用

场景二：AI 辅助写作与内容生成

场景三：AI Agent 与自动化工作流

🔥 推荐理由

为什么选择 Vercel AI SDK？

📥 下载地址

NextChat：轻量快速的跨平台 AI 助手，88K+ Stars 让部署专属 ChatGPT 变得简单

💬 NextChat

📦 安装要求与过程

环境要求

方式一：Vercel 一键部署（推荐）

方式二：Docker 部署

方式三：直接下载客户端（无需部署）

🚀 核心功能

💡 典型使用场景

✨ 推荐理由

📥 下载地址