AI导哈

SvelteKit 启动模板

一个基于SvelteKit 5的启动模板，包含Vite、Tailwind CSS v4、Prisma和UI组件，适用于快速开发现代Web应用。

  • by Michael-Obele
  • Svelte
  • 本地部署
  • 更新于
在 GitHub 查看 Michael-Obele/mcp-showcase

使用说明

mcp展示

一个SvelteKit 5入门/展示应用程序，带有Vite、Tailwind CSS v4、Prisma和一小部分UI组件以及MCP支持的示例。

特性

  • SvelteKit 5（符文）+TypeScript
  • 顺风CSS v4
  • Prisma ORM（PostgreSQL）
  • MCP支持的检查表示例
  • UI图元（shadcn苗条风格+Bits UI）
  • 简单的基于密码的管理员解锁，用于受保护的操作

入门

先决条件

  • Node.js 18+（推荐）
  • PostgreSQL（可选-如果缺少数据库功能，将被模拟）

设置

  1. 克隆存储库并安装依赖项：

    git clone https://github.com/Michael-Obele/mcp-showcase.git
cd mcp-showcase
npm install

  2. 设置环境变量：

    cp .env.example .env

    更新 .env （参见 环境变量).

  3. 设置数据库：

    npx prisma generate
npx prisma migrate dev --name init

  4. 运行开发服务器：

    npm run dev

用法

  • 应用程序运行于 http://localhost:5173/
  • 清单演示： http://localhost:5173/checklist
  • 要编辑检查表，请单击 解锁 并进入 ADMIN_PASSWORD

环境变量

此项目使用两个环境变量（请参见 ./.env.示例):

  • DATABASE_URL：Prisma的PostgreSQL连接字符串(可选的 -如果缺失，数据库功能将被模拟）
  • ADMIN_PASSWORD：管理员访问检查表功能的密码

示例 .env 文件：

DATABASE_URL="postgresql://username:password@localhost:5432/dbname?sslmode=require"
ADMIN_PASSWORD="your_secure_admin_password"

安全： 永不承诺 .env.使用强力 ADMIN_PASSWORD 并在生产中通过您的托管提供商设置秘密。

数据库（Prisma）

设置之后 DATABASE_URL，运行：

npx prisma generate
npx prisma migrate dev --name init

有用的命令：

npx prisma studio
npx prisma db push

如果您维护数据库种子，请运行 npx prisma db seed （或一个项目 db:seed 脚本（如果已配置）。

脚本

  • npm run dev -启动开发服务器
  • npm run build -为生产而建
  • npm run preview -预览生产版本
  • npm run check -类型+Svelte检查
  • npm run format -带Prettier的格式
  • npm run lint -预处理检查+ESLint

项目结构

src/
├── lib/
│   ├── components/          # UI components (shadcn-svelte, Bits UI)
│   ├── server/              # Server-side utilities (Prisma client)
│   ├── assets/              # Static assets
│   ├── checklist.remote.ts  # Remote functions for checklist actions
│   ├── types.ts             # TypeScript type definitions
│   ├── utils.ts             # Utility functions
│   └── index.ts             # Library exports
├── routes/                  # SvelteKit routes and pages
│   ├── checklist/           # MCP-backed checklist page
│   ├── +page.svelte         # Home page
│   └── +layout.svelte       # Root layout
├── app.d.ts                 # SvelteKit app types
├── app.html                 # HTML template
└── hooks.server.ts          # Server hooks

prisma/
└── schema.prisma            # Database schema

static/                      # Static assets
plan/                        # Project notes and planning

部署

建议主机：Vercel、Netlify或任何支持SvelteKit的Node主机。集 DATABASE_URL 和 ADMIN_PASSWORD 在宿主环境中。

本地构建/预览：

npm run build
npm run preview

贡献

欢迎捐款。

  • 跑 npm run check 在打开PR之前
  • 使更改与现有模式保持一致 src/lib/components/

关键文件

维护人员和支持

  • 维护者：迈克尔·奥贝尔
  • 使用GitHub issues处理bug/功能请求

许可证

此项目在MIT许可证下可用——请参阅 LICENSE 文件以获取详细信息。

更新日志

看 更改日志.md 查看版本历史和更新。

致谢

建于 SvelteKit 的, 棱镜, Tailwind CSS，并受到开源UI库的启发。

行为准则

该项目遵循 贡献者契约 行为准则。

相关 MCP