概述
这是一个通过Claude Desktop演示MCP技术及其应用的项目。它包括一个实时托管的网站，允许用户登录并探索一系列艺术品。它为用户提供了一种收藏/喜欢他们的艺术品并将其保存到数据库的方法。
如何在当地跑步
- 将存储库克隆到本地计算机。
- 导航到项目目录并使用安装依赖项
npm install. - 构建它
npm run build. - 使用启动开发服务器
npm run dev. - 打开浏览器并转到
http://localhost:5173查看应用程序。 - 如果您想访问Live网站，请访问https://mcp-project-471a6.web.app/Home
您可以设置MCP服务器吗？
- 我还没有托管MCP服务器的后端，所以除非我从firebase提供serviceAccount.json，否则您无法在本地运行它。目前，您唯一能做的就是与本地或实时网站进行交互。
来源
AI在哪里使用
- 整个MCP Server文件夹由AI生成，包括firebase集成和主服务器文件。
- 网站的Logo由AI生成
- 主页的英雄部分和卡片是由人工智能生成的。它也为它生成了CSS，但其余的CSS是由我创建的，大约占70%，以确保它在flex属性下看起来完全符合我的期望。
- utils中的MuseumArtworks.ts是由人工智能生成的，它处理从芝加哥研究所提取艺术品，而我处理艺术品数组的操作，这样你就可以通过索引\[0,1,2,3…\]进行导航
- DashboardArtPictures组件中回调函数“async（ids:string\[\]）”的传递是由我的智能感知生成的。我忘记了，因为我在firebase.ts的“getLikedPosts”函数中为第二个参数的数据类型分配了“Any”，所以我可以传入一个自定义回调函数来检索从getLikedPost函数传入的数据。
照片来自哪里
- 所有艺术作品的照片都来自芝加哥研究所的公共API，https://api.artic.edu/docs/#collections，我使用人工智能生成逻辑来获取这些照片并操纵数据，这样我就可以通过索引进行导航。
装载机部件
- 我使用“react-loader微调器”预构建组件创建了自己的加载器。
我自己做了什么
- 我自己处理了解耦逻辑、身份验证逻辑和偏好逻辑。这很容易，因为firebase提供了许多内置函数来处理身份验证和数据库管理，以及向您准确展示如何使用这些函数的文档。例如，firebase配置已经由firebase在我的firebase项目设置中生成。
- 我只使用AI来生成MCP服务器、网站徽标和艺术提取逻辑。我还使用人工智能为主页生成内容，如文本和布局创意。