Best Practices
Embedding an Agent
1. Ensure Responsiveness for Mobile Devices
1. Ensure Responsiveness for Mobile Devices
To guarantee optimal responsiveness and prevent the agent UI text from appearing too small on mobile devices, include the following meta tag within the This meta tag ensures proper scaling and a good user experience across various devices.
<head> section of your webpage:2. Control Embedded Agent UI Dimensions
2. Control Embedded Agent UI Dimensions
You can manage the size and position of the agent UI by passing parameters to its
style attribute. If necessary, you can also wrap the <mindset-agent> tag within a parent <div> container.Example:3. Customize Embedded Agent UI Appearance
3. Customize Embedded Agent UI Appearance
The You can also apply additional standard CSS parameters:
<mindset-agent> tag allows for customization of:- Agent UI Width
- Agent UI Height
- Agent UI Background Color (only visible for a few milliseconds while the UI loads)
4. Agent UI Responsiveness for Videos and Segments
4. Agent UI Responsiveness for Videos and Segments
The agent UI is designed to be responsive and will adjust content based on the viewer’s screen size. When video content is played, a “Segment” area allows users to navigate between video segments.The display of the segment area depends on screen width:
- Right of the video: If screen width is greater than 1056px
- Below the video: If screen width is less than 1056px
5. Sample Code for Single Page Applications
5. Sample Code for Single Page Applications
Below is a sample React component that embeds a Mindset AI agent:
6. Embedding an Agent in an IFRAME with Voice
6. Embedding an Agent in an IFRAME with Voice
If you embed the agent in an IFRAME, ensure the IFRAME has the
allow="microphone" attribute set so the voice-to-text feature works properly in Safari browser.Agent Access Control
- Agent Sessions
- Account Membership
Agent Access Granted by Agent Sessions
If you embed your agents and provision the knowledge context through the Agent Sessions mechanism and APIs, you have full control over agents’ access.Example: When you create an Agent Session:v8srU0hv88BeWBDcirSm for user user-x123456. The externalUserId is also passed to the embed agent SDK via the SDK Users auth API, so the Mindset AI system recognizes the user accordingly.Access Settings:In the Agent settings (Mindset AI admin), the Access tab offers two types:- Open access - all app users
- Restricted Access - only users with specified account membership
We recommend selecting restricted access (without assigning any accounts) because if the agent is restricted, only users who have been granted access through an agent session will be able to communicate with it.
Agent Creation Best Practices
1. Provide a Clear Purpose
When defining the agent’s purpose, be as specific as possible. A clear purpose guides the agent’s behavior and ensures it meets user expectations.Good Purpose
Specific and actionable:“Answer questions about our e-commerce platform, help with order tracking, and provide product recommendations”
Avoid
Vague purpose:“Help customers”
Why Agent Purpose Matters
The purpose field is critical because it defines the agent’s intended role and objectives. A well-defined purpose not only guides the agent’s behavior but also enables future analysis of its conversations to determine if it is achieving its intended outcomes.Characteristics of a Good Agent Purpose
- Specific: Clearly states what the agent should do
- Measurable: Enables evaluation of whether the agent is fulfilling its role
- Actionable: Describes tasks or goals the agent can realistically achieve
Examples of Good Agent Purposes
| Example Purpose | Why It’s Good |
|---|---|
| Answer questions about our e-commerce platform, help with order tracking, and provide product recommendations | Specific tasks and measurable outcomes for the agent |
| Assist users with technical troubleshooting and software issues for our SaaS platform | Clearly defines the scope (technical support) and the target audience (SaaS users) |
| Guide new employees through onboarding, explain company policies, and answer HR-related questions | Actionable, focused on onboarding and HR, with clear objectives |
| Help customers find the right insurance products, explain coverage options, and provide policy information | Outlines the agent’s role in product guidance and customer education |
| Support students with homework questions in math and science, and provide step-by-step explanations | Specifies subject areas and the type of help (step-by-step explanations) the agent should provide |
2. Define Personality Traits
Good Personality
Specific personality traits:“Professional yet approachable, uses positive language, shows empathy for customer concerns”
Avoid
Generic descriptions:“Nice and helpful”
Personality Examples
Friendly & Empathetic
Friendly & Empathetic
Use for: Learning, coaching, and onboarding use casesDescription: Warm, understanding, and supportiveExample Personality Field:
Professional & Knowledgeable
Professional & Knowledgeable
Use for: Professional writing or giving important responsesDescription: Confident and authoritativeExample Personality Field:
Insightful & Analytical
Insightful & Analytical
Use for: Problem solving, ideation, and research use casesDescription: Detail-oriented, analytical, and data-drivenExample Personality Field:
Strict & Precise
Strict & Precise
Use for: Important questions, guidelines, or procedures such as compliance or drafting formal documentsDescription: Firm, concise, and meticulousExample Personality Field:
Custom Personality
Custom Personality
Use for: Any specific use case requiring unique personality traitsDescription: Define the personality for this agentExample Personality Field:
3. Specify Clear Formatting Rules
Good Formatting
Detailed formatting instructions:“Use numbered lists for multi-step processes, bullet points for options, and bold text for important warnings”
Avoid
Vague formatting:“Be clear”
Formatting Examples
- Conversational
- Structured
- Storytelling
- Technical
4. Set Appropriate Policies
Define policies that the LLM can actually implement, not policies that require external actions.Good Policies
Specific boundaries the LLM can implement:“Never provide medical advice or health recommendations. Always direct users to consult healthcare professionals.”Content restrictions the LLM can follow:“Do not mention or compare with products from companies such as Google, Microsoft, or Amazon. Only discuss and provide information about our company’s (ACME Corp) solutions.”
Avoid
Requires external actions the LLM cannot perform:“Escalate complex issues to human agents”
Effective Policy Examples
| Category | Description | Example Policy |
|---|---|---|
| Content Restrictions | Restrict certain topics | ”Do not provide investment advice, tax guidance, or legal counsel. Direct users to qualified professionals for these topics.” |
| Content Restrictions | Limit scope to company products | ”Only discuss our company’s products and services. Do not make comparisons with or recommendations about competitor products.” |
| Response Guidelines | Require disclaimers | ”Always include a disclaimer when providing technical instructions: ‘Please backup your data before making any system changes.’” |
| Response Guidelines | Set boundaries on advice | ”Provide general guidance only. For account-specific issues, direct users to log into their account or contact support directly.” |
| Safety and Compliance | Prevent harmful content | ”Never provide instructions that could be used to harm systems, bypass security, or violate terms of service.” |
| Safety and Compliance | Maintain professional boundaries | ”Keep all conversations professional and on-topic. Do not engage in personal discussions unrelated to business needs.” |
| Information Handling | Protect sensitive information | ”Never ask for or process personal information like passwords, social security numbers, or payment details in conversations.” |
| Information Handling | Source attribution | ”When providing information from documentation, always reference the source and suggest users verify details in the latest official documentation.” |
Known Limitations
1. Single Agent Per Page
1. Single Agent Per Page
Our current implementation limits the number of agents per page to one. We are working to remove this limitation and will notify you as soon as it is lifted.
2. Supported Google Fonts
2. Supported Google Fonts
When using a Google font for customizing the agent UI, we do not support 100% of the Google fonts available in the official Google Fonts list.We support most of them, but to ensure the font you want to use is supported, please check our Supported Google Fonts list.
The font name to use in the fontFamily parameter must be the font name displayed in the Google fonts list.Example:3. Voice-to-Text with Firefox Browser
3. Voice-to-Text with Firefox Browser
The voice-to-text feature in the embedded agent UI is not supported yet in the Firefox browser.