Style Guide

AgentPine provides complete control over the look and behavior of your in-app assistant widget. You can customize the design through CSS variables and define step-by-step instructions that the agent will follow. This guide explains how to configure both.

ℹ️

About this tutorial

This tutorial is for defined tasks and theme configuration in AgentPine. It covers how to set up the widget's appearance and define tasks that the agent will execute

🎨 Theme Configuration

--ap-primary-color string required

The background color of the widget.

Example: "#f4f2f3"

--ap-font-size-base string

Base font size for widget elements.

Example: "12px"

--ap-search-item-bg string

Background color for task/action items.

Example: "#ffffff"

--ap-search-item-text string

Text color used inside task items.

Example: "#333"

--ap-header-background string

Header background color.

Example: "#1c1c1e"

--ap-header-text-color string

Text color for header elements.

Example: "#ffffff"

--ap-logo-font-size-base string

Size of the brand logo font.

Example: "20px"

📦 Sample JSON For Theme

{
  "--ap-primary-color": "#f4f2f3",
  "--ap-font-size-base": "12px",
  "--ap-search-item-bg": "#ffffff",
  "--ap-search-item-text": "#333",
  "--ap-header-background": "#1c1c1e",
  "--ap-header-text-color": "#ffffff",
  "--ap-logo-font-size-base": "20px"
}

🧠 Task Configuration

id string required

Unique task identifier.

Example: "1"

task string required

Instruction the agent will execute.

Example: "task1"

label string required

Label shown in the assistant.

Example: "Example Task"

📦 Sample JSON For Action

[
  {
    "id": "1",
    "task": "task1",
    "label": "Example Task"
  }
]

🖼 Visual Example

✅ Summary

Customize widget appearance using CSS variables.
Use structured tasks to drive AI interactions.
Ensure consistency and clarity across styling and tasks.