Customising Agent Behavior

Fine-tune Agent's behaviour with clear guidelines that shape design, functionality, and user experience.

To add custom behaviours for the agent, go to Configuration from the sidebar, then click on the Agent tab to access the guidelines section.

Custom Instructions

Custom instructions tell your agent exactly how to handle specific tasks—think of it as giving your agent a rulebook to follow. This ensures it behaves just the way you want. For example:

Always use the gpt-4o-mini model for all OpenAI API calls in this app. Avoid older models like gpt-4o and make sure every completion uses model="gpt-4o-mini."

---

Add or Edit Guidelines

Set clear guidelines in the Agent Guidelines section to define how your agent should behave. This includes details about design style, key features, shapes, and typography. Here’s what each section means, along with examples to guide you:

---

Design Style

Defines the overall look and feel of the app. Choose a style that aligns with your goals.

• Minimalistic:

  • What it means: Clean lines, ample white space, and no unnecessary elements to keep things simple and professional.

  • Example Input:

    Design Style: Minimalistic with clean lines, white space, and intuitive navigation.  

• Playful:

  • What it means: Vibrant colors, rounded shapes, and a friendly, fun appearance.

  • Example Input:

    Design Style: Playful with vibrant colors and interactive elements for an engaging experience.  

• Corporate:

  • What it means: Neutral tones, sharp edges, and a formal, professional aesthetic.

  • Example Input:

    Design Style: Corporate with neutral colors and structured layouts.  

---

Key Features

Defines functionality your app should prioritize to enhance user experience.

• Responsiveness:

  • What it means: The app adapts seamlessly across all devices.

  • Example Input:

    Key Features: Ensure responsiveness for smooth use on mobile, tablet, and desktop devices.  

• Data Visualization:

  • What it means: Focus on charts, dashboards, and graphs for presenting data effectively.

  • Example Input:

    Key Features: Prioritize data visualization using interactive charts and tables.  

---

Shapes

Determines the geometry of buttons, cards, and other UI elements.

• Rounded Shapes:

  • What it means: Buttons and cards with rounded edges for a friendly, modern look.

  • Example Input:

    Shapes: Use rounded rectangles for buttons and cards to maintain a welcoming and approachable feel.  

• Sharp Edges:

  • What it means: Elements with straight, defined edges for a formal and sleek design.

  • Example Input:

    Shapes: Use sharp edges for a polished and professional appearance.  

---

Typography

Defines the fonts and text styles to ensure readability and alignment with the app’s tone.

• Sans-Serif Fonts:

  • What it means: Clean, modern fonts that are easy to read.

  • Example Input:

    Typography: Use sans-serif fonts with bold headers and clear hierarchy for readability.  

• Bold Headers:

  • What it means: Larger, prominent headers to organize content and emphasize key sections.

  • Example Input:

    Typography: Emphasize readability with bold headers and structured font sizes for hierarchy.  

---

Save Your Changes : Once you’ve added or edited the guidelines, click Apply Changes to save them.