Build and deploy a custom Model Context Protocol (MCP) server that provides Claude Code with real-time documentation for Django and Vue.js tech stacks, including custom PyPI packages and current library versions.
This skill guides you through building a custom Model Context Protocol (MCP) server that provides Claude Code with up-to-date documentation for Django and Vue.js technology stacks. The server automatically fetches current versions and documentation for libraries, including custom PyPI packages, solving the problem of outdated suggestions and missing knowledge about custom libraries.
Creates an MCP server that:
**Django Backend**: Django, DRF, drf-spectacular, django-cors-headers, django-filter, django-allauth, djangorestframework-simplejwt, stripe, twilio, django-storages, django-anymail, gunicorn, psycopg, redis, celery, django-celery-beat, flower, pytest-django, custom libraries
**Vue.js Frontend**: Vue 3, Vue Router, Pinia, Axios, Tailwind CSS, TipTap, Vite, Jest, Cypress, vue-test-utils, Vitest, ESLint, Playwright
1. **Create Project Structure**
- Create a new directory `django-vue-mcp-server/`
- Initialize Python environment and install dependencies: `mcp`, `httpx`, `redis`, `fastapi`, `uvicorn`
- Create the following directories: `src/`, `tests/`, `docs/`, `systemd/`
2. **Build Core MCP Server (`src/django_vue_mcp_server.py`)**
- Implement MCP protocol handlers for resources and tools
- Create PyPI API integration to fetch package versions and documentation
- Create NPM API integration for Vue.js packages
- Implement resource handlers for each library category (Django core, DRF, Vue core, state management, etc.)
- Add special handling for custom PyPI libraries (e.g., `aida-permissions`)
- Include integration examples and common patterns in responses
3. **Implement Caching Layer**
- Set up Redis connection for distributed caching
- Implement multi-tier caching strategy (hot/warm/cold)
- Configure 6-hour cache refresh interval
- Add cache invalidation for webhook updates
4. **Local Testing**
- Create test script `tests/test_mcp_server.py` to verify MCP protocol communication
- Test PyPI/NPM API integration
- Verify all supported libraries return current documentation
- Test custom library documentation retrieval
1. **Create HTTP API Wrapper (`src/production_mcp_server.py`)**
- Build FastAPI application that wraps MCP server
- Implement REST endpoints: `/docs/{library}`, `/versions/{library}`, `/health`, `/webhook/update`
- Add health check and monitoring endpoints
- Configure CORS for team access
2. **Containerization**
- Create `Dockerfile` with Python runtime and dependencies
- Create `docker-compose.yml` with MCP server, Redis, and Nginx
- Configure environment variables for API keys and URLs
- Set up volume mounts for persistent cache
3. **Server Deployment (Hetzner or similar)**
- Provision Ubuntu server
- Install Docker and Docker Compose
- Clone repository and configure environment
- Deploy containers: `docker-compose up -d`
4. **Domain & SSL Configuration**
- Configure subdomain (e.g., `mcp.domain.com`)
- Create `nginx.conf` with reverse proxy configuration
- Install Let's Encrypt SSL certificate
- Configure automatic certificate renewal
1. **Implement Rate Limiting (`src/rate_limiter.py`)**
- Anonymous users: 100 requests/hour
- API key users: 1000 requests/hour
- Open source projects: 5000 requests/hour
- Use Redis for distributed rate limit tracking
2. **API Key Management (`src/auth.py`)**
- Create API key generation and validation system
- Store keys in Redis with metadata (tier, usage limits)
- Add API key middleware to FastAPI routes
3. **Monitoring & Alerts (`src/monitoring.py`)**
- Track resource usage (CPU, memory, bandwidth)
- Log API requests and response times
- Set up alerting for unusual usage patterns
- Create dashboard for usage metrics
4. **Auto-Update System (`src/auto_updater.py`)**
- Daily: Check for new library versions
- Weekly: Deep documentation scraping
- Webhook endpoint: Immediate updates on trigger
- Log all update activities
1. **Create MCP Client (`src/mcp_http_client.py`)**
- Implement HTTP client that communicates with MCP server
- Handle authentication with API keys
- Implement retry logic and error handling
- Cache responses locally for performance
2. **Configuration File**
- Create example configuration at `docs/claude-code-config.json`
- Document environment variables: `MCP_SERVER_URL`, `MCP_API_KEY`
- Provide installation instructions for `~/.config/claude-code/mcp-config.json`
3. **Testing Integration**
- Test MCP server from Claude Code locally
- Verify documentation responses are accurate and current
- Test custom library documentation retrieval
- Validate caching behavior
1. **Create Documentation**
- `README.md`: Project overview and quick start
- `docs/installation.md`: Setup instructions for local and production
- `docs/api.md`: API endpoint documentation
- `docs/self-hosting.md`: Guide for self-hosting the server
- `CLAUDE.md`: This project context file
2. **Prepare for Open Source**
- Add MIT or Apache 2.0 license
- Create contribution guidelines
- Add issue and PR templates
- Document extensibility for adding new libraries
3. **Deployment Scripts**
- Create systemd service file at `systemd/mcp-docs.service`
- Add deployment automation scripts
- Document backup and recovery procedures
```
django-vue-mcp-server/
├── CLAUDE.md
├── README.md
├── LICENSE
├── requirements.txt
├── docker-compose.yml
├── Dockerfile
├── nginx.conf
├── systemd/
│ └── mcp-docs.service
├── src/
│ ├── django_vue_mcp_server.py
│ ├── production_mcp_server.py
│ ├── mcp_http_client.py
│ ├── auto_updater.py
│ ├── rate_limiter.py
│ ├── auth.py
│ └── monitoring.py
├── docs/
│ ├── installation.md
│ ├── api.md
│ ├── self-hosting.md
│ └── claude-code-config.json
└── tests/
├── test_mcp_server.py
├── test_rate_limiting.py
└── test_integrations.py
```
Once deployed, Claude Code will automatically:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/django-vue-mcp-documentation-server/raw