shadcn-nextjs-boilerplate

GitHub
630 231 简单 1 次阅读 昨天MIT语言模型开发框架
AI 解读 由 AI 自动生成,仅供参考

shadcn-nextjs-boilerplate 是一款专为快速构建 AI SaaS 应用而设计的开源后台管理模板。它基于 Next.js、Tailwind CSS 和 Shadcn UI 打造,旨在帮助开发者在几天内轻松启动项目,无需从零开始搭建基础架构。

该工具主要解决了开发 ChatGPT 类应用时前端重复劳动多、启动周期长的问题。它预置了超过 30 个精美的深色/浅色模式前端组件(如按钮、导航栏、卡片及聊天界面元素),并提供了完整的示例页面,让开发者能直接复用成熟的结构,专注于核心业务逻辑而非界面打磨。

这款模板非常适合全栈开发者、初创团队技术负责人以及希望快速验证产品原型的工程师使用。其独特亮点在于深度集成了 Shadcn UI 的现代化设计体系,不仅代码结构清晰、易于定制,还配套了详细的文档和 Figma 设计文件,实现了从设计到代码的无缝衔接。无论是构建 OpenAI 聊天机器人还是其他 AI 驱动的管理后台,shadcn-nextjs-boilerplate 都能提供高效、美观且免费的起步方案。

使用场景

一位全栈开发者计划在三天内上线一款面向中小企业的 AI 客服 SaaS 产品,需要快速构建包含聊天界面、用户认证和数据看板的管理后台。

没有 shadcn-nextjs-boilerplate 时

  • 重复造轮子耗时久:开发者需从零配置 NextJS 路由、Tailwind CSS 主题及 Shadcn UI 组件库,仅环境搭建就消耗了整整两天。
  • 核心功能开发受阻:缺乏现成的 ChatGPT 对话 UI 和 OpenAI API 对接模板,必须手动编写复杂的消息流处理和状态管理逻辑。
  • 界面风格不统一:自行设计的深色/浅色模式切换及响应式布局容易出现样式冲突,导致后台管理界面在不同设备上体验割裂。
  • 文档与示例缺失:遇到鉴权(Auth)或数据可视化难题时,找不到针对该技术栈的完整参考代码,排查问题效率极低。

使用 shadcn-nextjs-boilerplate 后

  • 一键启动项目:通过 git clonenpm run init 即可直接获得集成了 NextJS、Shadcn UI 和 Tailwind CSS 的完整工程,立省 80% 初始化时间。
  • 内置 AI 业务逻辑:直接复用预制的 ChatGPT 聊天组件和 API 连接代码,只需填入 Key 即可运行流畅的对话功能,专注业务差异化。
  • 专业级 UI 体验:直接使用超过 30 个精心设计的暗黑/明亮模式组件(如导航栏、卡片、表单),确保管理后台视觉统一且美观。
  • 详尽文档指引:参照官方提供的复杂场景文档和 Figma 设计稿,快速解决鉴权配置和页面布局问题,开发流程顺畅无阻。

shadcn-nextjs-boilerplate 将原本数周的后台搭建工作压缩至几小时,让开发者能真正专注于核心 AI 业务逻辑的创新与落地。

运行环境要求

操作系统
  • 未说明
GPU

未说明

内存

未说明

依赖
notes该项目是一个基于 NextJS 和 Shadcn UI 的前端模板,并非本地运行的 AI 模型,因此不需要 GPU、特定 Python 版本或大量内存。核心要求是安装 NodeJS 的 LTS(长期支持)版本。项目需要配置有效的 OpenAI API Key 才能使用聊天功能,且该 Key 必须绑定有效的账单信息。
python未说明
NodeJS (LTS 版本)
NextJS
Shadcn UI
Tailwind CSS
shadcn-nextjs-boilerplate hero image

快速开始

 

Horizon AI Boilerplate Admin Dashboard NextJS Shadcn UI

官网文档PRO版免费模板Twitter

使用首个基于Shadcn UI和NextJS的Admin Dashboard样板,您可以在几天内启动自己的SaaS初创项目。立即开始使用Horizon AI样板吧!

 

Horizon AI Boilerplate NextJS Shadcn UI

 

简介

Horizon AI样板是首个专为Shadcn UI、NextJS和Tailwind CSS打造的开源Admin Dashboard OpenAI ChatGPT AI模板!让您更快地创建出色的Chat AI SaaS应用。

它包含30多种深色/浅色前端组件,如按钮、输入框、导航栏、导航标签、卡片和提示框等,让您可以自由选择和组合。

文档

每个组件都在详尽复杂的文档中得到了清晰展示。您可以点击这里了解更多文档信息。

快速开始

安装Horizon ChatGPT AI模板,只需运行以下命令之一:


使用以下命令克隆仓库:

git clone https://github.com/horizon-ui/shadcn-nextjs-boilerplate.git

然后在终端运行:

npm install

npm run init

最后运行以下命令启动本地服务器:

npm run dev

 

您的API密钥无法使用吗?

  • 请确保您已注册OpenAI账户,并拥有有效的ChatGPT API密钥。我们不销售API密钥。
  • 请务必在OpenAI账单页面中添加您的支付信息。如果没有支付信息,您的API密钥将无法使用。
  • 应用程序会连接到OpenAI API服务器,以验证您的API密钥是否正常工作。

Figma版本

Horizon AI样板也提供Figma格式!点此查看! 🎨

示例模块

如果您希望为自己的创业项目寻找灵感,或直接向客户展示成果,可以使用我们预先构建的示例模块快速启动开发。这些模块可以帮助您迅速搭建起网站的基本框架。

查看此处的示例模块


PRO版

解锁海量组件和页面,请访问我们的PRO版——了解详情

Horizon AI Boilerplate NextJS Shadcn UI


报告问题

我们使用GitHub Issues作为Horizon UI的官方漏洞追踪工具。对于想要报告问题的用户,我们有以下建议:

  1. 请确保您使用的是最新版本的Horizon UI样板。请在我们的CHANGELOG文件中查看您的仪表板更新记录。

  1. 提供可复现的问题步骤将有助于缩短修复时间。

  1. 部分问题可能与浏览器有关,因此说明您是在哪个浏览器中遇到问题可能会有所帮助。

社区

加入社区吧!欢迎随时提问、报告问题,并结识已经使用Horizon UI的其他开发者!

💬 加入#HorizonUI Discord社区!

版权与许可

⭐️ 版权所有 2024 Horizon UI

📄 Horizon UI许可证


致谢

特别感谢那些帮助我们打造这款优秀样板包的开源资源,包括:

版本历史

v3.0.02025/01/28
v2.1.02024/09/06
v2.0.02024/08/26
v1.1.02024/07/18
v1.0.02024/05/20

常见问题

相似工具推荐

openclaw

OpenClaw 是一款专为个人打造的本地化 AI 助手,旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚,能够直接接入你日常使用的各类通讯渠道,包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息,OpenClaw 都能即时响应,甚至支持在 macOS、iOS 和 Android 设备上进行语音交互,并提供实时的画布渲染功能供你操控。 这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地,用户无需依赖云端服务即可享受快速、私密的智能辅助,真正实现了“你的数据,你做主”。其独特的技术亮点在于强大的网关架构,将控制平面与核心助手分离,确保跨平台通信的流畅性与扩展性。 OpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者,以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力(支持 macOS、Linux 及 Windows WSL2),即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你

349.3k|★★★☆☆|今天
Agent开发框架图像

stable-diffusion-webui

stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面,旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点,将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师,还是想要深入探索模型潜力的开发者与研究人员,都能从中获益。其核心亮点在于极高的功能丰富度:不仅支持文生图、图生图、局部重绘(Inpainting)和外绘(Outpainting)等基础模式,还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外,它内置了 GFPGAN 和 CodeFormer 等人脸修复工具,支持多种神经网络放大算法,并允许用户通过插件系统无限扩展能力。即使是显存有限的设备,stable-diffusion-webui 也提供了相应的优化选项,让高质量的 AI 艺术创作变得触手可及。

162.1k|★★★☆☆|昨天
开发框架图像Agent

everything-claude-code

everything-claude-code 是一套专为 AI 编程助手(如 Claude Code、Codex、Cursor 等)打造的高性能优化系统。它不仅仅是一组配置文件,而是一个经过长期实战打磨的完整框架,旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能,everything-claude-code 能显著提升 AI 在复杂任务中的表现,帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略,使得模型响应更快、成本更低,同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库,还是需要 AI 协助进行安全审计与自动化测试,everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目,它融合了多语言支持与丰富的实战钩子(hooks),让 AI 真正成长为懂上

141.5k|★★☆☆☆|今天
开发框架Agent语言模型

ComfyUI

ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎,专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式,采用直观的节点式流程图界面,让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景,也能自由组合模型、调整参数并实时预览效果,轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性,不仅支持 Windows、macOS 和 Linux 全平台,还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构,并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者,还是追求极致创作自由度的设计师与资深 AI 绘画爱好者,ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能,使其成为当前最灵活、生态最丰富的开源扩散模型工具之一,帮助用户将创意高效转化为现实。

107.9k|★★☆☆☆|今天
开发框架图像Agent

LLMs-from-scratch

LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目,旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型(LLM)。它不仅是同名技术著作的官方代码库,更提供了一套完整的实践方案,涵盖模型开发、预训练及微调的全过程。 该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型,却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码,用户能够透彻掌握 Transformer 架构、注意力机制等关键原理,从而真正理解大模型是如何“思考”的。此外,项目还包含了加载大型预训练权重进行微调的代码,帮助用户将理论知识延伸至实际应用。 LLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API,而是渴望探究模型构建细节的技术人员而言,这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计:将复杂的系统工程拆解为清晰的步骤,配合详细的图表与示例,让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础,还是为未来研发更大规模的模型做准备

90.1k|★★★☆☆|今天
语言模型图像Agent

Deep-Live-Cam

Deep-Live-Cam 是一款专注于实时换脸与视频生成的开源工具,用户仅需一张静态照片,即可通过“一键操作”实现摄像头画面的即时变脸或制作深度伪造视频。它有效解决了传统换脸技术流程繁琐、对硬件配置要求极高以及难以实时预览的痛点,让高质量的数字内容创作变得触手可及。 这款工具不仅适合开发者和技术研究人员探索算法边界,更因其极简的操作逻辑(仅需三步:选脸、选摄像头、启动),广泛适用于普通用户、内容创作者、设计师及直播主播。无论是为了动画角色定制、服装展示模特替换,还是制作趣味短视频和直播互动,Deep-Live-Cam 都能提供流畅的支持。 其核心技术亮点在于强大的实时处理能力,支持口型遮罩(Mouth Mask)以保留使用者原始的嘴部动作,确保表情自然精准;同时具备“人脸映射”功能,可同时对画面中的多个主体应用不同面孔。此外,项目内置了严格的内容安全过滤机制,自动拦截涉及裸露、暴力等不当素材,并倡导用户在获得授权及明确标注的前提下合规使用,体现了技术发展与伦理责任的平衡。

88.9k|★★★☆☆|今天
开发框架图像Agent