Mytek Hub Projeto
Versão de projeto/protótipo do Mytek Hub, publicada aqui no GitHub para
portfólio. O nome interno do app (tela de login, etc.) continua "Mytek
Hub" — só o repositório/portfólio usa "Projeto" pra diferenciar de uma
futura versão oficial da mytek.
Hub interno de operação para equipes: três módulos no mesmo projeto, com o
mesmo login:
- Tarefas (
/board): quadro A Fazer / Em Andamento / Concluído, com
sincronização em tempo real entre todo mundo logado ao mesmo tempo.
- Wiki (
/wiki): páginas de texto rico com editor de blocos (tipo
Notion), usando a biblioteca open-source
BlockNote — plugada direto no nosso
próprio banco em vez de vir com um app inteiro de terceiros junto.
- Mensagens (
/chat): conversas diretas e por canal entre pessoas do
time, em tempo real.
- Integração com IA (
/conta/ia): cada pessoa gera um token pessoal e
conecta a própria IA (Claude Desktop, Claude Code etc.) num servidor MCP
(Model Context Protocol) exposto pelo hub — a partir daí, pedir "cria uma
tarefa no projeto X" pra IA já cria de verdade, em nome de quem pediu.
Detalhes na seção Servidor MCP
abaixo.
Além disso, o projeto inclui gestão de Projetos, Calendário,
Solicitações e um portal de acompanhamento para clientes
(/progresso/[token]), com faturas, documentos e linha do tempo.
Stack: Next.js (App Router) + Supabase (banco + autenticação) +
Tailwind + BlockNote/Mantine (editor da wiki) + mcp-handler/zod para o
servidor MCP, pronto pra abrir no Cursor e publicar na Vercel.
1. Criar o projeto no Supabase
- Crie uma conta/projeto em supabase.com (tem plano gratuito).
- Em Project Settings → API, copie a Project URL e a anon public key.
- Em SQL Editor, cole e rode, em ordem, os arquivos de
supabase/migrations/ — isso cria as tabelas, as permissões de acesso e
liga o tempo real.
- (Opcional, recomendado pra protótipo interno) Em Authentication → Providers → Email,
desative "Confirm email" pra não depender de configurar envio de e-mail
agora. Dá pra reativar depois.
2. Rodar localmente
cd mytek-hub
cp .env.local.example .env.local
# edite .env.local com a URL e a anon key do seu projeto Supabase
npm install
npm run dev
Acesse http://localhost:3000, crie sua conta (tela de cadastro) e comece
a usar o quadro de tarefas, a wiki e as mensagens (links no menu lateral).
Pra testar o chat de verdade, crie uma segunda conta (outro usuário) numa
aba anônima.
Pra rodar os testes (lógica de resolução das tools do MCP — nome de
projeto/pessoa por texto livre, ambiguidade, regras de visibilidade):
npm test
3. Publicar na Vercel
- Suba esse projeto pra um repositório no GitHub da MyTek.
- Em vercel.com, importe o repositório.
- Em Environment Variables, adicione as mesmas duas variáveis do
.env.local:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
- Deploy.
Identidade visual
A UI usa a paleta da marca mytek (azul #175dfc no tema claro,
#3180ff no escuro) — ver app/globals.css e tailwind.config.ts. O
ícone da marca está em public/brand/logo.png.
Servidor MCP (Model Context Protocol)
O hub expõe um servidor MCP em
/api/mcp (app/api/[transport]/route.ts, construído com
mcp-handler + validação de
entrada com Zod), pra que qualquer pessoa do time opere o hub direto pela
própria IA (Claude Desktop, Claude Code, ou qualquer cliente MCP),
sem precisar abrir o site.
Autenticação. Não existe sessão de login normal (cookie) numa chamada
MCP — quem chama é a IA de alguém, de fora do navegador. Em
/conta/ia cada pessoa gera um token pessoal (lib/mcp-tokens.ts,
supabase/migrations/0031_personal_ai_tokens.sql) e configura o cliente MCP
com a URL https://<seu-dominio>/api/mcp e esse token no header
Authorization. A rota valida o token a cada chamada (withMcpAuth) e
aplica, na mão, as mesmas regras de visibilidade que a pessoa já tem no
site (projetos próprios, públicos, ou onde ela tem tarefa) — ver
lib/mcp-server-helpers.ts.
Tools disponíveis:
| Tool | O que faz |
|---|
now_listar_projetos | Lista os projetos visíveis pra quem chamou, com filtro por nome. |
now_criar_tarefa | Cria uma tarefa de verdade (projeto, prazo, responsável, status). |
now_listar_tarefas | Lista tarefas com filtros de projeto, status e responsável. |
now_atualizar_status_tarefa | Muda o status de uma tarefa existente pelo título. |
now_editar_tarefa | Edita título, descrição, prazo, responsável e/ou status de uma tarefa. |
now_comentar_tarefa | Adiciona um comentário numa tarefa existente. |
Cada tool resolve nomes ambíguos de forma conversacional (ex: projeto e
responsavel aceitam nome parcial; se baterem com mais de um resultado, a
tool devolve a lista pra IA perguntar de novo em vez de adivinhar) e
retorna tanto texto quanto structuredContent, para uso tanto por um
agente conversacional quanto por um pipeline programático.
Estrutura do projeto
app/
page.tsx → redireciona para /login ou /board
login/page.tsx → tela de entrar/criar conta
onboarding/page.tsx → configuração inicial do workspace
(app)/board/page.tsx → quadro de tarefas (protegido por login)
(app)/calendario/ → calendário da equipe
(app)/wiki/ → wiki (lista + editor de páginas)
(app)/chat/ → mensagens diretas e por canal
(app)/projetos/ → gestão de projetos
(app)/solicitacoes/ → solicitações internas
(app)/conta/ia/ → geração de tokens pessoais pra IA (MCP)
api/[transport]/ → servidor MCP (tools do Now Organiza)
progresso/[token]/ → portal público de acompanhamento do cliente
components/ → componentes de UI e lógica de cada módulo
lib/ → clientes Supabase, tipos, utilitários e helpers do MCP
middleware.ts → protege as rotas (exige login)
supabase/migrations/ → SQL do banco de dados
