AI Response Display

{ "edges": [ { "to": "5119d08c-5d14-43e1-b89c-010cb11abc30", "from": "ba0e8b3a-22ee-4054-873a-2884aacb3fc9", "toPort": "0", "fromPort": "0" }, { "to": "8dc228d4-7dd0-4003-a444-4a36be89edb1", "from": "0365fe8b-f2ec-4144-b7e5-d09cb88cd193", "toPort": "0", "fromPort": "0" }, { "to": "0158a19d-a67a-4723-84f0-90cf345e47e5", "from": "5119d08c-5d14-43e1-b89c-010cb11abc30", "toPort": "0", "fromPort": "0" }, { "to": "1615dd6e-0c15-46cc-872c-9d9cea8cbb9b", "from": "17649aeb-5fe6-4ef6-89b6-797b6a98d5a7", "toPort": "0", "fromPort": "0" }, { "to": "1e2846e8-2cd4-4b41-b208-5971b7c0dd56", "from": "8e0635fb-e651-4848-8491-07b8c0c58ed8", "toPort": "0", "fromPort": "0" }, { "to": "8dc228d4-7dd0-4003-a444-4a36be89edb1", "from": "a305499a-09d9-4636-bd66-9f0fdd9e230a", "toPort": "0", "fromPort": "ai_languageModel" }, { "to": "0365fe8b-f2ec-4144-b7e5-d09cb88cd193", "from": "3de0f267-dc22-4807-a9ef-32812e8f5ecd", "toPort": "0", "fromPort": "0" }, { "to": "28dac69d-44a9-4c52-8a06-efafc48c3e8d", "from": "8dc228d4-7dd0-4003-a444-4a36be89edb1", "toPort": "0", "fromPort": "0" }, { "to": "1a982773-b900-45cf-9bb9-6a6cccef8c2c", "from": "de85ae21-918d-48d4-8e29-62fc275bbc83", "toPort": "0", "fromPort": "0" }, { "to": "ba0e8b3a-22ee-4054-873a-2884aacb3fc9", "from": "1e2846e8-2cd4-4b41-b208-5971b7c0dd56", "toPort": "0", "fromPort": "0" }, { "to": "8e0635fb-e651-4848-8491-07b8c0c58ed8", "from": "1a982773-b900-45cf-9bb9-6a6cccef8c2c", "toPort": "0", "fromPort": "0" }, { "to": "3de0f267-dc22-4807-a9ef-32812e8f5ecd", "from": "3816f346-0b0b-40cf-9c15-63a1851b34b7", "toPort": "0", "fromPort": "0" }, { "to": "17649aeb-5fe6-4ef6-89b6-797b6a98d5a7", "from": "1492691c-98f1-46a3-8d27-3d7f067620dd", "toPort": "0", "fromPort": "0" }, { "to": "3816f346-0b0b-40cf-9c15-63a1851b34b7", "from": "16164596-fe99-4e3c-929a-414be89200da", "toPort": "0", "fromPort": "0" } ], "nodes": [ { "id": "1492691c-98f1-46a3-8d27-3d7f067620dd", "name": "When chat message received", "type": "trigger", "params": { "kind": "@n8n/n8n-nodes-langchain.chatTrigger", "options": { "responseMode": "responseNodes" } }, "position": [ 784, 64 ] }, { "id": "16164596-fe99-4e3c-929a-414be89200da", "name": "When Executed by Another Workflow", "type": "trigger", "params": { "kind": "n8n-nodes-base.executeWorkflowTrigger", "workflowInputs": { "values": [ { "name": "chatInput" }, { "name": "model" } ] } }, "position": [ 784, 576 ] }, { "id": "28dac69d-44a9-4c52-8a06-efafc48c3e8d", "name": "Code in JavaScript", "type": "code", "params": { "jsCode": "// Hole die Pricing-Daten vom Filter Node\nconst modelData = $('Filter').first().json;\nconst pricing = modelData.pricing;\n\n// Hole die Token-Usage vom LangChain Code Node\nconst tokenUsage = $json.tokenUsage;\n\n// Preise pro Token (von OpenRouter - sind bereits in Dollar pro Token)\nconst promptPrice = parseFloat(pricing.prompt); // z.B. 0.0000004\nconst completionPrice = parseFloat(pricing.completion); // z.B. 0.0000016\n\n// Berechne Kosten\nconst inputCost = tokenUsage.input_tokens * promptPrice;\nconst outputCost = tokenUsage.output_tokens * completionPrice;\nconst totalCost = inputCost + outputCost;\n\nreturn {\n // Original Output\n output: $json.output,\n \n // Token Usage\n tokenUsage: {\n input_tokens: tokenUsage.input_tokens,\n output_tokens: tokenUsage.output_tokens,\n total_tokens: tokenUsage.total_tokens\n },\n \n // Kosten in USD\n costs: {\n input_cost_usd: inputCost,\n output_cost_usd: outputCost,\n total_cost_usd: totalCost,\n // Formatiert für bessere Lesbarkeit\n total_cost_formatted: `$${totalCost.toFixed(8)}`\n },\n \n // Model Info\n model: {\n id: modelData.id,\n name: modelData.name,\n prompt_price_per_token: promptPrice,\n completion_price_per_token: completionPrice\n }\n};" }, "position": [ 2000, 576 ] }, { "id": "8dc228d4-7dd0-4003-a444-4a36be89edb1", "name": "LangChain Code", "type": "integration", "params": { "code": { "execute": { "code": "const { PromptTemplate } = require('@langchain/core/prompts');\n\n// Get the LLM from ai_languageModel input\nconst llm = await this.getInputConnectionData('ai_languageModel', 0);\n\n// Get the chat input\nconst chatInput = $('When Executed by Another Workflow').first().json.chatInput;\n\n// Variable for token data\nlet tokenUsage = null;\n\n// Callback handler for token tracking\nconst tokenCallback = {\n handleLLMEnd: async function(output, runId, parentId) {\n try {\n const generation = output.generations[0][0];\n const message = generation.message;\n if (message && message.usage_metadata) {\n tokenUsage = {\n input_tokens: message.usage_metadata.input_tokens,\n output_tokens: message.usage_metadata.output_tokens,\n total_tokens: message.usage_metadata.total_tokens\n };\n }\n } catch (e) {\n console.log('Token tracking error:', e);\n }\n }\n};\n\n// Create prompt and chain\nconst prompt = PromptTemplate.fromTemplate('{input}');\nconst chain = prompt.pipe(llm);\n\n// Invoke WITH callbacks (important: on invoke, not on the LLM!)\nconst response = await chain.invoke(\n { input: chatInput },\n { callbacks: [tokenCallback] }\n);\n\n// Return response with token data\nreturn [{\n json: {\n output: response.content,\n tokenUsage: tokenUsage\n }\n}];" } }, "inputs": { "input": [ { "type": "main", "required": true, "maxConnections": 1 }, { "type": "ai_languageModel", "required": true, "maxConnections": 1 } ] }, "outputs": { "output": [ { "type": "main" } ] }, "service": "code", "operation": "run", "__originalType": "@n8n/n8n-nodes-langchain.code" }, "position": [ 1680, 576 ] }, { "id": "0365fe8b-f2ec-4144-b7e5-d09cb88cd193", "name": "Filter", "type": "passthrough", "params": { "mode": "filter", "options": {}, "conditions": { "options": { "version": 2, "leftValue": "", "caseSensitive": true, "typeValidation": "strict" }, "combinator": "and", "conditions": [ { "id": "5e3a6f70-614e-4dda-bd44-f03d041dffba", "operator": { "type": "string", "operation": "equals" }, "leftValue": "={{ $json.id }}", "rightValue": "={{ $('When Executed by Another Workflow').item.json.model }}" } ] } }, "position": [ 1456, 576 ] }, { "id": "1e2846e8-2cd4-4b41-b208-5971b7c0dd56", "name": "Code in JavaScript1", "type": "code", "params": { "jsCode": "// Dropdown values must be { option: \"...\" } format (not name/value)\nconst dropdownValues = items\n .map(item => ({\n option: item.json.id,\n }))\n .sort((a, b) => a.option.localeCompare(b.option));\n\nconst formJson = [\n {\n fieldLabel: \"Select Model\",\n fieldType: \"dropdown\",\n fieldOptions: {\n values: dropdownValues,\n },\n requiredField: true,\n },\n {\n fieldLabel: \"Prompt\",\n fieldType: \"textarea\",\n placeholder: \"Enter your prompt/question\",\n requiredField: true,\n },\n];\n\n// Form Node expects a single item carrying the JSON\nreturn [{\n json: {\n formJson,\n // Pass templates through for resolution after form submit\n templates: items.map(i => i.json),\n }\n}];" }, "position": [ 1456, 288 ] }, { "id": "ba0e8b3a-22ee-4054-873a-2884aacb3fc9", "name": "Form", "type": "trigger", "params": { "kind": "n8n-nodes-base.form", "options": { "customCss": ":root {\n --font-family: 'Inter', system-ui, -apple-system, sans-serif;\n --font-weight-normal: 400;\n --font-weight-bold: 600;\n --font-size-body: 12px;\n --font-size-label: 14px;\n --font-size-input: 14px;\n --font-size-header: 20px;\n \n /* Dark Theme Colors */\n --color-background: #0f0f0f;\n --color-card-bg: #1a1a1a;\n --color-card-border: #2a2a2a;\n --color-card-shadow: rgba(0, 0, 0, 0.4);\n \n --color-header: #e5e5e5;\n --color-label: #888888;\n --color-input-border: #2a2a2a;\n --color-input-text: #e5e5e5;\n --color-input-bg: #141414;\n --color-focus-border: #2563eb;\n \n --color-submit-btn-bg: #2563eb;\n --color-submit-btn-text: #ffffff;\n --color-error: #ef4444;\n --color-required: #ef4444;\n \n --color-html-text: #888888;\n --color-html-link: #60a5fa;\n --color-link: #888888;\n \n --border-radius-card: 12px;\n --border-radius-input: 6px;\n --box-shadow-card: 0px 4px 16px 0px var(--color-card-shadow);\n --opacity-placeholder: 0.4;\n}\n\n/* Textarea & Select hover/focus */\ntextarea, select, input {\n background: var(--color-input-bg) !important;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\ntextarea:hover, select:hover, input:hover {\n border-color: #3a3a3a !important;\n}\n\ntextarea:focus, select:focus, input:focus {\n border-color: var(--color-focus-border) !important;\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3) !important;\n outline: none;\n}\n\n/* Select dropdown arrow */\nselect {\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8L1 3h10z'/%3E%3C/svg%3E\") !important;\n background-repeat: no-repeat !important;\n background-position: right 12px center !important;\n padding-right: 36px !important;\n cursor: pointer;\n}\n\n/* Submit Button hover */\nbutton[type=\"submit\"], .submit-btn {\n transition: background-color 0.15s ease, transform 0.1s ease;\n}\n\nbutton[type=\"submit\"]:hover, .submit-btn:hover {\n background: #3b82f6 !important;\n}\n\nbutton[type=\"submit\"]:active, .submit-btn:active {\n transform: scale(0.98);\n}" }, "defineForm": "json", "jsonOutput": "={{ $json.formJson }}" }, "position": [ 1680, 288 ] }, { "id": "0158a19d-a67a-4723-84f0-90cf345e47e5", "name": "Form1", "type": "trigger", "params": { "kind": "n8n-nodes-base.form", "operation": "completion", "respondWith": "showText", "responseText": "=\n\n\n \n \n AI Response Display\n \n\n\n

\n \n

\n {{ $json.model.id }}\n {{ $json.costs.total_cost_formatted }}\n

\n \n

▶Show details

Token Usage

\n Input\n {{ $json.tokenUsage.input_tokens }}\n

\n Output\n {{ $json.tokenUsage.output_tokens }}\n

\n Total\n {{ $json.tokenUsage.total_tokens }}\n

\n \n

Costs

\n Input\n ${{ $json.costs.input_cost_usd }}\n

\n Output\n ${{ $json.costs.output_cost_usd }}\n

\n Total\n ${{ $json.costs.total_cost_usd }}\n

\n \n

Model Pricing

\n Prompt (per token)\n ${{ $json.model.prompt_price_per_token }}\n

\n Completion (per token)\n ${{ $json.model.completion_price_per_token }}\n

\n Model Name\n {{ $json.model.name }}\n

\n\n" }, "position": [ 2128, 288 ] }, { "id": "8e0635fb-e651-4848-8491-07b8c0c58ed8", "name": "Split Out", "type": "passthrough", "params": { "mode": "splitOut", "field": "data", "options": {}, "fieldToSplitOut": "data" }, "position": [ 1232, 288 ] }, { "id": "3de0f267-dc22-4807-a9ef-32812e8f5ecd", "name": "Split Out1", "type": "passthrough", "params": { "mode": "splitOut", "field": "data", "options": {}, "fieldToSplitOut": "data" }, "position": [ 1232, 576 ] }, { "id": "1615dd6e-0c15-46cc-872c-9d9cea8cbb9b", "name": "Respond to Chat", "type": "integration", "params": { "message": "={{ $json.output }}\n\n---\n\n**{{ $json.model.id }}** · `{{ $json.costs.total_cost_formatted }}`\n\n**Tokens** · Input: {{ $json.tokenUsage.input_tokens }} · Output: {{ $json.tokenUsage.output_tokens }} · Total: **{{ $json.tokenUsage.total_tokens }}**\n\n**Costs** · Input: ${{ $json.costs.input_cost_usd.toFixed(7) }} · Output: ${{ $json.costs.output_cost_usd.toFixed(7) }} · Total: **{{ $json.costs.total_cost_formatted }}**\n\n*{{ $json.model.name }} · Prompt ${{ $json.model.prompt_price_per_token.toFixed(7) }}/tk · Completion ${{ $json.model.completion_price_per_token.toFixed(7) }}/tk*", "options": {}, "service": "chat", "operation": "run", "waitUserReply": false, "__originalType": "@n8n/n8n-nodes-langchain.chat" }, "position": [ 1232, 64 ] }, { "id": "de85ae21-918d-48d4-8e29-62fc275bbc83", "name": "On form submission", "type": "trigger", "params": { "kind": "n8n-nodes-base.formTrigger", "options": { "customCss": ":root {\n --font-family: 'Inter', system-ui, -apple-system, sans-serif;\n --font-weight-normal: 400;\n --font-weight-bold: 600;\n --font-size-body: 12px;\n --font-size-label: 14px;\n --font-size-input: 14px;\n --font-size-header: 20px;\n \n /* Dark Theme Colors */\n --color-background: #0f0f0f;\n --color-card-bg: #1a1a1a;\n --color-card-border: #2a2a2a;\n --color-card-shadow: rgba(0, 0, 0, 0.4);\n \n --color-header: #e5e5e5;\n --color-label: #888888;\n --color-input-border: #2a2a2a;\n --color-input-text: #e5e5e5;\n --color-input-bg: #141414;\n --color-focus-border: #2563eb;\n \n --color-submit-btn-bg: #2563eb;\n --color-submit-btn-text: #ffffff;\n --color-error: #ef4444;\n --color-required: #ef4444;\n \n --color-html-text: #888888;\n --color-html-link: #60a5fa;\n --color-link: #888888;\n \n --border-radius-card: 12px;\n --border-radius-input: 6px;\n --box-shadow-card: 0px 4px 16px 0px var(--color-card-shadow);\n --opacity-placeholder: 0.4;\n}\n\n/* Textarea & Select hover/focus */\ntextarea, select, input {\n background: var(--color-input-bg) !important;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\ntextarea:hover, select:hover, input:hover {\n border-color: #3a3a3a !important;\n}\n\ntextarea:focus, select:focus, input:focus {\n border-color: var(--color-focus-border) !important;\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3) !important;\n outline: none;\n}\n\n/* Select dropdown arrow */\nselect {\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8L1 3h10z'/%3E%3C/svg%3E\") !important;\n background-repeat: no-repeat !important;\n background-position: right 12px center !important;\n padding-right: 36px !important;\n cursor: pointer;\n}\n\n/* Submit Button hover */\nbutton[type=\"submit\"], .submit-btn {\n transition: background-color 0.15s ease, transform 0.1s ease;\n}\n\nbutton[type=\"submit\"]:hover, .submit-btn:hover {\n background: #3b82f6 !important;\n}\n\nbutton[type=\"submit\"]:active, .submit-btn:active {\n transform: scale(0.98);\n}", "buttonLabel": "Start" }, "formTitle": "LLM Token Cost Tracker", "formDescription": "🔍 Find out exactly what your AI requests cost.\n\n This tool lets you:\n • Choose from 350+ LLM models (GPT-4, Claude, Llama, etc.)\n • Enter any prompt and run it\n • See the exact token usage and cost breakdown\n\n Perfect for comparing model prices or tracking your AI spending" }, "position": [ 784, 288 ] }, { "id": "a305499a-09d9-4636-bd66-9f0fdd9e230a", "name": "OpenRouter", "type": "llm", "params": { "model": "={{ $('When Executed by Another Workflow').item.json.model }}", "options": {}, "provider": "openai" }, "position": [ 1680, 720 ] }, { "id": "5119d08c-5d14-43e1-b89c-010cb11abc30", "name": "Backend", "type": "passthrough", "params": { "mode": "noOp", "options": {}, "workflowId": { "__rl": true, "mode": "id", "value": "={{ $workflow.id }}", "cachedResultUrl": "/workflow/=%7B%7B%20$workflow.id%20%7D%7D" }, "workflowInputs": { "value": { "model": "={{ $json[\"Select Model\"] }}", "chatInput": "={{ $json.Prompt }}" }, "schema": [ { "id": "chatInput", "type": "string", "display": true, "removed": false, "required": false, "displayName": "chatInput", "defaultMatch": false, "canBeUsedToMatch": true }, { "id": "model", "type": "string", "display": true, "removed": false, "required": false, "displayName": "model", "defaultMatch": false, "canBeUsedToMatch": true } ], "mappingMode": "defineBelow", "matchingColumns": [], "attemptToConvertTypes": false, "convertFieldsToString": true } }, "position": [ 1904, 288 ] }, { "id": "17649aeb-5fe6-4ef6-89b6-797b6a98d5a7", "name": "Backend1", "type": "passthrough", "params": { "mode": "noOp", "options": {}, "workflowId": { "__rl": true, "mode": "id", "value": "={{ $workflow.id }}", "cachedResultUrl": "/workflow/=%7B%7B%20$workflow.id%20%7D%7D" }, "workflowInputs": { "value": { "model": "openai/gpt-4.1-mini", "chatInput": "={{ $json.chatInput }}" }, "schema": [ { "id": "chatInput", "type": "string", "display": true, "removed": false, "required": false, "displayName": "chatInput", "defaultMatch": false, "canBeUsedToMatch": true }, { "id": "model", "type": "string", "display": true, "removed": false, "required": false, "displayName": "model", "defaultMatch": false, "canBeUsedToMatch": true } ], "mappingMode": "defineBelow", "matchingColumns": [], "attemptToConvertTypes": false, "convertFieldsToString": true } }, "position": [ 1008, 64 ] }, { "id": "1a982773-b900-45cf-9bb9-6a6cccef8c2c", "name": "Get Openrouter models", "type": "http", "params": { "url": "https://openrouter.ai/api/v1/models", "options": {}, "sendHeaders": true, "authentication": "genericCredentialType", "genericAuthType": "httpBearerAuth" }, "position": [ 1008, 288 ] }, { "id": "3816f346-0b0b-40cf-9c15-63a1851b34b7", "name": "Get Openrouter models1", "type": "http", "params": { "url": "https://openrouter.ai/api/v1/models", "options": {}, "sendHeaders": true, "authentication": "genericCredentialType", "genericAuthType": "httpBearerAuth" }, "position": [ 1008, 576 ] } ] }

Compare LLM token costs across 350+ models with OpenRouter