Claude TypeScript MCP Servers

Claude TypeScript MCP Servers (Para Desarrolladores de Software)

Una colección completa de servidores del Protocolo de Contexto de Modelo (MCP) que transforman Claude Desktop en un potente asistente de desarrollo. Este proyecto aprovecha tu suscripción plana de Claude Pro/Max para proporcionar capacidades similares a Cline, pero sin los costos de API por token.

Artículo explicativo en japonés: Cline任せでコード書いてたらAPIクレジットが爆散したのでClaude Desktop + MCPをいい感じにしてサブスクだけで無双する

🚀 Características

• Operaciones del Sistema de Archivos - Leer, escribir y gestionar archivos con restricciones de seguridad
• Integración con Git - Soporte completo del flujo de trabajo de Git, incluyendo commits, ramas y diffs
• API de GitHub - Gestionar repositorios, issues, PRs y más con soporte multi-cuenta
• Búsqueda Web - Búsqueda impulsada por IA con Sonar y búsqueda tradicional por palabras clave con Brave
• Automatización del Navegador - Más de 30 herramientas de Puppeteer para scraping web y automatización
• Comandos de Shell - Ejecutar comandos de desarrollo en un entorno controlado
• Obtención de URL - Extraer contenido de páginas web con conversión de HTML a Markdown

📋 Requisitos

• Node.js v18 o superior
• Bun runtime
• Claude Desktop aplicación
• Claves de API para servicios externos (Brave Search, Perplexity/Sonar)

🛠️ Instalación

# Clone the repository
git clone https://github.com/yourusername/claude-ts-mcps.git
cd claude-ts-mcps

# Install dependencies
bun install

⚙️ Configuración

Crea un archivo de configuración para Claude Desktop con todos los servidores MCP:

{
  "mcpServers": {
    "filesystem": {
      "command": "/Users/username/.bun/bin/bun",
      "args": [
        "run",
        "/path/to/claude-ts-mcps/src/filesystem.ts",
        "/Users/username"
      ]
    },
    "git": {
      "command": "/Users/username/.bun/bin/bun",
      "args": ["run", "/path/to/claude-ts-mcps/src/git.ts"]
    },
    "github": {
      "command": "/Users/username/.bun/bin/bun",
      "args": ["run", "/path/to/claude-ts-mcps/src/github.ts"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_DEFAULT_TOKEN",
        "GITHUB_TOKEN_WORK": "YOUR_WORK_ACCOUNT_TOKEN",
        "GITHUB_TOKEN_PERSONAL": "YOUR_PERSONAL_ACCOUNT_TOKEN"
      }
    },
    "brave-search": {
      "command": "/Users/username/.bun/bin/bun",
      "args": ["run", "/path/to/claude-ts-mcps/src/brave-search.ts"],
      "env": {
        "BRAVE_API_KEY": "YOUR_BRAVE_API_KEY"
      }
    },
    "sonar": {
      "command": "/Users/username/.bun/bin/bun",
      "args": ["run", "/path/to/claude-ts-mcps/src/sonar.ts"],
      "env": {
        "PERPLEXITY_API_KEY": "YOUR_PERPLEXITY_API_KEY"
      }
    },
    "puppeteer": {
      "command": "/Users/username/.bun/bin/bun",
      "args": ["run", "/path/to/claude-ts-mcps/src/puppeteer/index.ts"]
    },
    "shell": {
      "command": "/Users/username/.bun/bin/bun",
      "args": ["run", "/path/to/claude-ts-mcps/src/shell.ts"]
    },
    "fetch": {
      "command": "/Users/username/.bun/bin/bun",
      "args": ["run", "/path/to/claude-ts-mcps/src/fetch.ts"],
      "env": {
        "CUSTOM_USER_AGENT": "YOUR_CUSTOM_USER_AGENT",
        "IGNORE_ROBOTS_TXT": "false"
      }
    }
  }
}

🔧 Herramientas Disponibles

Operaciones del Sistema de Archivos (filesystem)

• Seguridad: Restringido a directorios especificados con protección contra enlaces simbólicos
• Operaciones Principales:
  • Leer/escribir archivos con soporte de codificación (utf-8, base64, hex)
  • Lectura parcial de archivos por rango de bytes o rango de líneas
  • Mover, copiar, eliminar, añadir archivos
  • Crear directorios y gestionar árboles de archivos
• Edición Avanzada:
  • Reemplazo de texto con vista previa de diff
  • Operaciones basadas en líneas (reemplazar, insertar, eliminar líneas específicas)
  • Reemplazos con expresiones regulares y grupos de captura
• Capacidades de Búsqueda:
  • Buscar archivos por patrones de nombre
  • Buscar contenido dentro de archivos (texto plano o regex)
  • Soporte de patrones de exclusión
• Operaciones por Lote:
  • Ejecutar múltiples operaciones de archivos de manera eficiente
  • Ejecución paralela para operaciones de lectura
  • Modo transaccional con soporte de rollback
• Gestión de Archivos Comprimidos:
  • Comprimir archivos (zip, tar, tar.gz)
  • Extraer archivos comprimidos con control de sobrescritura
• Monitoreo de Archivos:
  • Verificar cambios en archivos desde un momento específico
  • Soporte para eventos de cambio, renombrado y eliminación
• Casos de Uso: Edición de código, gestión de proyectos, análisis de archivos, operaciones masivas

Integración con Git (git)

• Flujo de Trabajo Completo de Git: init, add, commit, branch, checkout, diff, log
• Gestión de Repositorios: seguimiento de estado, visualización de historial
• Gestión de Etiquetas:
  • Crear etiquetas ligeras y anotadas
  • Listar etiquetas con filtrado por patrón
  • Mostrar detalles y mensajes de etiquetas
  • Eliminar etiquetas no deseadas
• Casos de Uso: Control de versiones, revisión de código, historial de proyectos, gestión de lanzamientos

API de GitHub (github)

• Gestión de Repositorios: Crear, buscar, gestionar repositorios
• Issues y PRs: Crear, actualizar, fusionar pull requests e issues
• Gestión de Lanzamientos: Crear, actualizar y gestionar lanzamientos
• Soporte Multi-Cuenta: Cambiar entre cuentas de trabajo/personales
• Operaciones de Archivos: Creación y actualización directa de archivos mediante API

Herramientas de Búsqueda Web

Búsqueda Impulsada por IA (sonar)

• Comprensión del Lenguaje Natural: Haz preguntas complejas en lenguaje sencillo
• Respuestas Sintetizadas: Obtén respuestas completas con citas
• Múltiples Modelos:
  • sonar: Búsqueda rápida de propósito general
  • sonar-pro: Consultas complejas con contexto de 200k
  • sonar-reasoning: Razonamiento de cadena de pensamiento
  • sonar-deep-research: Modo de investigación exhaustiva
• Casos de Uso: Investigación, verificación de datos, aprendizaje de temas complejos

Búsqueda Tradicional (brave-search)

• Búsqueda Web: Búsqueda basada en palabras clave que devuelve múltiples resultados
• Búsqueda Local: Encuentra negocios y servicios
• Casos de Uso: Consultas rápidas, encontrar múltiples fuentes, información local

Automatización del Navegador (puppeteer)

Nuestra herramienta más completa con más de 30 funciones organizadas en categorías:

🧭 Navegación e Interacción Básica

• Navegar a URLs, tomar capturas de pantalla
• Hacer clic en elementos, rellenar formularios, seleccionar opciones
• Pasar el cursor sobre elementos, ejecutar JavaScript

⏳ Operaciones de Espera

• Esperar elementos, tiempos de espera, navegación
• Esperar condiciones personalizadas de JavaScript

⌨️ Operaciones de Teclado

• Pulsar teclas y combinaciones de teclas
• Escribir texto con retardos similares a los humanos

📄 Gestión de Páginas

• Establecer tamaño de viewport, retroceder/avanzar, recargar
• Generar PDFs, emular dispositivos

🍪 Cookies y Autenticación

• Establecer/obtener cookies, autenticación HTTP

ℹ️ Recuperación de Información

• Obtener título de página, URL, contenido HTML
• Extraer texto e información detallada de elementos

🖼️ Operaciones de Marcos (Avanzado)

• Listar todos los marcos, cambiar entre marcos
• Ejecutar JavaScript en marcos específicos
• Buscar elementos en todos los marcos

🔧 Varios

• Añadir etiquetas de script, limpiar campos de entrada

Comandos de Shell (shell)

• Ejecución Controlada: Restricciones de comandos basadas en listas de permitidos
• Herramientas de Desarrollo: npm, yarn, bun, git, node, python, tsc
• Seguridad: Previene operaciones peligrosas, restricciones de directorio
• Características: Auto-análisis de cadenas de comandos, límites de tamaño de salida, control de tiempo de espera
• Modo de Transmisión: ¡Ahora habilitado por defecto! Captura la salida de procesos de larga duración
  • Devuelve automáticamente la salida parcial después del tiempo de espera (por defecto: 10s) o el límite de buffer (100KB)
  • Los comandos normales se completan como de costumbre; solo afecta a procesos de larga duración
  • Los procesos se terminan automáticamente después del tiempo de espera de transmisión (valor seguro por defecto)
  • Mantén los procesos en ejecución con killOnStreamingTimeout: false
  • Perfecto para: servidores de desarrollo, watchers de compilación, comandos interactivos
  • Desactívalo con streaming: false si es necesario
• Casos de Uso: Gestión de paquetes, procesos de compilación, ejecución de scripts, monitoreo de servidores

Obtención de Contenido de URL (fetch)

• Extracción de Contenido: Convierte HTML a Markdown limpio
• Personalización: User agents personalizados, manejo de robots.txt
• Casos de Uso: Lectura de documentación, análisis de contenido

💡 Ejemplos de Uso

Flujo de Trabajo de Desarrollo

You: "Create a new React component for user authentication"
Claude: *Uses filesystem to create component file, npm to install dependencies*

You: "Find examples of OAuth implementation on GitHub"
Claude: *Uses GitHub search and fetch to find and analyze implementations*

You: "Test the login form on our staging site"
Claude: *Uses Puppeteer to navigate, fill forms, and verify functionality*

Investigación y Análisis

You: "What are the latest best practices for Next.js 14 App Router?"
Claude: *Uses Sonar for comprehensive research with citations*

You: "Compare our package.json with similar projects"
Claude: *Uses GitHub to find similar projects, filesystem to read local files*

Automatización

You: "Extract all product prices from this e-commerce site"
Claude: *Uses Puppeteer to navigate pages, extract data, and compile results*

You: "Monitor our GitHub issues and create a summary"
Claude: *Uses GitHub API to fetch issues, analyze patterns, generate report*

🔒 Consideraciones de Seguridad

• Sistema de Archivos: Restringido solo a directorios especificados
• Shell: Los comandos deben estar en la lista de permitidos
• Credenciales: Almacena las claves de API de forma segura, usa variables de entorno
• GitHub: Usa permisos mínimos de token
• Fetch: Respeta robots.txt por defecto

🏗️ Estructura del Proyecto

claude-ts-mcps/
├── src/
│   ├── filesystem.ts      # File operations
│   ├── git.ts             # Git integration
│   ├── github.ts          # GitHub API (main entry)
│   ├── github/            # GitHub implementation
│   ├── brave-search.ts    # Brave search API
│   ├── sonar.ts           # Perplexity Sonar API
│   ├── sonar/             # Sonar types and utilities
│   ├── puppeteer/         # Browser automation
│   │   ├── index.ts       # Main entry point
│   │   ├── tools/         # Tool definitions
│   │   ├── handlers/      # Implementation
│   │   └── state.ts       # State management
│   ├── shell.ts           # Shell commands (entry)
│   ├── shell/             # Shell implementation
│   │   ├── index.ts       # Main logic
│   │   ├── executor.ts    # Command execution
│   │   ├── types.ts       # Type definitions
│   │   └── ...            # Other modules
│   └── fetch.ts           # URL fetching
└── package.json

🚧 Desarrollo

Para añadir nueva funcionalidad:

1. Crea un nuevo archivo TypeScript en src/
2. Implementa el servidor MCP usando @modelcontextprotocol/sdk
3. Añade definiciones de herramientas con descripciones claras
4. Incluye manejo de errores y validación adecuados
5. Actualiza el archivo de configuración

Probando tus Cambios

# Run a specific MCP server directly
bun run src/your-new-server.ts

# Test with Claude Desktop
# Update your config and restart Claude

Verificación de Tipos

Este proyecto usa TypeScript para la seguridad de tipos. Hay varios comandos de verificación de tipos disponibles:

# Standard type check (all strict checks enabled)
bun run type-check

# Type check with file watching for development
bun run type-check:watch

# Type check without unused variable warnings (good for development)
bun run check:loose

# Strict type check (same as type-check)
bun run check:strict

Problemas de Tipos Actuales

El proyecto es funcional pero tiene algunos problemas de tipos que se están abordando:

• Algunas APIs de Puppeteer necesitan importaciones de tipos adecuadas
• Algunos casos de valores potencialmente indefinidos necesitan protecciones
• Variables no utilizadas en algunos archivos (se pueden ignorar durante el desarrollo)

Estos no afectan la funcionalidad en tiempo de ejecución, pero se limpiarán con el tiempo.

Formato de Código

Este proyecto usa Prettier para un formato de código consistente. Los siguientes comandos están disponibles:

# Format all files
bun run format

# Check formatting without making changes
bun run format:check

# Format only source files (src directory)
bun run format:src

# Check formatting of source files only
bun run format:check:src

# Run both formatting check and type check
bun run lint

# Fix formatting and run type check
bun run lint:fix

Configuración de Prettier

El proyecto usa la siguiente configuración de Prettier (.prettierrc):

• Ancho de Impresión: 100 caracteres (80 para JSON/Markdown)
• Ancho de Tabulación: 2 espacios
• Puntos y Comas: Siempre
• Comillas: Comillas dobles
• Comas Finales: Todas (ES5+)
• Paréntesis de Flecha: Incluir siempre paréntesis

Formato al Guardar

Para la mejor experiencia de desarrollo, configura tu editor para formatear al guardar:

VS Code: Añade a .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Otros Editores: Consulta la documentación de tu editor para la integración con Prettier.

📚 Recursos

• Documentación del Protocolo de Contexto de Modelo
• Referencia del SDK de MCP
• Anthropic Claude
• API de Brave Search
• API de Perplexity

📄 Licencia

Licencia MIT