AI导哈

MCP服务器展示页面

一个展示MCP（Model Context Protocol）服务器的现代化交互式落地页，用于探索AI代理与MCP结合的未来场景。

  • by mcpmessenger
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 mcpmessenger/slash-mcp-landing-page

使用说明

关闭MCP登录页面

网站: slashmcp.com

一个展示MCP（模型上下文协议）服务器的现代交互式登录页面。探索一个AI代理与MCP相遇的世界，并探索我们精心策划的MCP服务器系列，这些服务器旨在塑造未来。

🚀 特性

  • 互动英雄动画：滚动浏览具有平滑变形效果的动画MCP服务器徽标
  • 现代用户界面：使用shadcn-ui组件和Tailwind CSS构建
  • 响应式设计：针对所有设备尺寸进行了优化
  • 平滑动画：由Framer Motion提供支持，实现流畅的用户交互

🛠️ 技术

本项目由以下部分组成：

  • 维特 -快速构建工具和开发服务器
  • 反应18 -UI库
  • TypeScript -类型安全的JavaScript
  • shadcn ui -美观、可访问的组件库
  • 顺风 CSS -实用程序优先的CSS框架
  • 帧运动 -动画库

📦 入门指南

先决条件

  • Node.js 18+和npm（或yarn/pnpm）
  • Git

安装

  1. 克隆存储库：
git clone https://github.com/mcpmessenger/slash-mcp-landing-page.git
cd slash-mcp-landing-page
  1. 安装依赖项：
npm install
  1. 启动开发服务器：
npm run dev
  1. 打开浏览器并导航到 http://localhost:8080

🏗️ 为生产而建

npm run build

生产建设将在 dist 目录。

在本地预览生产版本：

npm run preview

🚢 在AWS Amplify上部署

此项目已配置为通过GitHub在AWS Amplify上部署。

自动部署

  1. 将存储库连接到AWS Amplify:

    • 首选 AWS Amplify控制台
    • 点击“新建应用”→ “主机web应用程序”
    • 选择“GitHub”并授权AWS Amplify
    • 选择存储库： mcpmessenger/slash-mcp-landing-page
    • 选择分支（通常 main 或 master)

  2. 构建设置:

    • AWS Amplify将自动检测来自的构建设置 amplify.yml
    • 构建命令： npm run build
    • 输出目录： dist
    • 节点版本：18.x或更高

  3. 部署:

    • 点击“保存并部署”
    • Amplify将自动构建和部署您的应用程序
    • 未来对连接分支的推动将触发自动部署

手动配置（如果需要）

如果自动检测不起作用，请使用以下设置：

  • 生成命令: npm ci && npm run build
  • 输出目录: dist
  • 节点版本：18.x

自定义域名

  1. 在AWS Amplify控制台中，转到您的应用程序
  2. 导航到“域管理”
  3. 点击“添加域”
  4. 输入您的域名（例如。， slashmcp.com)
  5. 按照DNS配置说明进行操作

📝 可用脚本

  • npm run dev -启动开发服务器
  • npm run build -为生产而建
  • npm run preview -预览生产构建
  • npm run lint -运行ESLint

📁 项目结构

slash-mcp-landing-page/
├── public/          # Static assets
├── src/
│   ├── assets/     # Images and logos
│   ├── components/ # React components
│   ├── pages/      # Page components
│   └── lib/        # Utilities
├── index.html      # HTML entry point
└── vite.config.ts  # Vite configuration

🤝 贡献

  1. 分叉存储库
  2. 创建要素分支(git checkout -b feature/amazing-feature)
  3. 提交您的更改(git commit -m 'Add some amazing feature')
  4. 推到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

📄 许可证

这个项目是私有的。

🔗 链接

相关 MCP