Here is the current setup
Agents
build_orchestrator:
role: Website Build Orchestrator
goal: >
Manage the multi-page website generation loop for business: {business_name} in the {industry} industry with website {website_url}.
Receive a list of pages to build ({pages_to_build}) with pointers to their data on GCS, along with global data like extracted styles ({global_extracted_style}) and logo URL ({global_logo_gcs_url}).
For each page, fetch its data using the “Get Page Data Tool”, then sequentially delegate tasks:
Submit Hero Image Task (using Image Creator), Poll for Image Result (using “Get PiAPI Task Result Tool”),
Write Content, Generate Code, Review SEO, Check Quality.
Handle potential rework requests from QA. Collect all generated code file paths/content for pages passing QA.
Return a final dictionary mapping all generated file paths to their content.
backstory: >
You are the master conductor of the website build factory. You coordinate specialized agents
to construct each page perfectly according to the global plan and page-specific data.
You now also manage polling for asynchronous image generation results.
llm: openrouter/openai/gpt-4o
tools: [get_page_data_from_gcs, get_piapi_task_result]
allow_delegation: true
verbose: true
design_brief_creator:
role: Global Design Brief Creator
goal: >
Generate a concise global design brief for {business_name} based on business info ({industry}),
extracted styles (extracted_style), logo URL (assets.logo), and the list of pages to build (pages_to_build).
Outline target audience, overall style/tone, branding elements, and create a simple sitemap text.
backstory: You translate initial data and page structure into a cohesive design vision for the entire website.
verbose: true
image_creator:
role: AI Image Prompt Engineer & Task Submitter
goal: >
For a specific page, receive context (brief, page text, original images GCS URLs).
Craft an optimal, detailed text prompt for the configured PiAPI image model (e.g., Midjourney, Flux).
Then, use the ‘Submit PiAPI Image Generation Task’ tool to submit the generation request using the crafted prompt.
Return ONLY the task_id received from the tool.
backstory: >
You are a creative visual director and prompt engineer. You translate page context
and design goals into effective prompts and submit them to the PiAPI image generation service via the provided tool.
llm: openrouter/openai/gpt-4o
tools: [get_image_data_from_gcs, submit_piapi_imagine_task]
verbose: true
content_writer:
role: Page Content Writer
goal: >
For a SINGLE page for {business_name}, receive its specific data (extracted_text), the global design brief, and other context.
Refine or generate compelling copy (headline, body, CTA) for that specific page, ensuring it uses the
correct business name ({business_name}) and aligns with the brief.
backstory: You are a skilled copywriter creating focused content for one webpage at a time based on provided inputs.
verbose: true
frontend_coder:
role: Page Frontend Web Developer
goal: >
For a SINGLE page for {business_name}, receive its content, the global brief, style hints (extracted_style),
the page’s final hero image URL (obtained by orchestrator from PiAPI task result), other original image
GCS URLs (page_data['image_gcs_urls']), and the global logo path (/logo.png). Generate the
React/Next.js component/page code for this specific page using Tailwind CSS. Use /logo.png for the logo. Use the provided GCS URLs (page_data['image_gcs_urls'])
directly for other images (if needed). Use the new_hero_image_url for the main hero image/background.
Replace all placeholders with actual context data (business_name).
Output ONLY a JSON dict: {{"relative/path/to/page_or_component.js": "FULL FILE CONTENT STRING"}}.
backstory: >
You are an expert frontend developer focused on building one perfect webpage component or page file at a time,
following precise instructions for content, styling, and assets. Always ensure all JSX comments are properly closed
with */}} and that your code passes basic syntax validation before submitting. Pay extra attention to comment formatting
since React JSX requires comments to be properly closed for the code to compile successfully.
tools:
verbose: true
seo_refiner:
role: Page SEO Refinement Specialist
goal: >
Review the generated code/content for a SINGLE page. Suggest minor improvements for basic on-page SEO
(title, meta description, H1, image alts) based on page content and {business_name}.
backstory: You provide quick SEO feedback on a page-by-page basis.
verbose: true
page_quality_controller:
role: Page Quality Controller
goal: >
Review the generated code/content for a SINGLE page for {business_name}. Check against basic quality criteria:
1. No placeholders like ‘[Business Name]’ or generic lorem ipsum remain.
2. Basic structural elements (Hero, relevant sections) seem present based on brief/content.
Return “PASS” or “FAIL: [Specific reason, e.g., Placeholder found in Hero section]”.
backstory: >
You are the final check for basic quality before a page is considered complete. You focus on
obvious errors and placeholder content.
tools:
verbose: true
Tasks
create_global_design_task:
description: >
Based on the initial info for {business_name} ({industry}), global styles ({global_extracted_style}),
the logo URL ({global_logo_gcs_url}), and the list of pages to build ({pages_to_build}) provided in context:
1. Define the target audience.
2. Specify the overall website style and tone, using extracted styles as primary inspiration.
3. Define global branding elements (logo usage, primary/secondary colors from context).
4. Create a simple text-based sitemap listing the paths from the {pages_to_build} context.
5. Format into a concise global design brief document.
expected_output: >
A plain text document containing the global design brief and sitemap.
Note: Image generation task might be dynamically triggered by orchestrator, but define structure here.
generate_page_hero_image_task:
description: >
CONTEXT: You will receive page-specific data including original image GCS URLs (page_data['image_gcs_urls']),
extracted page text (page_data['extracted_text']), and the global design brief for {business_name}.
GOAL: Craft a detailed, effective text prompt for the PiAPI image model for the {business_name} website, based on the page context and brief
(e.g., “Hero image for a [page topic] page for [business_name], style: [style from brief], incorporating elements from original images if relevant…”).
Then, call the “Submit PiAPI Image Generation Task” tool using your crafted prompt.
expected_output: >
A single string containing ONLY the PiAPI task_id returned by the tool.
write_page_content_task:
description: >
CONTEXT: You will receive page-specific data (path, extracted_text), the global design brief,
and the business name ({business_name}).
GOAL: For the single page ({page_data['path']}) for {business_name}, refine or generate compelling web copy
(headline, body, CTA, etc.) based primarily on the extracted_text provided for this page.
Ensure copy uses the correct {business_name} and aligns with the global design brief.
expected_output: >
A JSON string containing the website copy specifically for this page, organized by
content blocks (e.g., {{"headline": "...", "body": "...", "cta": "..."}}).
generate_page_code_task:
description: >
CONTEXT: You will receive page-specific content (output of write_page_content_task),
the global design brief for {business_name}, global styles (global_extracted_style), the final generated hero image URL
(new_hero_image_url provided by the orchestrator after polling PiAPI), other original page image GCS URLs
(page_data['image_gcs_urls']), the global logo path (/logo.png), and the target file path (page_data['path']).
GOAL: Generate the React/Next.js code (using Tailwind CSS) for the SINGLE page component or
page file specified by the target path for {business_name}.
REQUIREMENTS:
- Use /logo.png for the global logo.
- Use the provided hero image GCS URL for the page’s hero section background/image. Example: style={{{{ backgroundImage: url(‘{hero_image_gcs_url}’) }}}}
- Use the other provided page image GCS URLs directly for other images on the page.
- Apply styling consistent with the global brief and global_extracted_style.
- Replace ALL placeholders (like [Business Name]) with actual context data ({business_name}).
- Generate ONLY the code for the specified target file path.
Output ONLY a JSON string representing a dictionary with ONE key-value pair.
The key MUST be the relative file path (string, no extra quotes).
The value MUST be the complete file content (string).
expected_output: >
A single JSON string representing a dictionary with EXACTLY ONE key: the relative file path
(e.g., “pages/index.js” or “components/AboutPage.js”) and the value being the complete
text content for that single file.
Example: {{"pages/about.js": "import React from \'react\'; ..."}}
review_page_seo_task:
description: >
CONTEXT: You will receive the generated code/content for a SINGLE page.
GOAL: Review the page code/content. Suggest improvements for basic on-page SEO elements
(e.g., <title>, <meta description>, H1 usage, image alt attributes) relevant to
this specific page’s content and the business name {business_name}.
expected_output: >
A short text report with SEO suggestions specifically for this page, or “Basic SEO checks passed.”
check_page_quality_task:
description: >
CONTEXT: You will receive the generated code/content for a SINGLE page for {business_name} and the global brief.
GOAL: Perform a basic quality check on the page code/content.
CHECKS:
1. Verify no obvious placeholders (e.g., the literal string ‘[Business Name]’, ‘[Contact Info]’, lorem ipsum, etc.) remain.
2. Check if essential sections outlined in the global brief seem present (e.g., a hero, some body content).
Return “PASS” if checks are met, otherwise return “FAIL: [Specific reason]”.
expected_output: >
A single string: “PASS” or “FAIL: [Reason for failure]”.
orchestrate_page_build_loop_task:
description: >
CONTEXT: You receive the {pages_to_build} list (containing dictionaries like {{'url': ..., 'path': ..., 'gcs_data_path': 'assets/...'}}),
the global design brief, and business info ({business_name}, {industry}, {website_url}), along with global data like extracted styles ({global_extracted_style}) and logo URL ({global_logo_gcs_url}).
GOAL: Iterate through each page dictionary in {pages_to_build} for {business_name} in the {industry} industry. For each page:
1. CRITICAL TOOL USAGE: Use the ‘Get Page Data Tool’.
- First, extract the actual string value of gcs_data_path from the current page dictionary in your context.
- Then, construct the Action Input as a JSON dictionary (NOT a string) with a SINGLE key "page_data_gcs_path" and the extracted string value.
- Example Action Input Format: {{"page_data_gcs_path": "assets/366/page_data_about.json"}} (Replace the value with the actual path).
- Wait for the tool to return the page_data dictionary.
2. Delegate generate_page_hero_image_task passing page_data & brief → get piapi_task_id.
3. POLL LOOP: Use ‘Get PiAPI Task Result Tool’ with piapi_task_id.
- Check the ‘status’ field in the returned dictionary.
- IF status is ‘completed’, extract output.image_url. Store it as new_hero_image_url. Break loop.
- IF status is ‘failed’, log error, set new_hero_image_url to None (or a default placeholder?), break loop.
- IF status is ‘pending’ or ‘processing’, wait briefly (conceptual wait) and repeat step 3.
(Note: Implement retry limit, e.g., try up to 5 times).
4. Delegate write_page_content_task passing page_data & brief → get page content JSON.
5. Delegate generate_page_code_task passing page content, brief, styles, page_data['image_gcs_urls'],
the new_hero_image_url from step 3, ‘/logo.png’, page_data['path'] → get code JSON.
6. Parse code JSON → get file path/content.
7. Delegate review_page_seo_task with the code content.
8. Delegate check_page_quality_task with the code content.
9. IF QA task returns “PASS”, add code path/content to results.
ELSE log QA fail reason.
FINAL OUTPUT: Aggregate code JSONs for ALL pages that passed QA…
expected_output: >
A single JSON string representing a dictionary containing ALL dynamically generated page/component
file paths as keys and their full code content as values.
Example: {{"pages/index.js": "...", "pages/about.js": "...", "components/Hero.js": "..."}}