import { Accordion, Alert, Badge, Box, Group, List, Stack, Text, ThemeIcon } from "@mantine/core";
import { IconAlertCircle, IconBulb, IconFileSpreadsheet, IconInfoCircle, IconRoute, IconWriting } from "@tabler/icons-react";
export default function AgentGuidanceBanner() {
return (
} title="Agent Setup Guide" mb="md" styles={{ message: { paddingTop: 4 } }}>
{/* ── Routing ────────────────────────────────────────────────────────── */}
}
>
How agent routing works
Every message goes to the Global Agent first. If a child agent scores above the threshold it takes over. Scoring is 100 points total:
50 pts — Embedding similarity between the user query and the agent's prompt text
30 pts — Token overlap between the query and agent name / category key
20 pts — Column-name overlap between the query and the agent's CSV headers
Tip: write your prompt to naturally describe what the agent handles — the richer the prompt text, the better the semantic match.
{/* ── Prompt writing ─────────────────────────────────────────────────── */}
}
>
How to write an agent prompt
The prompt is the system instruction sent to the AI for every message this agent handles. It must include these placeholders — they are filled in automatically at runtime:
Required placeholders:
{[
["{context}", "Retrieved data chunks relevant to the user's query"],
["{user_query}", "The user's actual message"],
["{user_name}", "The user's name (or 'Traveler' as default)"],
["{greeted}", "Whether the user has been greeted already (true/false)"],
["{links_from_excel}", "Source URLs found in the retrieved CSV rows"],
].map(([ph, desc]) => (
{ph}
{desc}
))}
} p="xs">
If any required placeholder is missing the system will raise a formatting error. Always include all five.
Good prompt structure:
Open with a clear description of what this agent specialises in — e.g. "You are a wine specialist for Vrutik Estate." This text is used for semantic matching.
Define personality and tone.
List banned phrases and formatting rules.
Specify the human-escalation contact block if needed.
End with the USER CONTEXT block containing all five placeholders.
{/* ── Category key ──────────────────────────────────────────────────── */}
}
>
Category key conventions
The category key identifies what this agent handles. Use lowercase, no spaces. It is used in routing score and data-service selection.
{[
["general", "blue"],
["accommodation", "green"],
["maps", "orange"],
["dining", "pink"],
["concierge", "teal"],
["sales", "grape"],
].map(([key, color]) => (
{key}
))}
These are examples — you can use any lowercase key that describes your agent's domain. The system picks the right data service automatically based on the CSV URL.
maps is special: its CSV URL is loaded by the MapsService (requires columns{" "}
Resort_Name
,{" "}
Source_Link
). All other categories use ExcelService and support any CSV structure.
{/* ── CSV / Data source ─────────────────────────────────────────────── */}
}
>
CSV / Excel data source format
Paste a publicly accessible CSV or Excel URL in the Data Source URL field. The system downloads, embeds, and caches it automatically.
General agents (accommodation, dining, sales, etc.)
Any column structure is supported — the first column is used as the row label.
Each row becomes one retrievable chunk. Include descriptive column names — they contribute to routing score.
URLs in cells are recognised and surfaced as source links in the response.
Recommended columns:{" "}
Name
,{" "}
Description
,{" "}
Price
,{" "}
Availability
,{" "}
Source_Link
Maps agent (special format required)
Required:{" "}
Resort_Name
,{" "}
Source_Link
Optional:{" "}
Content_Text
,{" "}
Category
,{" "}
Country
,{" "}
State_or_Location
Source_Link
{" "}
should be the Google Maps embed/share URL for that resort.
} p="xs">
Cache refreshes automatically when you save an agent with an updated URL. If the URL stays the same but the file content changes, save the agent again to force a reload — the server will re-download and re-embed the latest data on the next request.
);
}