AIモデルGPT-4.1-mini及びAWS S3ホスティング
中級
これはContent Creation, Multimodal AI分野の自動化ワークフローで、13個のノードを含みます。主にHtml, AwsS3, PDFco Api, Agent, ChatTriggerなどのノードを使用。 AIモデルGPT-4.1-mini及びAWS S3ホスティング
前提条件
- •AWS Access Key と Secret
- •OpenAI API Key
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
"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": "AI エージェント",
"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": "構造化出力パーサー",
"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": "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": "チャットメッセージ受信時",
"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": "付箋",
"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": "付箋1",
"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": "付箋2",
"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": "付箋3",
"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": "付箋4",
"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": "付箋5",
"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
}
]
]
},
"AI Agent": {
"main": [
[
{
"node": "03cec18c-cb05-40d3-8a26-bf6cdc3c99c5",
"type": "main",
"index": 0
}
]
]
},
"OpenAI Chat Model": {
"ai_languageModel": [
[
{
"node": "AI Agent",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"Structured Output Parser": {
"ai_outputParser": [
[
{
"node": "AI Agent",
"type": "ai_outputParser",
"index": 0
}
]
]
},
"When chat message received": {
"main": [
[
{
"node": "AI Agent",
"type": "main",
"index": 0
}
]
]
}
}
}よくある質問
このワークフローの使い方は？
上記のJSON設定コードをコピーし、n8nインスタンスで新しいワークフローを作成して「JSONからインポート」を選択、設定を貼り付けて認証情報を必要に応じて変更してください。
このワークフローはどんな場面に適していますか？
中級 - コンテンツ作成, マルチモーダルAI
有料ですか？
このワークフローは完全無料です。ただし、ワークフローで使用するサードパーティサービス（OpenAI APIなど）は別途料金が発生する場合があります。
関連ワークフロー
AIツールノードとGPT-4、DALL-Eを使ったマルチエージェント書籍作成ワークフロー
GPT-4.1-mini、DALL-E、Google Drive、AWS S3を使ってAI（人工知能）による書籍生成
Set
Aws S3
Markdown
+
Set
Aws S3
Markdown
25 ノードTrung Tran
コンテンツ作成
Airtop、GPT-4 Mini、Gmailを使ってウェブサイトのUXとSEO品質を分析
Airtop、GPT-4 Mini、Gmailを使ってサイトのUXとSEO品質を分析
Set
Code
Html
+
Set
Code
Html
33 ノードLukaszB
コンテンツ作成
ブログ作成・エディタ
Google Sheetsに基づくブログライティング＆エディタ(GPT-4)
If
Code
Filter
+
If
Code
Filter
18 ノードRobert Breen
コンテンツ作成
GPTリアルタイム航空券優遇分析器：自動取得、評価、WordPress へ公開
GPT、Google 航班、WordPress を使用した航班特売分析ツール（天気データ付き）
Set
Html
Slack
+
Set
Html
Slack
19 ノードCheng Siong Chin
コンテンツ作成
顔なし恐怖ショートビデオを Replicate と OpenAI で制作
OpenAI TTS、Replicateビデオ生成、YouTubeアップロードを使って無顔のホラーショート動画を作成
If
Code
Wait
+
If
Code
Wait
50 ノードDeb Mukherjee
コンテンツ作成
Gemini AI、DeepSeek、GoAPIを使用してEC用の商品画像と動画を生成
Gemini AI、DeepSeek、GoAPIを使用してECサイト向けに製品画像と動画を生成する
If
Set
Html
+
If
Set
Html
50 ノードDhruv Dalsaniya
コンテンツ作成
