Chhart MCP

Chhart MCP é uma ferramenta que permite que assistentes de IA gerem fluxogramas e diagramas Sankey instantâneos e compartilháveis diretamente no chat.

GitHub

Documentação

Servidor Chhart MCP

Um servidor MCP (Model Context Protocol) que permite que assistentes de IA como ChatGPT, Claude e outros criem programaticamente fluxogramas e diagramas de Sankey no chhart.app.

Recursos

🎨 Criar Fluxogramas - Gere fluxogramas usando o DSL intuitivo baseado em texto do Chhart
📊 Criar Diagramas de Sankey - Construa diagramas de Sankey a partir de dados de fluxo
📚 Ajuda de Sintaxe - Obtenha documentação abrangente e exemplos
🔗 URLs Compartilháveis - Todos os diagramas vêm com links compartilháveis do chhart.app
🚀 Integração Fácil - Funciona com qualquer assistente de IA compatível com MCP
🌐 Modo Duplo - Execute localmente (stdio) ou remotamente (StreamableHTTP)
☁️ Pronto para Nuvem - Implante no Railway, Vercel ou qualquer hospedagem Node.js
🔒 Confiável - Transporte moderno StreamableHTTP para conexões estáveis

Pré-requisitos

Node.js 20 ou superior
npm ou yarn
Um cliente compatível com MCP (Claude Desktop, Cursor, etc.)

Instalação

Via npm

npm install -g chhart-mcp

Ou execute diretamente sem instalar:

npx chhart-mcp

A partir do Código Fonte

# Clone the repository
git clone https://github.com/alwank/chhart_MCP.git
cd chhart_MCP

# Install dependencies
npm install

# Build the project
npm run build

Uso

Início Rápido (Servidor Público)

Você pode usar nosso servidor MCP gerenciado sem instalar nada localmente.

Configure seu cliente MCP para conectar ao endpoint público:

{
  "mcpServers": {
    "chhart": {
      "url": "https://mcp.chhart.app/mcp"
    }
  }
}

Modo Local (stdio)

Para uso com Claude Desktop, Cursor ou outros clientes MCP locais:

Compile o projeto:
```
npm run build
```
Adicione à configuração do seu cliente MCP:

Para Claude Desktop, edite claude_desktop_config.json:
```
{
  "mcpServers": {
    "chhart": {
      "command": "npx",
      "args": ["-y", "chhart-mcp"]
    }
  }
}
```
Para Cursor ou outros clientes, consulte CONFIG_EXAMPLES.md para mais exemplos.
Reinicie seu cliente MCP

Modo Remoto (StreamableHTTP)

Para implantação no Railway, Vercel ou outras plataformas de nuvem, usamos o moderno transporte StreamableHTTP para comunicação confiável e sem estado.

Compile e inicie o servidor StreamableHTTP:
```
npm run build
npm run start:streamable
```
O servidor iniciará na porta 3000 (ou na porta especificada na variável de ambiente PORT).

Configure seu cliente MCP para conectar ao endpoint remoto:

{
  "mcpServers": {
    "chhart": {
      "url": "https://your-deployment-url.com/mcp"
    }
  }
}

Implante no Railway:

Consulte o Guia de Implantação no Railway para instruções detalhadas.

Por que StreamableHTTP?

Migramos do transporte SSE para StreamableHTTP para melhor confiabilidade:

Recurso	Transporte SSE	Transporte StreamableHTTP
Tipo de Conexão	Stream SSE de longa duração	Requisições HTTP sem estado
Estabilidade	Propenso a timeouts	✅ Robusto e confiável
Compatibilidade com Nuvem	Limitada	✅ Excelente
Gerenciamento de Sessão	Obrigatório	Opcional (sem estado)

Modo SSE Legado

O transporte SSE ainda está disponível, mas está obsoleto:

npm run start:sse  # Not recommended for production

Ferramentas Disponíveis

`create_flowchart`

Cria um fluxograma usando o DSL baseado em texto do Chhart.

Parâmetros:

content (string, obrigatório) - Conteúdo do fluxograma no formato DSL do Chhart
title (string, opcional) - Título do fluxograma

Exemplo:

{
  "content": "Start\n  Process Step\n    Decision? [shape=diamond]\n      Yes\n        Action\n        End\n      No\n        Skip\n        End",
  "title": "Simple Workflow"
}

`create_sankey`

Cria um diagrama de Sankey mostrando fluxos entre nós.

Parâmetros:

content (string, obrigatório) - Conteúdo do diagrama de Sankey no formato DSL do Chhart
title (string, opcional) - Título do diagrama

Exemplo:

{
  "content": "Revenue [value=100]\n  Costs [value=40]\n    Salaries [value=25]\n    Operations [value=15]\n  Profit [value=60]",
  "title": "Budget Flow"
}

`get_syntax_help`

Retorna documentação e exemplos para a sintaxe do Chhart.

Parâmetros:

type (enum, opcional) - 'flowchart', 'sankey' ou 'all' (padrão: 'all')

Exemplos de Conversas

Uma vez configurado, você pode pedir ao seu assistente de IA:

"Crie um fluxograma mostrando um processo de login de usuário com verificação de e-mail"

"Crie um diagrama de Sankey mostrando como $100 de receita se divide em custos, impostos e lucro"

"Mostre-me a sintaxe para criar fluxogramas no Chhart"

Desenvolvimento

# Install dependencies
npm install

# Build
npm run build

# Watch mode (auto-rebuild on changes)
npm run watch

# Run locally (stdio mode)
npm start

# Run StreamableHTTP server (recommended for remote access)
npm run start:streamable

# Run SSE server (legacy, deprecated)
npm run start:sse

Estrutura do Projeto

chhart_MCP/
├── src/
│   ├── index.ts              # Main entry point (stdio mode)
│   ├── server-streamable.ts  # StreamableHTTP server (recommended)
│   ├── server-sse.ts         # SSE server (legacy)
│   ├── tools/                # MCP tool implementations
│   ├── utils/                # Utility functions
│   └── transports/           # Transport implementations
│       ├── streamable.ts     # StreamableHTTP transport
│       └── sse.ts            # SSE transport (legacy)
├── dist/                     # Compiled JavaScript (generated)
└── docs/                     # Documentation files

Como Funciona

O servidor MCP gera URLs compartilháveis codificando os dados do gráfico no hash da URL, aproveitando o recurso existente de compartilhamento baseado em URL do chhart.app. Isso significa:

✅ Nenhuma API de backend necessária
✅ Os gráficos são totalmente processados no lado do cliente
✅ As URLs funcionam imediatamente sem armazenamento
✅ Os gráficos podem ser editados no chhart.app
✅ Amigável à privacidade (os dados permanecem na URL)

Solução de Problemas

"Comando não encontrado" ou "Módulo não encontrado"

Certifique-se de ter executado npm install e npm run build
Verifique se o caminho na configuração do seu cliente MCP é absoluto
Verifique se o Node.js 20+ está instalado: node --version

Problemas de Conexão

"connection closed: EOF" ou erros semelhantes:

Se estiver usando o modo remoto, certifique-se de usar o transporte StreamableHTTP (npm run start:streamable)
O transporte SSE legado está obsoleto e pode ter problemas de estabilidade
Verifique se o servidor está em execução: verifique o endpoint de saúde em http://localhost:3000/health
Verifique as configurações de firewall se estiver implantando remotamente
Certifique-se de que o CORS esteja configurado corretamente para seu domínio

Configuração do cliente:

Clientes StreamableHTTP usam requisições application/json para /mcp
Clientes SSE legados exigem text/event-stream para o stream /mcp e JSON para /messages
Certifique-se de que a URL aponte para o endpoint /mcp

Gráficos Não Carregando

Verifique se a URL gerada está completa e não truncada
Verifique o console do navegador para erros
Tente abrir a URL diretamente no navegador
Diagramas muito grandes podem exceder os limites de comprimento da URL (tipicamente 2000 caracteres)

Erros de Compilação TypeScript

Certifique-se de estar usando Node.js 20+
Exclua node_modules e dist, depois execute npm install e npm run build
Verifique a compatibilidade da versão do TypeScript

Para mais ajuda, consulte CONTRIBUTING.md ou abra uma issue.

Contribuição

Aceitamos contribuições! Consulte CONTRIBUTING.md para diretrizes sobre:

Relatar bugs
Sugerir recursos
Enviar pull requests
Configuração de desenvolvimento
Padrões de codificação

Segurança

Para preocupações de segurança, consulte nossa Política de Segurança. Não abra issues públicas para vulnerabilidades de segurança.

Licença

Licença MIT - consulte LICENSE para detalhes.

Chhart MCP

Documentação

Servidor Chhart MCP

Sumário

Recursos

Pré-requisitos

Instalação

Via npm

A partir do Código Fonte

Uso

Início Rápido (Servidor Público)

Modo Local (stdio)

Modo Remoto (StreamableHTTP)

Por que StreamableHTTP?

Modo SSE Legado

Ferramentas Disponíveis

create_flowchart

create_sankey

get_syntax_help

Exemplos de Conversas

Desenvolvimento

Estrutura do Projeto

Como Funciona

Solução de Problemas

"Comando não encontrado" ou "Módulo não encontrado"

Problemas de Conexão

Gráficos Não Carregando

Erros de Compilação TypeScript

Contribuição

Segurança

Licença

Links

`create_flowchart`

`create_sankey`

`get_syntax_help`