Artifact Node

The Artifact node is used to generate visual outputs, such as HTML pages, charts, and tables, in SkyStudio workflows. It processes incoming data and instructions with AI assistance and presents an interactive visual output to the user. It does not require an external service connection.

🎬 Click to watch the video →

Operations

The Artifact node provides 4 operations:

Operation	Category	Description
Generate HTML Page	Featured	Generates an AI-powered HTML page from a prompt and data
Generate Chart	Featured	Generates an AI-powered chart from a prompt and data
HTML from Template	Standard	Generates an HTML page by injecting data into a predefined template
Auto Chart from Data	Standard	Automatically converts JSON data into a chart

Generate HTML Page

Generates an AI-powered, customizable HTML page from a prompt and a JSON data source. It is used to create reports, dashboards, and dynamic content pages.

Parameters

Parameter	Required	Description
Prompt	Yes	Instruction describing how the page should look, such as `"Display sales data in a card layout"`
Data (JSON)	No	JSON-formatted data to display on the page
Style	No	General style preference, selected from the dropdown menu
CSS Framework	No	CSS framework to use, such as Tailwind or Bootstrap
System Prompt Override	No	Custom system instruction that overrides the AI’s default behavior

Usage Example

Prompt: "Display monthly sales figures as a professional report page with a title, summary cards, and a table"

Data (JSON):

{
  "month": "April 2024",
  "total_sales": 125000,
  "top_product": "Premium License",
  "deals": [
    {
      "name": "ABC Inc.",
      "amount": 45000
    },
    {
      "name": "XYZ Ltd.",
      "amount": 30000
    }
  ]
}

Example Output

When the workflow runs, an interactive HTML page is presented to the user. The page is rendered according to the selected style and CSS framework.

Generate Chart

Generates an AI-powered chart from a prompt and a JSON data source. It supports different chart types such as line, bar, and pie charts, and is used in data visualization scenarios such as sales analysis and performance tracking.

Parameters

Parameter	Required	Description
Prompt	Yes	Instruction describing how the chart should be generated
Data (JSON)	No	JSON-formatted data to use in the chart
Chart Type	No	Chart type selected from the dropdown menu, such as Bar, Line, or Pie
Chart Title	No	Title of the chart
Style	No	General style preference
System Prompt Override	No	Custom system instruction that overrides the AI’s default behavior

Usage Example

Prompt: "Show revenue for the last 6 months as a bar chart"

Chart Type: Bar

Chart Title: "2024 Monthly Revenue Performance"

Data (JSON):

[
  {
    "month": "January",
    "revenue": 85000
  },
  {
    "month": "February",
    "revenue": 92000
  },
  {
    "month": "March",
    "revenue": 110000
  },
  {
    "month": "April",
    "revenue": 125000
  }
]

HTML from Template

Generates a static HTML page by injecting JSON data into a predefined HTML template. It is ideal for producing deterministic and consistent outputs without using AI.

Parameters

Parameter	Required	Description
Template	Yes	HTML template containing data variables, such as placeholders like `{{name}}` or `{{amount}}`
Data (JSON)	No	JSON data to inject into the placeholders in the template
Style	No	General style preference
Language	No	Output language, selected from the dropdown menu

Usage Example

Template:

<h1>Welcome, {{firstname}}!</h1>
<p>Company: {{company}}</p>
<p>Offer Amount: {{amount}} TRY</p>

Data (JSON):

{
  "firstname": "Ahmet",
  "company": "Example Inc.",
  "amount": "15,000"
}

Auto Chart from Data

Analyzes JSON data, automatically selects the most suitable chart type, and visualizes it. It is used for quick data visualization without specifying a prompt or chart type.

Parameters

Parameter	Required	Description
Data (JSON)	Yes	JSON-formatted data to convert into a chart
Title optional	No	Title of the chart
Style	No	General style preference

Usage Example

Data (JSON):

[
  {
    "category": "Software",
    "sales": 45000
  },
  {
    "category": "Hardware",
    "sales": 30000
  },
  {
    "category": "Service",
    "sales": 20000
  }
]

Title: "Sales by Product Category"

The node automatically analyzes the data and selects the most suitable chart type, such as a pie chart or bar chart in this example.

Quick Start Examples

Example 1: Daily Sales Report Page

A workflow that converts deal data retrieved from HubSpot into an HTML report:

Schedule (Every morning at 08:00) → Get Deals (HubSpot) → Generate HTML Page

Generate HTML Page settings:

Prompt: "Group deals by stage, show the total amount, and list them in a colorful card layout"
Data (JSON): {{hubspot.results}}
CSS Framework: Tailwind

Example 2: Sales Performance Chart

A workflow that converts monthly revenue data retrieved from a database into a chart:

Schedule (Weekly) → Fetch Data → Generate Chart → Slack Message (chart link)

Generate Chart settings:

Prompt: "Show monthly revenue change and highlight the growth trend"
Chart Type: Line
Chart Title: "Monthly Revenue Trend"
Data (JSON): {{db.results}}

Example 3: Customer Offer Page

A workflow that generates a personalized offer HTML page from contact information:

Webhook → Get Contact (HubSpot) → HTML from Template

HTML from Template settings:

Template: Predefined offer HTML template with placeholders such as {{firstname}}, {{company}}, and {{amount}}
Data (JSON): {{hubspot.contact}}
Language: Turkish

Example 4: Instant Data Visualization

A chatbot that automatically converts raw JSON pasted by the user into a chart:

Text Input (JSON data) → Auto Chart from Data → Visual Output

Auto Chart from Data settings:

Data (JSON): {{input.text}}
Title: "Data Analysis"

Common Errors

Error	Possible Cause	Solution
Empty or broken HTML output	Data in the Data (JSON) field is not valid JSON	Convert the data to JSON format in a previous node; pay attention to `"` characters for valid JSON
Chart is not generated	No numeric field exists in the JSON data	Make sure the chart data contains numeric values
Template placeholders are not filled	Variable names in the template do not match field names in the JSON	Check that `{{firstname}}` exactly matches the `"firstname"` key in the JSON
Style is not applied	CSS Framework selection is left empty	Select an option from the CSS Framework dropdown menu

Notes

The Artifact node does not require any external service connection or special authentication step.
Since the Generate HTML Page and Generate Chart operations use AI, response time may increase with very large JSON data. Filter large datasets before sending them.
The HTML from Template operation does not use AI. Since it works through a fixed template, it produces deterministic and fast results.
The Auto Chart from Data operation automatically selects the chart type. If you want a specific chart type, use the Generate Chart operation instead and fill in the Chart Type field.
The output of all operations is rendered in SkyStudio’s Artifact viewing component and presented to the user interactively.

Operations

Generate HTML Page

Parameters​

Usage Example​

Example Output​

Generate Chart

Parameters​

Usage Example​

HTML from Template

Parameters​

Usage Example​

Auto Chart from Data

Parameters​

Usage Example​

Quick Start Examples

Example 1: Daily Sales Report Page​

Example 2: Sales Performance Chart​

Example 3: Customer Offer Page​

Example 4: Instant Data Visualization​

Common Errors

Notes

Parameters

Usage Example

Example Output

Parameters

Usage Example

Parameters

Usage Example

Parameters

Usage Example

Example 1: Daily Sales Report Page

Example 2: Sales Performance Chart

Example 3: Customer Offer Page

Example 4: Instant Data Visualization