Quick Start
Embed atypica.AI into your application and communicate with it using the postMessage API for bidirectional communication.
1. Embed the iframe
Use the impersonation login URL to automatically authenticate users. You can obtain the login URL from the Impersonation API endpoint.
<iframe id="atypica-iframe" src="https://atypica.ai/auth/impersonation-login?token=YOUR_TOKEN" width="100%" height="800px" frameborder="0" ></iframe>
2. Listen for messages
window.addEventListener("message", function (event) {
if (event.data.source !== "atypica") {
return; // Ignore non-atypica messages
}
console.log("Received message:", event.data);
// Handle message...
});3. Send messages
const iframe = document.getElementById("atypica-iframe");
iframe.contentWindow.postMessage(
{
target: "atypica",
type: "check_auth",
timestamp: new Date().toISOString(),
},
"*"
);Message Protocol
All messages use JSON format with the following base fields:
| Field | Type | Required | Description |
|---|---|---|---|
| source | string | Yes (responses) | Fixed value "atypica" |
| target | string | Yes (requests) | Fixed value "atypica" |
| type | string | Yes | Message type |
| timestamp | string | Yes | ISO 8601 timestamp |
Authentication
Check Authentication Status
Request authentication status from the embedded iframe:
Request
{
"target": "atypica",
"type": "check_auth",
"timestamp": "2024-01-01T12:00:00.000Z"
}Response
{
"source": "atypica",
"type": "auth_status",
"authenticated": true,
"user": {
"email": "user@example.com"
},
"timestamp": "2024-01-01T12:00:00.000Z"
}URL Change Notifications
The iframe automatically sends notifications when the URL changes:
{
"source": "atypica",
"type": "href",
"href": "https://atypica.ai/study/xxx",
"timestamp": "2024-01-01T12:00:00.000Z"
}Actions
Create Study Chat
Create a new research conversation and navigate to it:
Request
{
"target": "atypica",
"type": "action",
"action": "createStudyUserChat",
"args": {
"content": "Analyze Apple's latest financial report"
},
"timestamp": "2024-01-01T12:00:00.000Z"
}Response
{
"source": "atypica",
"type": "action_result",
"action": "createStudyUserChat",
"result": {
"token": "study-chat-token-123",
"id": "chat-id-456"
},
"timestamp": "2024-01-01T12:00:00.000Z"
}Fetch Analyst Reports
Retrieve analyst reports from the current study chat (only works on /study/[token] pages):
Request
{
"target": "atypica",
"type": "action",
"action": "fetchAnalystReportsOfStudyUserChat",
"timestamp": "2024-01-01T12:00:00.000Z"
}Response
{
"source": "atypica",
"type": "action_result",
"action": "fetchAnalystReportsOfStudyUserChat",
"result": [
{
"token": "report-token-1",
"onePageHtml": "<html>...</html>"
}
],
"timestamp": "2024-01-01T12:00:00.000Z"
}Error Responses
When an action fails, you'll receive an error response:
{
"source": "atypica",
"type": "action_error",
"action": "createStudyUserChat",
"error": "Content cannot be empty",
"timestamp": "2024-01-01T12:00:00.000Z"
}Complete Example
A complete workflow example demonstrating auto-login, creating a study, and fetching reports:
<!DOCTYPE html>
<html>
<head>
<title>atypica.AI Embed Example</title>
</head>
<body>
<iframe
id="atypica-iframe"
src="https://atypica.ai/auth/impersonation-login?token=YOUR_TOKEN"
width="100%"
height="800px"
></iframe>
<div id="results"></div>
<script>
const iframe = document.getElementById("atypica-iframe");
let currentUrl = "";
// Listen for messages
window.addEventListener("message", function (event) {
if (event.data.source !== "atypica") return;
console.log("Received:", event.data);
// Track URL changes
if (event.data.type === "href") {
currentUrl = event.data.href;
// Auto-create study when on home page
if (currentUrl.includes("musedam.cc/") &&
!currentUrl.includes("/study/")) {
createStudy();
}
// Fetch reports when on study page
if (currentUrl.includes("/study/")) {
setTimeout(fetchReports, 2000);
}
}
// Handle action results
if (event.data.type === "action_result") {
if (event.data.action === "fetchAnalystReportsOfStudyUserChat") {
displayReports(event.data.result);
}
}
});
function createStudy() {
iframe.contentWindow.postMessage({
target: "atypica",
type: "action",
action: "createStudyUserChat",
args: {
content: "Analyze Apple's latest earnings"
},
timestamp: new Date().toISOString()
}, "*");
}
function fetchReports() {
iframe.contentWindow.postMessage({
target: "atypica",
type: "action",
action: "fetchAnalystReportsOfStudyUserChat",
timestamp: new Date().toISOString()
}, "*");
}
function displayReports(reports) {
const results = document.getElementById("results");
results.innerHTML = `Found ${reports.length} reports`;
}
</script>
</body>
</html>Security
Important Security Considerations
- Always validate the message source domain
- Filter out non-atypica messages
- Use HTTPS in production environments
- Keep impersonation tokens secure
Domain Verification Example
window.addEventListener("message", function (event) {
// Verify origin domain
if (event.origin !== "https://your-trusted-domain.com") {
return;
}
// Verify message format
if (event.data.source !== "atypica") {
return;
}
// Process message...
});Troubleshooting
iframe fails to load
Verify the URL is correct and that the target page allows iframe embedding (check X-Frame-Options headers).
No response to messages
Ensure the iframe is fully loaded before sending messages. Use a delay or listen for the load event.
iframe.addEventListener("load", function() {
// iframe is ready, now send messages
sendMessage();
});Cross-origin issues
Always use the postMessage API for cross-origin communication. Do not attempt to directly access iframe content.
Action not working on wrong page
Some actions only work on specific routes. For example, fetchAnalystReportsOfStudyUserChat only works on /study/[token] pages. Check the URL using the href message type.