AI导哈

MCP集成展示仪表盘

一个为Poke用户展示Model Context Protocol（MCP）集成的社区驱动型仪表盘，提供集成配置指南和示例，帮助用户扩展AI助手功能。

  • by guirguispierre
  • HTML
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 guirguispierre/mcp-dashboard

使用说明

🚀 Poke MCP Dashboard

A modern, community-driven dashboard showcasing Model Context Protocol (MCP) integrations specifically designed for Poke users. Created by @guirguispierre.

⚠️ Important Disclaimer

This project is independently created and maintained by @guirguispierre as a community resource for Poke users. It is NOT affiliated with, endorsed by, sponsored by, or officially connected to poke.com or its parent company. This is a community-driven showcase of MCP integrations that work with Poke.

📚 Table of Contents

🎯 Overview

This dashboard provides a comprehensive guide to MCP (Model Context Protocol) integrations that enhance your Poke AI assistant with powerful external capabilities. Each integration includes detailed setup instructions, configuration examples, and real Poke conversation examples.

What is MCP in Poke?

Model Context Protocol allows Poke to securely connect to external data sources and tools, enabling it to access real-time information and perform actions on your behalf. Once configured, you can naturally ask Poke to interact with these services through conversation.

Key Features

  • ✨ Production-Ready Integrations - All tested with Poke
  • 📖 Comprehensive Documentation - Step-by-step guides for each integration
  • 🎨 Modern Design - Beautiful, responsive UI with dark/light modes
  • 🔒 Security First - Best practices for API key management
  • ♿ Accessible - WCAG compliant, keyboard navigable
  • 📱 Responsive - Works on all devices
  • 🔍 Searchable - Find integrations quickly
  • 🎯 Categorized - Organized by use case

🚀 Quick Start

For Users

  1. Browse Integrations

    Visit: https://guirguispierre.github.io/mcp-dashboard/

  2. Choose an Integration

    • Click any integration card
    • Read the setup guide
    • Get your API credentials

  3. Configure Poke

    • Add MCP server to your Poke config
    • Restart Poke
    • Start chatting!

Example Configuration

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "your_token_here"
      }
    }
  }
}

💻 Installation

Prerequisites

  • Node.js 18+ (for MCP servers)
  • Git
  • Poke with MCP support

Local Development

# Clone repository
git clone https://github.com/guirguispierre/mcp-dashboard.git
cd mcp-dashboard

# Install dependencies
npm install

# Start development server
npm run dev

# Open in browser
open http://localhost:3000

Deploy to Vercel

npm install -g vercel
vercel --prod

Deploy to Netlify

npm install -g netlify-cli
netlify deploy --prod

📁 Project Structure

mcp-dashboard/
├── index.html                      # Main dashboard page
├── integration-template.html       # Template for new integrations
├── integration-styles.css          # Shared styles (black/white theme)
│
├── bart.html                       # Integration pages
├── deepwiki.html
├── earnings-feed.html
├── ffmpeg.html
├── github.html
├── last-fm.html
├── netlify.html
├── supabase.html
├── todoist.html
├── vercel.html
│
├── CONTRIBUTING.md                 # Contribution guidelines
├── INTEGRATIONTEMPLATEGUIDE.md    # Template usage guide
├── CSS_ANALYSIS.md                # Design system documentation
├── README.md                       # This file
├── LICENSE                         # MIT License
│
├── style.css                       # Main dashboard styles
├── script.js                       # Dashboard JavaScript
├── package.json                    # Project metadata
├── vercel.json                     # Vercel config
└── netlify.toml                    # Netlify config

📚 Documentation

For Users

  • Main Dashboard - Browse all integrations
  • Individual Integration Pages - Detailed setup guides (linked from dashboard)

For Contributors

  • CONTRIBUTING.md - How to contribute

    • Adding new integrations
    • Code style guidelines
    • Testing requirements
    • Submission process

  • INTEGRATIONTEMPLATEGUIDE.md - Using the template

    • Template structure
    • Placeholder reference
    • Best practices
    • Quality standards

  • CSS_ANALYSIS.md - Design system

    • Color palette
    • Typography scale
    • Component guidelines
    • Responsive breakpoints

Quick Links

🤝 Contributing

We welcome contributions! Here's how to get started:

Quick Start

  1. Fork & Clone

    git clone https://github.com/YOUR-USERNAME/mcp-dashboard.git
cd mcp-dashboard

  2. Create Branch

    git checkout -b feature/your-feature-name

  3. Make Changes

  4. Test Thoroughly

    • Test on multiple browsers
    • Check mobile responsiveness
    • Validate HTML/CSS
    • Test accessibility

  5. Submit PR

    git push origin feature/your-feature-name

Ways to Contribute

  • 🔌 Add Integrations - Create pages for new MCP servers
  • 📝 Improve Docs - Enhance setup guides and examples
  • 🐛 Fix Bugs - Report and fix issues
  • 🎨 Design - Improve UI/UX
  • ♿ Accessibility - Enhance accessibility features
  • 🌍 Translate - Add multi-language support

Contribution Ideas

  • Add: Slack, Discord, Notion, Linear, Airtable integrations
  • Create video tutorials for each integration
  • Build interactive demos
  • Add more conversation examples
  • Improve mobile experience
  • Enhance search functionality
  • Add integration testing

Read the full Contributing Guide for detailed instructions.

🎨 Design System

Minimal Black & White Theme

This project uses a consistent minimal design system across all integration pages:

Colors

/* Light Mode */
--bg-primary: #ffffff;
--text-primary: #000000;
--border-color: #e0e0e0;

/* Dark Mode */
--bg-primary: #000000;
--text-primary: #ffffff;
--border-color: #333333;

Typography

  • Font: Inter, system fonts
  • Scale: 16px base, modular scale
  • Weights: 400 (body), 600 (medium), 700-800 (headings)

Components

  • Cards with subtle borders
  • Rounded corners (8-12px)
  • Minimal shadows
  • Clear hover states
  • Accessible focus indicators

See CSS_ANALYSIS.md for complete design system documentation.

🙏 Third-Party MCP Server Acknowledgments

This dashboard showcases MCP servers developed by various talented developers in the community. We gratefully acknowledge:

Community-Developed Servers

  • Last.fm MCP by Rian van der Merwe

    • Repository: rianvdm/lastfm-mcp
    • License: MIT License
    • Deployment: Cloudflare Workers with OAuth 2.0
    • URL: https://lastfm-mcp.com/mcp

  • EarningsFeed MCP by EarningsFeed Organization

    • Official API: https://earningsfeed.com/api
    • MCP Endpoint: https://earningsfeed.com/api/mcp
    • Documentation: https://earningsfeed.com/api/docs
    • SDKs: Python, Node.js, Rust, CLI
    • License: MIT License (SDKs)
    • Data Source: SEC EDGAR Database

  • FFmpeg MCP (Original) by yubraaj11

    • Original Repository: yubraaj11/ffmpeg-mcp
    • Fork/Deployment: guirguispierre/ffmepgPOKE
    • Deployment URL: https://ffmpeg-mcp.onrender.com/mcp
    • Framework: FastMCP + FFmpeg Python bindings
    • Core Technology: FFmpeg (LGPL/GPL licensed)

Pierre's Original Servers

  • BART MCP - Custom-built MCP server for Bay Area Rapid Transit
    • Repository: guirguispierre/bartMCP
    • Framework: FastMCP + BART Legacy API
    • Data Source: BART API (api.bart.gov)
    • License: MIT License

Official MCP Servers

The following integrations use official MCP servers from the Model Context Protocol organization:

All official servers maintained by @modelcontextprotocol

Frameworks & Technologies

Note: This dashboard aggregates and documents these integrations but does not claim ownership of the underlying MCP servers. Each server is the work of its respective developers and is used in accordance with its license. We deeply appreciate the contributions of all developers who make these tools available to the community.

🔒 Security

Best Practices

  • ✅ Store API keys in environment variables
  • ✅ Never commit credentials to Git
  • ✅ Use minimal required permissions
  • ✅ Rotate keys regularly
  • ✅ Follow service-specific security guidelines

Implementation

  • All integration pages emphasize security
  • Warning boxes for credential handling
  • Best practices sections in each guide
  • Links to official security docs

📊 Performance

  • Lightweight - Minimal dependencies
  • Fast Load - Optimized assets
  • Responsive - Mobile-first design
  • Accessible - WCAG AA compliant
  • SEO Friendly - Semantic HTML, proper meta tags

🧪 Testing

Manual Testing Checklist

  • [ ] All links work
  • [ ] Code examples are accurate
  • [ ] Responsive on mobile/tablet/desktop
  • [ ] Dark/light mode both work
  • [ ] Keyboard navigation works
  • [ ] Screen reader compatible
  • [ ] No console errors
  • [ ] HTML validates
  • [ ] Cross-browser compatible

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

@guirguispierre

  • Independent community project
  • Not affiliated with poke.com
  • Open source contributor

📞 Support

Need Help?

Common Issues

Q: MCP server not showing up in Poke? A: Restart Poke after adding the configuration.

Q: API key errors? A: Verify key is correct and has required permissions.

Q: How do I contribute? A: Read CONTRIBUTING.md for complete guide.

🗺️ Roadmap

  • [ ] Video tutorials for each integration
  • [ ] Interactive demos
  • [ ] More integrations (Slack, Discord, Notion, Linear)
  • [ ] Configuration validator tool
  • [ ] Community example library
  • [ ] Multi-language support
  • [ ] Advanced search functionality
  • [ ] Integration testing suite

🌟 Star History

If you find this helpful, please star the repo! ⭐

🔗 Links

Built with ❤️ for the Poke community by @guirguispierre

Independent community project • Not affiliated with poke.com • MIT License

Join us in making MCP integrations accessible to all Poke users! 🚀

相关 MCP