展示如何在 VSCode 中整合 Algolia MCP 与 GitHub Copilot 加速项目发现。有一定的工程实用性。
Algolia MCP Server 挑战:极致用户体验
这是我为 Algolia MCP Server Challenge 提交的参赛作品。
最近,我参加了不少 DEV Challenge,而且越来越喜欢这种感觉!
不过,有一个问题:我的大多数 DEV Challenge 作品都是在周末完成的。这意味着等我提交时,已经有很多人提交了作品。
这当然很好!但如果别人已经做过了同样的东西,自己再做一遍又有什么意义呢?我的意思是,这并不总是一件坏事,但你难道不希望做点更独特的东西吗?
这时,Algolia MCP Server Challenge 出现了!
于是我想到:Algolia MCP Server 能不能让我轻松确认,自己准备做的项目至少到目前为止还是独一无二的?
这正是这个项目要解决的问题。
在 Linux 环境下,将 Algolia MCP Server 安装到搭配 GitHub Copilot 的 VSCode 中。
开发了一个 CLI 工具,通过 Forem API 获取 dev.to Challenge 参赛作品。
开发了一个 Web 界面,用于在本地查看这些参赛作品。
开发了一个名为 dcs 的 MCP(Model Context Protocol)Server,以便在 GitHub Copilot Agent Mode 中获取参赛作品数据。
然后,我使用 Algolia MCP Server 将这些 Challenge 参赛数据索引到 Algolia 中,只需要这样提问:
#dcs fetch algoliachallenge tag submissions, get all the submissions from this tag, and add them to my Dev Challenges app in #algolia
最后,我在 Agent Mode 中询问 GitHub Copilot:我的项目创意是否足够独特!
一切构建完成后,我只需要问:
#algolia in Algolia Challenge did anyone submit something related to GitHub Copilot?
我不必再逐个深入查看 dev.to 上的所有参赛作品。
也不需要执行任何复杂的搜索。
只要向 Algolia MCP Server 发出一条命令,AI Agent 就会处理剩下的一切!
在我心里,我已经从这次挑战中赢得了某种收获!🚀
我相信其他开发者也会喜欢这种方法,而未来的 DEV Challenge 也会因为类似的解决方案,收到更多独具创意的参赛作品。
谁知道呢,也许 dev.to 在不久的将来就会提供自己的 MCP Server!💫
下面这个 GitHub 仓库包含了实现以下功能所需的全部代码和说明:
这是一个现代化的 Web 应用,用于浏览 dev.to 上的 Dev Challenge 参赛作品。该应用由三部分组成:用于获取参赛作品的 CLI 工具、用于展示作品的 React Web 界面,以及用于集成 AI assistant 的 MCP Server。
提供更加详细的实操教程,帮助你有效使用这个项目。
每日自动更新 Challenge 参赛作品。
过滤掉使用 Challenge 标签但与挑战无关的文章。
提供 FullStack Web App,并允许你使用自己的 LLM API key,围绕独特项目展开头脑风暴。
CLI Tool:通过 Forem API 获取、更新和管理 dev.to 上的参赛作品。
精美的 Web Interface:浏览参赛作品,并提供排序和搜索功能。
MCP Server:用于集成 AI assistant 的 Model Context Protocol Server,支持 GitHub Copilot、Claude 等。
自动刷新:获取或删除数据后,Web 应用会自动更新。
响应式设计:在桌面设备和移动设备上都能获得出色的使用体验。
项目最初使用 vite 和 pnpm 完成初始化。
之后的大部分解决方案,都是我使用 GitHub Copilot 的 Agent Mode,搭配 Claude Sonnet 4,通过 vibe coding 完成的。不过,当 Claude 开始犯错时,我还是不得不亲自动手处理一些问题。所以,这个项目并不完全是 vibe coding 的成果。
Algolia MCP Server 文档没有提供适用于 Linux 或 GitHub Copilot 的操作说明,但经过一番摸索,我还是成功让它运行起来了。
.vscode/mcp.json 文件:
{
"servers": {
"algolia": {
"command": "${input:algolia_mcp_dir}/algolia-mcp"
},
"dcs": {
"command": "${input:dcs_mcp_dir}/server"
}
},
"inputs": [
{
"id": "algolia_mcp_dir",
"type": "promptString",
"description": "Path to the Algolia MCP directory",
"password": false
},
{
"id": "dcs_mcp_dir",
"type": "promptString",
"description": "Path to the dev.to Challenges MCP directory",
"password": false
}
]
}
GitHub Copilot 对 Algolia MCP Server 的支持相当不错!
不过,在 GitHub Copilot 中,只有 Claude 模型支持 Algolia MCP Server,GPT 模型并不支持,会返回 400 error。
话虽如此,GitHub 自己的 MCP Server 可以与 GitHub Copilot Agent Mode 中的 GPT 4.1 配合使用。我没有时间深入调试,弄清楚为什么 Algolia MCP Server 只能与 Claude 模型配合使用。也许 Algolia 团队会着手解决这个问题?
总的来说,参加这次挑战对我而言是一次非常愉快的经历。
希望其他开发者也能从这个项目中受益。❤️
如需采取进一步措施,你可以考虑屏蔽此人和/或举报滥用行为。