Modelo de IA GPT-4.1-mini y Alojamiento en AWS S3
Intermedio
Este es unContent Creation, Multimodal AIflujo de automatización del dominio deautomatización que contiene 13 nodos.Utiliza principalmente nodos como Html, AwsS3, PDFco Api, Agent, ChatTrigger. Modelo de IA GPT-4.1-mini y Alojamiento en AWS S3
Requisitos previos
- •Access Key y Secret de AWS
- •Clave de API de OpenAI
Nodos utilizados (13)
Categoría
Vista previa del flujo de trabajo
Visualización de las conexiones entre nodos, con soporte para zoom y panorámica
Exportar flujo de trabajo
Copie la siguiente configuración JSON en n8n para importar y usar este flujo de trabajo
{
"meta": {
"instanceId": "f2cccea994332807dafc8a7ecb655b704a54e4bcb386ab27053ffee8f088aa7b",
"templateCredsSetupCompleted": true
},
"nodes": [
{
"id": "03cec18c-cb05-40d3-8a26-bf6cdc3c99c5",
"name": "HTML",
"type": "n8n-nodes-base.html",
"position": [
704,
-112
],
"parameters": {
"html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>{{ $json.output.companyName }} Case Study</title>\n <style>\n /* Import Manrope font */\n @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');\n \n /* CSS Variables for Interlinked Brand Colors */\n :root {\n /* Primary Colors */\n --primary-01: #FAFBFF;\n --primary-02: #004EEA;\n --primary-03: #001B35;\n --primary-04: #008DED;\n \n /* Grayscale Colors */\n --cloud: #EDEFF7;\n --smoke: #D3D6E0;\n --steel: #BCBFCC;\n --space: #9DA2B3;\n --graphite: #6E7180;\n --arsenic: #40424D;\n --phantom: #1E1E24;\n --black: #000000;\n }\n \n /* Reset and Base Styles */\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Manrope', sans-serif;\n background-color: var(--primary-01);\n color: var(--primary-03);\n line-height: 1.6;\n overflow-x: hidden;\n }\n \n /* Header Styles */\n header {\n background-color: var(--primary-03);\n padding: 2rem 0;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 27, 53, 0.1);\n }\n \n .header-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .logo {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n color: white;\n font-weight: 700;\n font-size: 1.5rem;\n }\n \n .logo-icon {\n width: 40px;\n height: 40px;\n position: relative;\n }\n \n .logo-icon::before,\n .logo-icon::after {\n content: '';\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n }\n \n .logo-icon::before {\n background-color: var(--primary-02);\n top: 0;\n left: 0;\n }\n \n .logo-icon::after {\n background-color: var(--primary-04);\n bottom: 0;\n right: 0;\n }\n \n /* Main Content */\n main {\n margin-top: 100px;\n min-height: calc(100vh - 100px);\n }\n \n /* Hero Section */\n .hero {\n background: linear-gradient(135deg, var(--primary-03) 0%, var(--primary-02) 100%);\n color: white;\n padding: 4rem 0;\n position: relative;\n overflow: hidden;\n }\n \n .hero::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -10%;\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, var(--primary-04) 0%, transparent 70%);\n opacity: 0.3;\n border-radius: 50%;\n }\n \n .hero-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n position: relative;\n z-index: 1;\n }\n \n .hero h1 {\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 1rem;\n animation: fadeInUp 0.8s ease-out;\n }\n \n .hero .tagline {\n font-size: 1.25rem;\n font-weight: 300;\n margin-bottom: 2rem;\n opacity: 0.9;\n animation: fadeInUp 0.8s ease-out 0.2s backwards;\n }\n \n .hero-meta {\n display: flex;\n gap: 2rem;\n flex-wrap: wrap;\n animation: fadeInUp 0.8s ease-out 0.4s backwards;\n }\n \n .meta-item {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n \n .meta-label {\n font-size: 0.875rem;\n opacity: 0.7;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n \n .meta-value {\n font-size: 1.125rem;\n font-weight: 600;\n }\n \n /* Section Styles */\n .section {\n padding: 4rem 0;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n }\n \n .section-title {\n font-size: 2.5rem;\n font-weight: 700;\n color: var(--primary-03);\n margin-bottom: 3rem;\n text-align: center;\n position: relative;\n }\n \n .section-title::after {\n content: '';\n position: absolute;\n bottom: -1rem;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: linear-gradient(90deg, var(--primary-02) 0%, var(--primary-04) 100%);\n border-radius: 2px;\n }\n \n /* Description Section */\n .description {\n background-color: var(--cloud);\n }\n \n .description-content {\n max-width: 800px;\n margin: 0 auto;\n text-align: center;\n font-size: 1.125rem;\n line-height: 1.8;\n color: var(--arsenic);\n }\n \n /* Phases Section */\n .phases {\n background-color: white;\n }\n \n .phases-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n }\n \n .phase-card {\n background: linear-gradient(135deg, var(--primary-01) 0%, white 100%);\n border-radius: 12px;\n padding: 2rem;\n box-shadow: 0 5px 20px rgba(0, 27, 53, 0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n \n .phase-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n background: linear-gradient(90deg, var(--primary-02) 0%, var(--primary-04) 100%);\n }\n \n .phase-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0, 27, 53, 0.15);\n }\n \n .phase-number {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n background-color: var(--primary-02);\n color: white;\n border-radius: 50%;\n font-weight: 700;\n margin-bottom: 1rem;\n }\n \n .phase-title {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary-03);\n margin-bottom: 1rem;\n }\n \n .phase-description {\n color: var(--graphite);\n margin-bottom: 1.5rem;\n }\n \n .phase-details {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n \n .detail-item {\n display: flex;\n gap: 0.5rem;\n padding: 0.5rem 0;\n border-bottom: 1px solid var(--cloud);\n }\n \n .detail-label {\n font-weight: 600;\n color: var(--primary-02);\n min-width: 100px;\n }\n \n .detail-value {\n color: var(--arsenic);\n flex: 1;\n }\n \n /* Timeline Section */\n .timeline {\n background-color: var(--cloud);\n }\n \n .timeline-container {\n position: relative;\n padding: 2rem 0;\n }\n \n .timeline-line {\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: var(--primary-02);\n transform: translateX(-50%);\n }\n \n .timeline-item {\n display: flex;\n align-items: center;\n margin-bottom: 3rem;\n position: relative;\n }\n \n .timeline-item:nth-child(even) {\n flex-direction: row-reverse;\n }\n \n .timeline-content {\n flex: 1;\n padding: 2rem;\n background-color: white;\n border-radius: 12px;\n box-shadow: 0 5px 20px rgba(0, 27, 53, 0.1);\n margin: 0 2rem;\n position: relative;\n }\n \n .timeline-dot {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n background-color: var(--primary-04);\n border: 4px solid white;\n border-radius: 50%;\n box-shadow: 0 0 0 4px var(--primary-02);\n z-index: 1;\n }\n \n .timeline-date {\n font-weight: 700;\n color: var(--primary-02);\n margin-bottom: 0.5rem;\n }\n \n .timeline-title {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--primary-03);\n margin-bottom: 0.5rem;\n }\n \n .timeline-description {\n color: var(--graphite);\n }\n \n /* Deliverables Section */\n .deliverables {\n background-color: white;\n }\n \n .deliverables-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n }\n \n .deliverable-card {\n background-color: var(--primary-01);\n border-radius: 12px;\n padding: 2rem;\n text-align: center;\n transition: transform 0.3s ease;\n border: 2px solid transparent;\n }\n \n .deliverable-card:hover {\n transform: translateY(-5px);\n border-color: var(--primary-02);\n }\n \n .deliverable-icon {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, var(--primary-02) 0%, var(--primary-04) 100%);\n border-radius: 12px;\n margin: 0 auto 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n }\n \n .deliverable-title {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--primary-03);\n margin-bottom: 1rem;\n }\n \n .deliverable-description {\n color: var(--graphite);\n }\n \n /* CTA Section */\n .cta-section {\n background: linear-gradient(135deg, var(--primary-02) 0%, var(--primary-04) 100%);\n color: white;\n padding: 4rem 0;\n text-align: center;\n }\n \n .cta-content h2 {\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 1rem;\n }\n \n .cta-content p {\n font-size: 1.25rem;\n margin-bottom: 2rem;\n opacity: 0.9;\n }\n \n .cta-button {\n display: inline-block;\n padding: 1rem 2.5rem;\n background-color: white;\n color: var(--primary-02);\n text-decoration: none;\n border-radius: 50px;\n font-weight: 600;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n \n .cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n }\n \n /* Footer */\n footer {\n background-color: var(--primary-03);\n color: white;\n padding: 2rem 0;\n text-align: center;\n }\n \n .footer-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n }\n \n /* Animations */\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n /* Responsive Design */\n @media (max-width: 768px) {\n .hero h1 {\n font-size: 2rem;\n }\n \n .section-title {\n font-size: 1.75rem;\n }\n \n .timeline-line {\n left: 20px;\n }\n \n .timeline-item,\n .timeline-item:nth-child(even) {\n flex-direction: column;\n padding-left: 40px;\n }\n \n .timeline-dot {\n left: 20px;\n }\n \n .timeline-content {\n margin: 0;\n }\n \n .phases-grid,\n .deliverables-grid {\n grid-template-columns: 1fr;\n }\n }\n </style>\n</head>\n<body>\n <!-- Header -->\n <header>\n <div class=\"header-content\">\n <a href=\"#\" class=\"logo\">\n <div class=\"logo-icon\"></div>\n <span>Your custom HTML here</span>\n </a>\n </div>\n </header>\n\n <!-- Main Content -->\n <main>\n <!-- Hero Section -->\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>{{ $json.output.companyName }} Case Study</h1>\n <p class=\"tagline\">Empowering Possibilities, Humanly AI-Ligned</p>\n <div class=\"hero-meta\">\n <div class=\"meta-item\">\n <span class=\"meta-label\">Industry</span>\n <span class=\"meta-value\">{{ $json.output.industry }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Duration</span>\n <span class=\"meta-value\">{{ $json.output.duration }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Investment</span>\n <span class=\"meta-value\">{{ $json.output.investment }}</span>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Description Section -->\n <section class=\"section description\">\n <div class=\"container\">\n <h2 class=\"section-title\">Overview</h2>\n <p class=\"description-content\">\n {{ $json.output.description }}\n </p>\n </div>\n </section>\n\n <!-- Phases Section -->\n <section class=\"section phases\">\n <div class=\"container\">\n <h2 class=\"section-title\">Implementation Phases</h2>\n <div class=\"phases-grid\">\n <div class=\"phase-card\">\n <div class=\"phase-number\">1</div>\n <h3 class=\"phase-title\">{{ $json.output.phases[0].title }}</h3>\n <p class=\"phase-description\">{{ $json.output.phases[0].description }}</p>\n <div class=\"phase-details\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Year:</span>\n <span class=\"detail-value\">{{ $json.output.phases[0].details[0].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Key Activity:</span>\n <span class=\"detail-value\">{{ $json.output.phases[0].details[1].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Milestone:</span>\n <span class=\"detail-value\">{{ $json.output.phases[0].details[2].value }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"phase-card\">\n <div class=\"phase-number\">2</div>\n <h3 class=\"phase-title\">{{ $json.output.phases[1].title }}</h3>\n <p class=\"phase-description\">{{ $json.output.phases[1].description }}</p>\n <div class=\"phase-details\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Year:</span>\n <span class=\"detail-value\">{{ $json.output.phases[1].details[0].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Key Activity:</span>\n <span class=\"detail-value\">{{ $json.output.phases[1].details[1].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Milestone:</span>\n <span class=\"detail-value\">{{ $json.output.phases[1].details[2].value }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"phase-card\">\n <div class=\"phase-number\">3</div>\n <h3 class=\"phase-title\">{{ $json.output.phases[2].title }}</h3>\n <p class=\"phase-description\">{{ $json.output.phases[2].description }}</p>\n <div class=\"phase-details\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Year:</span>\n <span class=\"detail-value\">{{ $json.output.phases[2].details[0].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Key Activity:</span>\n <span class=\"detail-value\">{{ $json.output.phases[2].details[1].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Milestone:</span>\n <span class=\"detail-value\">{{ $json.output.phases[2].details[2].value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Timeline Section -->\n <section class=\"section timeline\">\n <div class=\"container\">\n <h2 class=\"section-title\">Key Milestones</h2>\n <div class=\"timeline-container\">\n <div class=\"timeline-line\"></div>\n \n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-date\">{{ $json.output.timeline[0].duration }}</div>\n <h3 class=\"timeline-title\">{{ $json.output.timeline[0].title }}</h3>\n <p class=\"timeline-description\">{{ $json.output.timeline[0].description }}</p>\n </div>\n <div class=\"timeline-dot\"></div>\n </div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-date\">{{ $json.output.timeline[1].duration }}</div>\n <h3 class=\"timeline-title\">{{ $json.output.timeline[1].title }}</h3>\n <p class=\"timeline-description\">{{ $json.output.timeline[1].description }}</p>\n </div>\n <div class=\"timeline-dot\"></div>\n </div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-date\">{{ $json.output.timeline[2].duration }}</div>\n <h3 class=\"timeline-title\">{{ $json.output.timeline[2].title }}</h3>\n <p class=\"timeline-description\">{{ $json.output.timeline[2].description }}</p>\n </div>\n <div class=\"timeline-dot\"></div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Deliverables Section -->\n <section class=\"section deliverables\">\n <div class=\"container\">\n <h2 class=\"section-title\">Key Deliverables</h2>\n <div class=\"deliverables-grid\">\n <div class=\"deliverable-card\">\n <div class=\"deliverable-icon\">🔍</div>\n <h3 class=\"deliverable-title\">{{ $json.output.deliverables[0].title }}</h3>\n <p class=\"deliverable-description\">{{ $json.output.deliverables[0].description }}</p>\n </div>\n\n <div class=\"deliverable-card\">\n <div class=\"deliverable-icon\">📊</div>\n <h3 class=\"deliverable-title\">{{ $json.output.deliverables[1].title }}</h3>\n <p class=\"deliverable-description\">{{ $json.output.deliverables[1].description }}</p>\n </div>\n\n <div class=\"deliverable-card\">\n <div class=\"deliverable-icon\">📱</div>\n <h3 class=\"deliverable-title\">{{ $json.output.deliverables[2].title }}</h3>\n <p class=\"deliverable-description\">{{ $json.output.deliverables[2].description }}</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- CTA Section -->\n <section class=\"cta-section\">\n <div class=\"container\">\n <div class=\"cta-content\">\n <h2>Ready to Transform Your Business with AI?</h2>\n <p>Let Interlinked help you navigate the AI revolution with integrity and empathy.</p>\n <a href={{ $json.output.ctaLink }} class=\"cta-button\">Learn More About This Case</a>\n </div>\n </div>\n </section>\n </main>\n\n <!-- Footer -->\n <footer>\n <div class=\"footer-content\">\n <p>© Custom HTML. All rights reserved.</p>\n <p>Empowering Possibilities, Humanly AI-Ligned.</p>\n </div>\n </footer>\n\n <script>\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n // Add scroll animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -100px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n });\n }, observerOptions);\n\n // Observe elements for animation\n document.querySelectorAll('.phase-card, .timeline-item, .deliverable-card').forEach(el => {\n observer.observe(el);\n });\n </script>\n</body>\n</html>"
},
"typeVersion": 1.2
},
{
"id": "a03ad7bd-cbe9-40a5-9ce6-7faf5fa3e811",
"name": "Agentee de IA",
"type": "@n8n/n8n-nodes-langchain.agent",
"position": [
288,
-32
],
"parameters": {
"options": {
"systemMessage": "YOU are a researcher finding the outputs based on the connected JSON inputs, ensure a comprehensive understanding."
},
"hasOutputParser": true
},
"typeVersion": 2.1
},
{
"id": "b16ee4f2-91c2-4f17-8a9e-1a29fe644ad3",
"name": "Analizador de salida estructurada",
"type": "@n8n/n8n-nodes-langchain.outputParserStructured",
"position": [
560,
176
],
"parameters": {
"jsonSchemaExample": "{\n \"companyName\": \"[CLIENT_COMPANY_NAME]\",\n \"industry\": \"[CLIENT_INDUSTRY]\",\n \"duration\": \"[PROJECT_DURATION]\",\n \"investment\": \"[INVESTMENT_RANGE]\",\n \"description\": \"[CLIENT_DESCRIPTION_AND_CHALLENGES]\",\n \"phases\": [\n {\n \"number\": 1,\n \"title\": \"[PHASE_1_TITLE]\",\n \"description\": \"[PHASE_1_DESCRIPTION]\",\n \"details\": [\n {\n \"label\": \"Duration\",\n \"value\": \"[PHASE_1_DURATION]\"\n },\n {\n \"label\": \"Key Activities\",\n \"value\": \"[PHASE_1_ACTIVITIES]\"\n },\n {\n \"label\": \"Outcome\",\n \"value\": \"[PHASE_1_OUTCOME]\"\n }\n ]\n },\n {\n \"number\": 2,\n \"title\": \"[PHASE_2_TITLE]\",\n \"description\": \"[PHASE_2_DESCRIPTION]\",\n \"details\": [\n {\n \"label\": \"Duration\",\n \"value\": \"[PHASE_2_DURATION]\"\n },\n {\n \"label\": \"Key Activities\",\n \"value\": \"[PHASE_2_ACTIVITIES]\"\n },\n {\n \"label\": \"Outcome\",\n \"value\": \"[PHASE_2_OUTCOME]\"\n }\n ]\n },\n {\n \"number\": 3,\n \"title\": \"[PHASE_3_TITLE]\",\n \"description\": \"[PHASE_3_DESCRIPTION]\",\n \"details\": [\n {\n \"label\": \"Duration\",\n \"value\": \"[PHASE_3_DURATION]\"\n },\n {\n \"label\": \"Key Activities\",\n \"value\": \"[PHASE_3_ACTIVITIES]\"\n },\n {\n \"label\": \"Outcome\",\n \"value\": \"[PHASE_3_OUTCOME]\"\n }\n ]\n },\n {\n \"number\": 4,\n \"title\": \"[PHASE_4_TITLE]\",\n \"description\": \"[PHASE_4_DESCRIPTION]\",\n \"details\": [\n {\n \"label\": \"Duration\",\n \"value\": \"[PHASE_4_DURATION]\"\n },\n {\n \"label\": \"Key Activities\",\n \"value\": \"[PHASE_4_ACTIVITIES]\"\n },\n {\n \"label\": \"Outcome\",\n \"value\": \"[PHASE_4_OUTCOME]\"\n }\n ]\n }\n ],\n \"timeline\": [\n {\n \"title\": \"[TIMELINE_1_TITLE]\",\n \"duration\": \"[TIMELINE_1_DURATION]\",\n \"description\": \"[TIMELINE_1_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_2_TITLE]\",\n \"duration\": \"[TIMELINE_2_DURATION]\",\n \"description\": \"[TIMELINE_2_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_3_TITLE]\",\n \"duration\": \"[TIMELINE_3_DURATION]\",\n \"description\": \"[TIMELINE_3_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_4_TITLE]\",\n \"duration\": \"[TIMELINE_4_DURATION]\",\n \"description\": \"[TIMELINE_4_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_5_TITLE]\",\n \"duration\": \"[TIMELINE_5_DURATION]\",\n \"description\": \"[TIMELINE_5_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_6_TITLE]\",\n \"duration\": \"[TIMELINE_6_DURATION]\",\n \"description\": \"[TIMELINE_6_DESCRIPTION]\"\n }\n ],\n \"deliverables\": [\n {\n \"title\": \"[DELIVERABLE_1_TITLE]\",\n \"description\": \"[DELIVERABLE_1_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_2_TITLE]\",\n \"description\": \"[DELIVERABLE_2_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_3_TITLE]\",\n \"description\": \"[DELIVERABLE_3_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_4_TITLE]\",\n \"description\": \"[DELIVERABLE_4_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_5_TITLE]\",\n \"description\": \"[DELIVERABLE_5_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_6_TITLE]\",\n \"description\": \"[DELIVERABLE_6_DESCRIPTION]\"\n }\n ],\n \"ctaLink\": \"[CONSULTATION_BOOKING_LINK]\"\n}"
},
"typeVersion": 1.3
},
{
"id": "b52071e4-6c90-471c-bbec-5f00a5565c4e",
"name": "Modelo de chat OpenAI",
"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
"position": [
208,
176
],
"parameters": {
"model": {
"__rl": true,
"mode": "list",
"value": "gpt-4.1-mini"
},
"options": {}
},
"credentials": {
"openAiApi": {
"id": "K0Q1El3xRuLP2fKJ",
"name": "OpenAi account"
}
},
"typeVersion": 1.2
},
{
"id": "62bd86f5-824e-4cbd-b3f6-5403d11a43c5",
"name": "Cuando se recibe mensaje de chat",
"type": "@n8n/n8n-nodes-langchain.chatTrigger",
"position": [
64,
-96
],
"webhookId": "fac5efcd-d65f-4d4b-8ba8-ab989b12fe60",
"parameters": {
"options": {}
},
"typeVersion": 1.1
},
{
"id": "0c947c9a-8509-4fd4-b6f7-530bac41a46a",
"name": "Nota adhesiva",
"type": "n8n-nodes-base.stickyNote",
"position": [
656,
-320
],
"parameters": {
"color": 6,
"width": 208,
"height": 400,
"content": "## HTML Preset\nUses **JSON** prefill's to dynamically change and produce HTML docs. Perfect for document creation and internet posts."
},
"typeVersion": 1
},
{
"id": "469976df-2f3b-4148-bbc6-cb634d9cd7df",
"name": "Nota adhesiva1",
"type": "n8n-nodes-base.stickyNote",
"position": [
512,
128
],
"parameters": {
"color": 6,
"width": 176,
"height": 480,
"content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Changeable JSON\nThe **Structured Output** forces the AI model to complete based on your topic/input\n\n\"Ask an AI Model to create based on the HTML Blueprint\"\n"
},
"typeVersion": 1
},
{
"id": "9bb987ff-7009-4b8d-b409-ef54c7cc87ae",
"name": "Nota adhesiva2",
"type": "n8n-nodes-base.stickyNote",
"position": [
16,
-320
],
"parameters": {
"color": 6,
"width": 208,
"height": 384,
"content": "## Simple Input\nAllow for a small **(one word to one sentence)** input for dynamic connection to other flows.\n\nFeel free to connect to a schedule for regular reports/document.\n"
},
"typeVersion": 1
},
{
"id": "0240213a-e40c-479c-9a1c-abdd488aa6e3",
"name": "Nota adhesiva3",
"type": "n8n-nodes-base.stickyNote",
"position": [
960,
-400
],
"parameters": {
"color": 6,
"width": 192,
"height": 336,
"content": "## Community PDF Transfer\nUse's a community node to transform the HTML into pdf"
},
"typeVersion": 1
},
{
"id": "8ced81eb-5ac3-4579-b906-3c1b0726f722",
"name": "PDFco Api",
"type": "n8n-nodes-pdfco.PDFco Api",
"position": [
1008,
-240
],
"parameters": {
"html": "={{ $json.html }}",
"operation": "URL/HTML to PDF",
"convertType": "htmlToPDF",
"advancedOptions": {}
},
"credentials": {
"pdfcoApi": {
"id": "ksANA37HJ3h632cD",
"name": "PDF.co account"
}
},
"typeVersion": 1
},
{
"id": "3864ba3d-9d8c-4d8a-b82b-5336aa96afe5",
"name": "Nota adhesiva4",
"type": "n8n-nodes-base.stickyNote",
"position": [
960,
0
],
"parameters": {
"color": 6,
"width": 192,
"height": 368,
"content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Amazon Call\nInvoke a Amazon function to transform HTML to desired formats with greater control"
},
"typeVersion": 1
},
{
"id": "567f203c-5e6d-44c3-8910-49bbcadf1181",
"name": "AWS Upload",
"type": "n8n-nodes-base.awsS3",
"position": [
1008,
32
],
"parameters": {
"fileName": "={{ $('When chat message received').item.json.chatInput }}",
"operation": "upload",
"binaryData": false,
"bucketName": "interlinkedhtmlhosting",
"fileContent": "={{ $json.html }}",
"additionalFields": {}
},
"credentials": {
"aws": {
"id": "hZxUOC0YMeyBUXOn",
"name": "AWS account"
}
},
"typeVersion": 2
},
{
"id": "1ffd74fa-0bc4-4bba-876a-d60df2359693",
"name": "Nota adhesiva5",
"type": "n8n-nodes-base.stickyNote",
"position": [
-416,
-336
],
"parameters": {
"width": 352,
"height": 864,
"content": "# Read Me First!\n**This template generates HTML based on predefined JSON inputs**\n\nUse cases are many: You could use this to automate blog post in your chosen HTML structure or even serve clients a custom document via HTTP.\n\nThe real value of this workflow though, is in its inspirational spirit, imagine the documents and branding that could be quickly generated!!\n\n**How It Works**\n+ The chat trigger is designed to accomodate a small amount of text. The chat is a placeholder for another input of yours in which triggers the generation of the JSON output\n+ A LLM of your choice takes the input and comes up with the responses\n+ The output parser is the crux of this flow. The AI Agent is forced to output its response as a JSON in which can be dynamically changed meaning the HTML can be frequently iterated on.\n+ The HTML Preset is used as a static base for your document/blog. This JSON inputs are embedded within the code.\n+The community PDF transfer or AWS upload are entirely for visualisation. The HTML can be pushed and served via AWS or simply downloaded using PDFco\n\n**How to use**\n+ Simple type \"Google\" into the chat or connect your other triggers/outputs\n\n**Requirements**\n+ HTML Preset with interchangeable JSON inputs\n+ PDFco or AWS Account\n\n\n"
},
"typeVersion": 1
}
],
"pinData": {},
"connections": {
"03cec18c-cb05-40d3-8a26-bf6cdc3c99c5": {
"main": [
[
{
"node": "8ced81eb-5ac3-4579-b906-3c1b0726f722",
"type": "main",
"index": 0
},
{
"node": "567f203c-5e6d-44c3-8910-49bbcadf1181",
"type": "main",
"index": 0
}
]
]
},
"Agente de IA": {
"main": [
[
{
"node": "03cec18c-cb05-40d3-8a26-bf6cdc3c99c5",
"type": "main",
"index": 0
}
]
]
},
"OpenAI Chat Model": {
"ai_languageModel": [
[
{
"node": "Agente de IA",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"b16ee4f2-91c2-4f17-8a9e-1a29fe644ad3": {
"ai_outputParser": [
[
{
"node": "Agente de IA",
"type": "ai_outputParser",
"index": 0
}
]
]
},
"62bd86f5-824e-4cbd-b3f6-5403d11a43c5": {
"main": [
[
{
"node": "Agente de IA",
"type": "main",
"index": 0
}
]
]
}
}
}Preguntas frecuentes
¿Cómo usar este flujo de trabajo?
Copie el código de configuración JSON de arriba, cree un nuevo flujo de trabajo en su instancia de n8n y seleccione "Importar desde JSON", pegue la configuración y luego modifique la configuración de credenciales según sea necesario.
¿En qué escenarios es adecuado este flujo de trabajo?
Intermedio - Creación de contenido, IA Multimodal
¿Es de pago?
Este flujo de trabajo es completamente gratuito, puede importarlo y usarlo directamente. Sin embargo, tenga en cuenta que los servicios de terceros utilizados en el flujo de trabajo (como la API de OpenAI) pueden requerir un pago por su cuenta.
Flujos de trabajo relacionados recomendados
Flujo de trabajo de creación de libros con múltiples agentes usando AI Tool Node, GPT-4 y DALL-E
Usa GPT-4.1-mini, DALL-E, Google Drive y AWS S3 para crear libros generados por IA
Set
Aws S3
Markdown
+
Set
Aws S3
Markdown
25 NodosTrung Tran
Creación de contenido
Usar Airtop, GPT-4 Mini y Gmail para analizar la UX y la calidad SEO de un sitio web
Usar Airtop, GPT-4 Mini y Gmail para analizar la calidad UX y SEO del sitio web
Set
Code
Html
+
Set
Code
Html
33 NodosLukaszB
Creación de contenido
Escritor y editor de blogs
Editor de escritura y edición de blogs con memoria basada en Google Sheets (GPT-4)
If
Code
Filter
+
If
Code
Filter
18 NodosRobert Breen
Creación de contenido
Analizador de ofertas de vuelos en tiempo real con GPT-4o: extracción, evaluación y publicación automáticas en WordPress
Analizador de ofertas de vuelos con datos meteorológicos, utilizando GPT, Google Flights y WordPress
Set
Html
Slack
+
Set
Html
Slack
19 NodosCheng Siong Chin
Creación de contenido
Crear cortos de terror sin rostro usando Replicate y OpenAI
Crear cortometrajes de terror sin rostros con OpenAI TTS, generación de video de Replicate y subida a YouTube
If
Code
Wait
+
If
Code
Wait
50 NodosDeb Mukherjee
Creación de contenido
Generar imágenes y videos de productos para comercio electrónico utilizando Gemini AI, DeepSeek y GoAPI
Usar Gemini AI, DeepSeek y GoAPI para generar imágenes y videos de productos para comercio electrónico
If
Set
Html
+
If
Set
Html
50 NodosDhruv Dalsaniya
Creación de contenido
Información del flujo de trabajo
Nivel de dificultad
Intermedio
Número de nodos13
Categoría2
Tipos de nodos8
Descripción de la dificultad
Autor
Enlaces externos
Ver en n8n.io →
Compartir este flujo de trabajo