Manual de uso · versión 1.2

Proyectos y Tareas

Una lista de tareas para dos personas, que se puede usar de dos maneras a la vez: desde la página web, o hablándole a Claude por chat. Las dos ven exactamente lo mismo.

01

Cómo funciona por dentro

La app son dos programas corriendo al mismo tiempo que leen y escriben en un solo archivo. Ese archivo es la lista de verdad; todo lo demás son formas distintas de mirarla.

QUIÉN LO USA Ana · navegador abre la página web Beto · navegador abre la página web Ana · Claude le escribe por chat Beto · Claude le escribe por chat LOS DOS PROCESOS app-web server.js · puerto 3000 sirve la página + la API app-mcp mcp-server.js · puerto 3001 11 herramientas para Claude LA LISTA DE VERDAD data/app.db un solo archivo SQLite tabla projects tabla tasks lee / escribe lee / escribe
Dos puertas de entrada, una sola despensa. Por eso lo que carga Ana en la web aparece cuando Beto le pregunta a Claude, sin que nadie tenga que sincronizar nada.

La página web además se refresca sola cada 10 segundos, así que si la otra persona cambia algo, lo vas a ver aparecer sin tocar nada. Mientras tengas una ventana de edición abierta el refresco se frena, para no borrarte lo que estás escribiendo.

02

El código de colores

Cada tarea tiene una franja de color a la izquierda y un cartelito con su estado. No hace falta leer nada para saber cómo viene una tarea:

Ámbar · Pendiente Falta hacerla. Si cargaste el detalle, se muestra abajo en el recuadro Falta:
Rojo · Vencida Pendiente y con la fecha límite ya pasada. Van siempre arriba de todo.
Verde · Hecha Concluida. Se tacha, se atenúa y baja al final de la lista.

Así se ven en la app

Escribir el copy del aviso ! Vencida
📁 Marketing · 📅 20-ago (vencida)
Falta: la revisión de legales
Último cambio: Ana
Diseñar el flyer Pendiente
📁 Marketing · 📅 05-sept
Falta: que el cliente apruebe el color de fondo
Último cambio: Ana
Reservar el espacio publicitario ✓ Hecha
📁 Marketing
Último cambio: Beto

El orden nunca es al azar: primero lo vencido, después lo pendiente por fecha más próxima, y al final lo hecho.

03

Usarla desde la web

La primera vez

  1. Entrá a la dirección de la app. En tu PC es http://localhost:3000; en el servidor va a ser tu dominio.
  2. Pegá la clave de acceso. Es la API_KEY que está en el archivo .env del servidor. Queda guardada en ese navegador: no te la vuelve a pedir.
  3. Poné tu nombre. Se usa para firmar cada cambio, así la otra persona sabe quién tocó qué. Lo podés cambiar después con el botón 👤 arriba a la derecha.
Cada persona necesita hacer esto una vez por navegador y por dispositivo. Si Ana usa la compu y el celular, va a pegar la clave dos veces.

Las tres pestañas

PestañaQué muestraPara qué sirve
Todas las tareas Todo, hecho y sin hacer, ordenado por urgencia El día a día: crear, editar, tildar
Pendientes Solo lo que falta, con el detalle de qué falta de cada una Ver de un saque el trabajo que queda
Proyectos Las carpetas para agrupar tareas, con cuántas pendientes tiene cada una Organizar y ver el avance por proyecto

Las acciones

Quiero…Cómo
Crear una tareaBotón + Nueva tarea. Lo único obligatorio es el título.
Marcarla hecha o deshacerlaClick en el cuadradito de la izquierda. Se guarda solo.
EditarlaClick en cualquier parte de la tarjeta (no en el cuadradito).
Anotar qué faltaDentro de la tarea, campo ¿Qué falta por hacer?
Ponerle fecha límiteCampo Fecha límite. Si pasa, la tarea se pone roja sola.
Borrar una tareaAbrila y usá Eliminar. Pide confirmación.
Crear un proyectoPestaña Proyectos → + Nuevo proyecto.
Borrar un proyectoÍcono 🗑 en su tarjeta. Se llevan también todas sus tareas: el aviso te dice cuántas.
Cerrar una ventana sin guardarBotón Cancelar, tecla Esc, o click afuera.
Cambiar de nombreBotón 👤 arriba a la derecha.
Una tarea puede no tener proyecto. Dejá el selector en Sin proyecto y queda suelta en la lista general. Sirve para las cosas que no encajan en ningún lado.

El apartado de cada proyecto

En la pestaña Proyectos, hacé click en cualquier proyecto y entrás a su apartado: solo sus tareas, sus contadores, y un botón para crear una tarea ya asignada a él. Es también donde caen solas las tareas que pedís desde Claude.

  • Se actualiza solo cada 10 segundos, igual que el resto: si la otra persona (o Claude) agrega algo, lo ves aparecer sin recargar.
  • El botón ← Volver a proyectos te devuelve al listado.
  • El ícono 🗑 de cada tarjeta sigue siendo para borrar el proyecto entero, no para entrar.

Compartido o privado

Dentro del apartado de cada proyecto hay un interruptor Compartido. Es lo que decide si ese proyecto forma parte del circuito con Claude.

🔗 Compartido🔒 Privado
La app web Lo ve y lo edita Lo ve y lo edita
Claude Lo lista, lee y escribe No lo ve ni puede tocarlo

Los proyectos nuevos nacen compartidos, así lo normal funciona sin configurar nada. Apagá el interruptor solo en los que quieras dejar fuera.

Privado es privado de verdad. Cuando apagás el interruptor, Claude deja de ver ese proyecto al listar, deja de ver sus tareas, y no puede crear, mover, completar ni eliminar nada suyo — ni siquiera sabiendo el número de la tarea. En vez de un error confuso, recibe un mensaje que explica cómo volver a compartirlo.
04

Usarla hablándole a Claude

Cada persona conecta la app a su propia cuenta de Claude, una sola vez. Después, desde cualquier chat, le pide cosas en castellano común.

Conectarla (una vez por cuenta)

Esto requiere que la app ya esté en el VPS, con dominio y HTTPS. claude.ai vive en internet y no puede alcanzar algo que corre dentro de tu computadora (localhost). Mientras la app esté solo en tu PC, el conector no se puede agregar desde claude.ai.
  1. En Claude, entrá a Configuración → Connectors.
  2. Click en +Agregar conector personalizado.
  3. En la URL del servidor poné https://mcp.tudominio.com/mcp
  4. En Configuración avanzada → Request headers, agregá:
    Authorization: Bearer <tu MCP_API_KEY>
  5. Guardar y conectar. Listo.
La MCP_API_KEY es una contraseña. Está en el archivo .env del servidor. Pasásela a la otra persona por un canal privado y no la pegues en ningún chat grupal, documento compartido ni repositorio.

Qué le podés pedir

«Agregá una tarea en el proyecto Marketing: diseñar el flyer, vence el 5 de septiembre» → usa crear_tarea
«¿Qué tareas quedan pendientes y qué les falta?» → usa listar_tareas con only_pending
«Marcá como hecha la tarea 12» → usa completar_tarea
«A la tarea del flyer anotale que falta que el cliente apruebe el color» → usa actualizar_tarea
«¿Cómo venimos en general? ¿Hay algo vencido?» → usa resumen
«Creá un proyecto que se llame Mudanza» → usa crear_proyecto

No hace falta saber los nombres de las herramientas ni los números de las tareas: si le decís «la del flyer», Claude busca la lista y la encuentra.

Que las tareas caigan solas en el proyecto correcto

Si trabajás dentro de un Proyecto de claude.ai, podés dejarlo atado a un proyecto de la app. Después, cuando pidas una tarea desde ese chat, va sola al lugar que corresponde: no tenés que aclarar nunca a qué proyecto pertenece.

Es un paso de configuración de una sola vez, no algo que Claude adivine. El servidor no recibe ninguna información sobre en qué Proyecto de Claude estás — el protocolo no la manda. Por eso la vinculación se deja escrita una vez. Después de ese paso, sí funciona solo y para siempre en ese Proyecto.
  1. En la carpeta de la app, generá el texto:
    npm run vincular -- "Marketing"
    Si el proyecto no existe en la app, lo crea en el momento.
  2. Copiá el bloque que te imprime.
  3. En claude.ai, entrá al Proyecto → InstruccionesEditar y pegalo.

Listo. A partir de ahí, desde ese Proyecto:

«anotá que falta mandar el presupuesto» → la tarea aparece en Marketing, sin preguntar nada
«¿qué me queda pendiente?» → contesta solo lo de Marketing, no todo

Si usás Claude Code en una carpeta

Mismo comando, agregando la ruta. Escribe el bloque en el CLAUDE.md de esa carpeta:

npm run vincular -- "Marketing" --carpeta "C:/ruta/al/repo"

Se puede repetir sin miedo: si ya estaba vinculada, actualiza el bloque en su lugar en vez de duplicarlo, y no toca el resto del archivo.

Tres cosas para tener claras

  • Cada Proyecto de Claude necesita su propia instrucción. Los nuevos que crees no la heredan.
  • Los Proyectos de claude.ai son de cada cuenta. Si los dos tienen un Proyecto «Marketing», cada uno pega el texto en el suyo. Como ambos nombran el mismo proyecto, las tareas terminan en el mismo lugar de la app y los dos las ven.
  • No se generan proyectos duplicados. El servidor busca ignorando mayúsculas y tildes: «marketing», «Marketing» y «Márketing» son el mismo. Y pedir las tareas de un proyecto que no existe devuelve una lista vacía, no crea nada.
05

Las funciones completas

Las 11 herramientas que ve Claude

HerramientaQué hace
listar_proyectosLista los proyectos compartidos, con cuántas tareas y cuántas pendientes tiene cada uno
crear_proyectoCrea un proyecto
vincular_proyectoBusca un proyecto por nombre y lo devuelve; si no existe, lo crea
eliminar_proyectoBorra un proyecto y todas sus tareas
listar_tareasLista tareas; con only_pending devuelve solo las que faltan, con su detalle
obtener_tareaTrae una tarea puntual por su número
crear_tareaCrea una tarea, con o sin proyecto
actualizar_tareaCambia cualquier campo: título, detalle, fecha, proyecto, estado
completar_tareaLa marca como concluida
reabrir_tareaLa vuelve a pendiente y anota qué falta
eliminar_tareaBorra una tarea
resumenTotales, vencidas y las 10 pendientes más próximas

La API de la app web

Es lo que usa la página por debajo cuando apretás un botón. Todo lo que empieza con /api pide la clave en el encabezado x-api-key.

MétodoDirecciónQué hace
GET/healthPúblico. Confirma que el servidor está vivo
GET/api/auth-statusPúblico. Dice si hace falta clave, sin revelarla
POST/api/auth-checkPúblico. Valida una clave antes de guardarla
GET/api/projectsLista proyectos con sus contadores
POST/api/projectsCrea un proyecto
PATCH/api/projects/:idEdita nombre o descripción
DELETE/api/projects/:idBorra el proyecto y sus tareas
GET/api/tasksLista tareas. Admite ?project_id= y ?only_pending=true
GET/api/tasks/:idTrae una tarea
POST/api/tasksCrea una tarea
PATCH/api/tasks/:idEdita una tarea
DELETE/api/tasks/:idBorra una tarea
GET/api/summaryContadores generales

Qué guarda cada tarea

CampoQué es
idEl número de la tarea. Es el que le decís a Claude
project_idA qué proyecto pertenece (puede estar vacío)
titleEl título. Es lo único obligatorio
descriptionDescripción libre
pending_detailsQué falta por hacer — el recuadro ámbar
doneSi está concluida o no
due_dateFecha límite. Si pasa, la tarea se pone roja
updated_byQuién la tocó último
created_at / updated_atCuándo se creó y cuándo se modificó
06

Ponerla en marcha

En tu computadora

Requiere Node.js 18 o superior. Parada en la carpeta app-proyectos:

# una sola vez
npm install
node scripts/gen-env.js

# cada vez que la quieras usar
npm run dev

Después abrí http://localhost:3000. Para frenarla, Ctrl+C en esa ventana.

Verificar que todo anda

npm run smoke

Levanta los dos servidores contra una base descartable y corre 88 pruebas: seguridad, protocolo de Claude, alta y baja de proyectos y tareas, el filtro de pendientes, el borrado en cascada y que las dos puertas vean lo mismo. Tiene que terminar en 0 fallidas.

En el servidor (VPS)

Con los dos subdominios ya apuntando a la IP del servidor, un solo comando hace todo: instala Node, genera las claves, levanta los dos procesos con PM2, configura Nginx y emite los certificados HTTPS.

APP_DOMAIN="app.tudominio.com" \
MCP_DOMAIN="mcp.tudominio.com" \
LETSENCRYPT_EMAIL="vos@dominio.com" \
bash deploy.sh

Al terminar imprime las dos claves. Guardalas: la API_KEY es para entrar a la web, la MCP_API_KEY es para conectar Claude.

Es seguro volver a correr deploy.sh si falló a mitad de camino (por ejemplo, si el DNS todavía no había propagado). No pisa el .env ya creado.
07

Si algo falla

La página me pide la clave de nuevo

Pasa si borraste los datos del navegador, si estás en modo incógnito, o si cambió la API_KEY en el servidor. Pegala otra vez: está en el archivo .env.

La página queda en blanco o dice "Error de red"

Los servidores no están corriendo. En tu PC: volvé a correr npm run dev. En el VPS: pm2 status tiene que mostrar app-web y app-mcp en online; si no, pm2 restart app-web app-mcp y mirá el detalle con pm2 logs.

Claude dice que no puede conectarse al conector

Revisá tres cosas, en este orden: que la URL termine en /mcp, que el encabezado diga exactamente Authorization: Bearer seguido de la clave (con el espacio), y que el certificado HTTPS del subdominio esté vigente. Para descartar, entrá a https://mcp.tudominio.com/health: tiene que responder algo, no dar error de certificado.

No veo lo que cargó la otra persona

La página se refresca sola cada 10 segundos, pero se frena mientras tengas una ventana de edición abierta. Cerrala y esperá unos segundos. Si aun así no aparece, puede que estén apuntando a servidores distintos.

Borré un proyecto sin querer y se llevó las tareas

Es el comportamiento esperado y no tiene deshacer. La única vuelta atrás es un backup: toda la información vive en el archivo data/app.db. Copialo cada tanto (junto a app.db-wal si existe) y vas a poder restaurar.

Cambié algo del código y no se ve

Si tocaste la página (public/), recargá con Ctrl+F5. Si tocaste el servidor (db.js, server.js, mcp-server.js), hay que reiniciar los procesos: pm2 restart app-web app-mcp en el VPS, o cortar y volver a correr npm run dev en tu PC.

Referencia rápida

Página web
http://localhost:3000 · en el VPS, https://app.tudominio.com
Conector de Claude
https://mcp.tudominio.com/mcp
Las claves
archivo .env, en la carpeta de la app
Toda la información
archivo data/app.db — copialo para hacer backup
Verificar que anda
npm run smoke → 88 pruebas, tiene que dar 0 fallidas
Reiniciar en el VPS
pm2 restart app-web app-mcp