Val Town Code SearchReturn to Val Town

152 */
153export function setupMockDOM() {
154  // Mock clipboard API
155  Object.assign(navigator, {
156    clipboard: {

2  "name": "anthropic-streaming-chat-mcp",
3  "version": "1.0.0",
4  "description": "A mobile-optimized single page chat application that uses the Anthropic Messages API with real-time streaming and MCP (Model Context Protocol) server support",
5  "type": "module",
6  "scripts": {

1// news_api.tsx — tiny helper: http://…/latest?limit=6
2import { blob } from "https://esm.town/v/std/blob";
3

411                    <button class="glass-button" data-node-type="input">📝 Entrada</button>
412                    <button class="glass-button" data-node-type="output">📤 Saída</button>
413                    <button class="glass-button" data-node-type="api">🌐 API</button>
414                    <button class="glass-button" data-node-type="end">⏹️ Fim</button>
415                    <button class="glass-button" id="saveFlowchart">💾 Salvar</button>
464                    <li><strong>📝 Entrada:</strong> Coleta de dados ou informações.</li>
465                    <li><strong>📤 Saída:</b> Exibição de resultados ou informações.</li>
466                    <li><strong>🌐 API:</strong> Chamada a uma API externa.</li>
467                    <li><strong>⏹️ Fim:</strong> O ponto final do seu fluxograma.</li>
468                </ul>
506                decision: { label: "Decisão", icon: "❓", color: "#FFC107", subtypes: ["Booleano", "Comparação", "Intervalo", "Padrão"] },
507                input: { label: "Entrada", icon: "📝", color: "#9C27B0", subtypes: ["Texto", "Número", "Arquivo", "Seleção"] },
508                output: { label: "Saída", icon: "📤", color: "#FF5722", subtypes: ["Exibir", "Arquivo", "Notificação", "Resposta API"] },
509                api: { label: "API", icon: "🌐", color: "#673AB7", subtypes: ["REST API", "GraphQL", "Webhook", "Database"] },
510                end: { label: "Fim", icon: "⏹️", color: "#F4436", subtypes: [] },
511            };

5function calculateEstimatedDuration(steps) {
6  const baseDuration = steps.length * 2;
7  const complexSteps = steps.filter(s => ["api_call", "database_operation"].includes(s.action)).length;
8  return baseDuration + (complexSteps * 5);
9}
21  steps.forEach(step => {
22    switch (step.action) {
23      case "make_api_call":
24        permissions.add("network_access");
25        break;
41  const dependencies = new Set();
42  steps.forEach(step => {
43    if (step.action === "make_api_call") {
44      dependencies.add("http_client");
45    }
105        instructions.push({ type: "display_output", content: node.text, format: node.subtype });
106        break;
107      case "api":
108        instructions.push({ type: "make_api_call", endpoint: node.text, method: node.subtype, description: node.description });
109        break;
110      case "end":
133}
134
135// --- api.ts ---
136// Salvar fluxograma (simulado - em produção usaria std/blob)
137async function saveFlowchart(req) {
669                    <button class="glass-button" data-node-type="input">📝 Entrada</button>
670                    <button class="glass-button" data-node-type="output">📤 Saída</button>
671                    <button class="glass-button" data-node-type="api">🌐 API</button>
672                    <button class="glass-button" data-node-type="end">⏹️ Fim</button>
673                    <button class="glass-button" id="saveFlowchart">💾 Salvar</button>
724                    <li>📝 <strong>Entrada:</strong> Coleta de dados ou informações.</li>
725                    <li>📤 <strong>Saída:</strong> Exibição ou entrega de resultados.</li>
726                    <li>🌐 <strong>API:</strong> Interação com serviços externos via API.</li>
727                    <li>⏹️ <strong>Fim:</strong> Ponto de saída do fluxograma.</li>
728                </ul>
944            newNode.subtype = 'Texto';
945            break;
946        case 'api':
947            newNode.icon = '🌐';
948            newNode.subtypes = ['GET', 'POST', 'PUT', 'DELETE'];
1042        const flowchartName = prompt('Nome do fluxograma para salvar:');
1043        if (flowchartName) {
1044            const response = await fetch('/api/save-flowchart', {
1045                method: 'POST',
1046                headers: { 'Content-Type': 'application/json' },
1055        const flowchartId = prompt('ID do fluxograma para carregar:');
1056        if (flowchartId) {
1057            const response = await fetch(`/api/load-flowchart?id=${flowchartId}`);
1058            const result = await response.json();
1059            if (result.success) {
1069
1070    document.getElementById('exportJson').addEventListener('click', async () => {
1071        const response = await fetch('/api/export-json', {
1072            method: 'POST',
1073            headers: { 'Content-Type': 'application/json' },
1099                    try {
1100                        const jsonData = JSON.parse(event.target.result);
1101                        const response = await fetch('/api/import-json', {
1102                            method: 'POST',
1103                            headers: { 'Content-Type': 'application/json' },
1124
1125    document.getElementById('convertToAI').addEventListener('click', async () => {
1126        const response = await fetch('/api/convert-to-ai', {
1127            method: 'POST',
1128            headers: { 'Content-Type': 'application/json' },
1180  const path = url.pathname;
1181
1182  // Roteamento da API
1183  if (path === '/api/save-flowchart' && req.method === 'POST') {
1184    return await saveFlowchart(req);
1185  }
1186  
1187  if (path === '/api/convert-to-ai' && req.method === 'POST') {
1188    return await convertToAI(req);
1189  }
1190  
1191  if (path === '/api/load-flowchart' && req.method === 'GET') {
1192    return await loadFlowchart(req);
1193  }
1194
1195  if (path === '/api/export-json' && req.method === 'POST') {
1196    return await exportJSON(req);
1197  }
1198
1199  if (path === '/api/import-json' && req.method === 'POST') {
1200    return await importJSON(req);
1201  }

47| **Decisão** | ❓ | Condições | Booleano, Comparação, Intervalo, Padrão |
48| **Entrada** | 📝 | Coletar dados | Texto, Número, Arquivo, Seleção |
49| **Saída** | 📤 | Exibir resultados | Exibir, Arquivo, Notificação, Resposta API |
50| **API** | 🌐 | Chamadas externas | REST API, GraphQL, Webhook, Database |
51| **Fim** | ⏹️ | Ponto de término | - |
52
120- `collect_user_input`: Coleta de entrada do usuário
121- `display_output`: Exibição de resultados
122- `make_api_call`: Chamadas para APIs
123- `database_operation`: Operações de banco de dados
124- `iterate`: Loops e iterações
196- **Runtime**: Deno (Val.town)
197- **Bibliotecas**: Nenhuma dependência externa
198- **APIs**: Web APIs padrão (DOM, Fetch, etc.)
199
200## 📞 Suporte

31    'input': 'user_input',
32    'output': 'system_output',
33    'api': 'api_call',
34    'database': 'data_operation',
35    'loop': 'iteration'
115          break;
116
117        case 'api':
118          step.action = "make_api_call";
119          step.parameters = {
120            url: node.url || "",
200    },
201    {
202      type: "api_error",
203      action: "log_and_continue",
204      fallback_step: "error_notification"

411                    <button class="glass-button" data-node-type="input">📝 Entrada</button>
412                    <button class="glass-button" data-node-type="output">📤 Saída</button>
413                    <button class="glass-button" data-node-type="api">🌐 API</button>
414                    <button class="glass-button" data-node-type="end">⏹️ Fim</button>
415                    <button class="glass-button" id="saveFlowchart">💾 Salvar</button>
464                    <li><strong>📝 Entrada:</strong> Coleta de dados ou informações.</li>
465                    <li><strong>📤 Saída:</strong> Exibição de resultados ou informações.</li>
466                    <li><strong>🌐 API:</strong> Chamada a uma API externa.</li>
467                    <li><strong>⏹️ Fim:</strong> O ponto final do seu fluxograma.</li>
468                </ul>
506                decision: { label: "Decisão", icon: "❓", color: "#FFC107", subtypes: ["Booleano", "Comparação", "Intervalo", "Padrão"] },
507                input: { label: "Entrada", icon: "📝", color: "#9C27B0", subtypes: ["Texto", "Número", "Arquivo", "Seleção"] },
508                output: { label: "Saída", icon: "📤", color: "#FF5722", subtypes: ["Exibir", "Arquivo", "Notificação", "Resposta API"] },
509                api: { label: "API", icon: "🌐", color: "#673AB7", subtypes: ["REST API", "GraphQL", "Webhook", "Database"] },
510                end: { label: "Fim", icon: "⏹️", color: "#F4436", subtypes: [] },
511            };

1// main.ts
2
3import { saveFlowchart, convertToAI, loadFlowchart, exportJSON, importJSON } from './api';
4import { getMainHTML } from './htmlTemplate';
5
8  const path = url.pathname;
9
10  // Roteamento da API
11  if (path === '/api/save-flowchart' && req.method === 'POST') {
12    return await saveFlowchart(req);
13  }
14  
15  if (path === '/api/convert-to-ai' && req.method === 'POST') {
16    return await convertToAI(req);
17  }
18  
19  if (path === '/api/load-flowchart' && req.method === 'GET') {
20    return await loadFlowchart(req);
21  }
22
23  if (path === '/api/export-json' && req.method === 'POST') {
24    return await exportJSON(req);
25  }
26
27  if (path === '/api/import-json' && req.method === 'POST') {
28    return await importJSON(req);
29  }

15- Arrastar e soltar componentes da paleta
16- Edição de nós com duplo-clique
17- Múltiplos tipos de nós: Início, Processo, Decisão, Entrada, Saída, API, Fim
18- Subtipos específicos para cada tipo de nó
19
63#### 📤 Saída
64- **Função**: Exibir resultados ou dados
65- **Subtipos**: Exibir, Arquivo, Notificação, Resposta API
66- **Uso**: Apresentação de resultados
67
68#### 🌐 API
69- **Função**: Chamadas para APIs externas
70- **Subtipos**: REST API, GraphQL, Webhook, Database
71- **Uso**: Integração com serviços externos
72
88[Início] → [Entrada: Nome do usuário] → [Processo: Validar nome] → [Decisão: Nome válido?]
89    ↓ (Sim)                                                           ↓ (Não)
90[API: Buscar dados] → [Saída: Exibir resultado] → [Fim]              [Saída: Erro] → [Fim]
91```
92
160### Tratamento de Erros
161- Retry automático para timeouts
162- Fallbacks para erros de API
163- Validação de entrada com retry
164
169- `collect_user_input`: Coleta de entrada
170- `display_output`: Exibição de saída
171- `make_api_call`: Chamadas de API
172- `database_operation`: Operações de banco
173- `iterate`: Loops e iterações