Workspace
setPicked(e.target.value)}>
{accounts.map(a => {a} )}
Channel
setChannel(e.target.value)}>
{channels.map(ch => {ch} )}
Don't see the channel? Invite the Mikaka bot first, then refresh.
Send to {channel || "this channel"} when…
{[
["missed", "A call is missed and a callback is needed"],
["escalation", "Mikaka escalates a call to a human"],
["booking", "A new booking is made"],
["summary", "Daily 7 am call summary"],
].map(([k, l]) => (
setEvents(s => ({ ...s, [k]: !s[k] }))}/>
{l}
))}
)}
{step === 3 && (
{c.name} is live in {channel}.
)}
);
};
/* ====================================================================
FLOW 3 — Google Sheets (OAuth + spreadsheet picker + column mapping)
==================================================================== */
const SheetEvent = "call.ended";
const DEFAULT_COLUMNS = [
["Timestamp", "{{call.started_at}}"],
["From", "{{call.from}}"],
["Intent", "{{call.intent}}"],
["Outcome", "{{call.outcome}}"],
["Duration", "{{call.duration_s}}"],
["Summary", "{{call.summary}}"],
];
const GoogleSheetsSetup = ({ c, onClose }) => {
const toast = useToast();
const [step, setStep] = useState(0); // 0 review · 1 oauth · 2 pick sheet · 3 columns · 4 done
const [accounts, setAccounts] = useState([]);
const [picked, setPicked] = useState(null);
const [sheets, setSheets] = useState([]);
const [sheet, setSheet] = useState(null);
const [manualSheetId, setManualSheetId] = useState("");
const [manualSheetName, setManualSheetName] = useState("Mikaka Calls");
const [tab, setTab] = useState("Sheet1");
const [columns, setColumns] = useState(DEFAULT_COLUMNS);
const [trigger, setTrigger] = useState(SheetEvent);
const [busy, setBusy] = useState(false);
const begin = async () => {
setBusy(true); setStep(1);
try {
const r = await api.connections.oauthBegin("gsheets");
const nextAccounts = r.accounts || [];
setAccounts(nextAccounts); setPicked(nextAccounts[0]);
} catch (err) {
toast({ title: "Google authorization", body: err?.message || "Finish Google authorization, then paste the sheet ID here." });
setAccounts(["Google authorization pending"]);
setPicked("Google authorization pending");
}
try {
const ss = await api.connections.listSheets();
setSheets(ss); setSheet(ss[0]);
} catch {
setSheets([]); setSheet(null);
}
setBusy(false); setStep(2);
};
const finish = async () => {
setBusy(true);
const finalSheet = sheet || { id: manualSheetId.trim(), name: manualSheetName.trim() || "Google Sheet" };
try {
await api.connections.connect("gsheets", {
acct: `${picked || "Google"} -> ${finalSheet.name} · ${tab}`,
config: { trigger, sheetId: finalSheet.id, tab, columns: Object.fromEntries(columns) },
});
setStep(4);
toast({ title: "Google Sheets connected", body: `Appending to ${finalSheet.name} -> ${tab}` });
setTimeout(onClose, 800);
} catch (err) {
toast({ title: "Could not save Google Sheets", body: err?.message || "Please retry.", kind: "danger" });
} finally {
setBusy(false);
}
};
const updateCol = (i, idx, val) => {
setColumns(cols => cols.map((c, j) => j === i ? (idx === 0 ? [val, c[1]] : [c[0], val]) : c));
};
return (
Cancel Continue with Google setStep(0)}>Back setStep(3)} disabled={!sheet && !manualSheetId.trim()}>Next: map columns -> :
step === 3 ? <> setStep(2)}>Back {busy ? "Saving…" : "Save & connect"} :
step === 4 ? Done : null
}>
{step === 0 && (
<>
We'll request drive.file (so we only see the spreadsheet you pick) and spreadsheets to append rows.
Mikaka never reads the rest of your Drive.
Recommended: create a fresh sheet just for Mikaka. The first row will become headers; subsequent rows are call records.
)}
{step === 1 && }
{step === 2 && (
Google account
setPicked(e.target.value)}>
{accounts.map(a => {a} )}
Spreadsheet
{sheets.length > 0 ? sheets.map(s => (
{s.name}
{s.id} · updated {s.updated}{s.owner ? ` · ${s.owner}` : ""}
)) : (
)}
Tab
)}
{step === 3 && (
Append a row when…
setTrigger(e.target.value)}>
A call ends (recommended)
A booking is created
A call is escalated to a human
A payment is collected
Columns
{columns.map(([h, v], i) => (
setColumns(cs => cs.filter((_, j) => j !== i))}>
))}
setColumns(cs => [...cs, ["New column", "{{call.field}}"]])}>
Add column
)}
{step === 4 && (
Sheet is now logging calls.
)}
);
};
/* ====================================================================
FLOW 4 — M-Pesa (Daraja credentials)
==================================================================== */
const MpesaSetup = ({ c, onClose }) => {
const toast = useToast();
const [step, setStep] = useState(0); // 0 prereq · 1 type · 2 creds · 3 callbacks · 4 test · 5 done
const [type, setType] = useState("till"); // till | paybill
const [env, setEnv] = useState("sandbox");
const [shortcode, setShortcode] = useState("");
const [paybill, setPaybill] = useState("");
const [accountRef, setAccountRef] = useState("");
const [consumerKey, setConsumerKey] = useState("");
const [consumerSecret, setConsumerSecret] = useState("");
const [passkey, setPasskey] = useState("");
const [maxAmount, setMaxAmount] = useState(10000);
const [test, setTest] = useState(null);
const [busy, setBusy] = useState(false);
const callbackUrl = `https://api.mikaka.io/v1/webhooks/mpesa/${env}/acme-${type}-${shortcode || "____"}`;
const validationUrl = callbackUrl.replace("/mpesa/", "/mpesa-validation/");
const runTest = async () => {
setBusy(true);
try {
const r = await api.connections.testMpesa();
setTest(r);
} catch (err) {
setTest({ ok: false, msg: err?.message || "Could not verify platform rail" });
} finally {
setBusy(false);
}
};
const finish = async () => {
setBusy(true);
try {
await api.connections.connect("mpesa", {
acct: `${type === "till" ? "Till" : "Paybill"} ${shortcode || paybill} · ${env === "sandbox" ? "Sandbox" : "Production"}`,
health: "ok",
config: { type, env, shortcode, paybill, accountRef, maxAmount, callbackUrl, validationUrl },
});
setStep(5);
toast({ title: "M-Pesa connected", body: "STK push enabled for inbound calls." });
setTimeout(onClose, 800);
} catch (err) {
toast({ title: "Could not connect M-Pesa", body: err?.message || "Please retry.", kind: "danger" });
} finally {
setBusy(false);
}
};
const credsOk = consumerKey.length > 4 && consumerSecret.length > 4 && (type === "till" ? shortcode : paybill);
return (
Cancel setStep(1)}>I have a Daraja app → :
step === 1 ? <> setStep(0)}>Back setStep(2)}>Next → :
step === 2 ? <> setStep(1)}>Back setStep(3)} disabled={!credsOk}>Next: callbacks → :
step === 3 ? <> setStep(2)}>Back setStep(4)}>Next: test → :
step === 4 ? <> setStep(3)}>Back {busy ? "Saving..." : "Save & connect"} :
step === 5 ? Done : null
}>
{step === 0 && (
<>
Before you start
Sign in to developer.safaricom.co.ke with the same number that owns your Till / Paybill.
Create a new app, enable M-Pesa Express (STK push) and Customer to Business .
Copy the Consumer Key and Consumer Secret . For STK push you'll also need the Passkey (Daraja → My Apps → Lipa Na M-Pesa Online).
For production, you'll need to "Go Live" in the Daraja portal — sandbox lets you test end-to-end first.
Mikaka stores your secret encrypted with AWS KMS. We never log full secrets, only the last 4 chars.
)}
{step === 1 && (
<>
What will Mikaka collect on?
{[
["till", "Till Number (Buy Goods)", "Customer enters Till number on their phone. Best for retail / single product price."],
["paybill", "Paybill (Bill payment)", "Customer enters Paybill + an account reference. Best for invoices, deposits, deals where each customer has an account."],
].map(([k, t, d]) => (
setType(k)}>
{t}
{d}
))}
Environment:
setEnv("sandbox")}>Sandbox
setEnv("production")}>Production
{env === "sandbox" &&
· Use the Daraja sandbox phone 254708374149 to test. }
)}
{step === 2 && (
)}
{step === 3 && (
<>
Paste these into Daraja → My Apps → {type === "till" ? "Confirmation & Validation URLs (Buy Goods)" : "Register URLs"} . Both must be HTTPS and reachable from Safaricom's network — they already are; these are Mikaka-hosted.
Important
On production, Safaricom requires you to whitelist Mikaka's IPs. Send a request via the M-Pesa Business portal:
196.201.214.0/24 . We open a support ticket on your behalf if needed.
)}
{step === 4 && (
<>
We'll verify the Mikaka platform rail before saving your tenant payment setup. No money moves.
{busy ? "Testing…" : <> Run test}
{test && (
{test.ok ? "Platform rail OK" : "Platform rail not connected yet"}
{test.msg}
{test.ok &&
access_token={test.token} · expires {test.expires}
}
)}
)}
{step === 5 && (
M-Pesa is live.
Mikaka can now trigger STK push during calls (max KSh {maxAmount.toLocaleString()}/call).
)}
);
};
const CodeRow = ({ label, value }) => {
const [copied, setCopied] = useState(false);
const copy = () => { navigator.clipboard?.writeText(value); setCopied(true); setTimeout(() => setCopied(false), 1200); };
return (
{label}
{value}
{copied ? <> Copied : <> Copy}
);
};
/* ====================================================================
FLOW 5 — Airtel Money (similar to M-Pesa but simpler)
==================================================================== */
const AirtelSetup = ({ c, onClose }) => {
const toast = useToast();
const [step, setStep] = useState(0);
const [merchantId, setMerchantId] = useState("");
const [clientId, setClientId] = useState("");
const [clientSecret, setClientSecret] = useState("");
const [country, setCountry] = useState("KE");
const [busy, setBusy] = useState(false);
const finish = async () => {
setBusy(true);
try {
await api.connections.connect("airtel", {
acct: `Merchant ${merchantId} · ${country}`,
config: { merchantId, clientId, clientSecret, country },
credentials: { api_key: clientSecret },
});
setStep(2);
toast({ title: "Airtel Money connected" });
setTimeout(onClose, 700);
} catch (err) {
toast({ title: "Could not connect Airtel Money", body: err?.message || "Please retry.", kind: "danger" });
} finally {
setBusy(false);
}
};
return (
Cancel setStep(1)}>Continue → :
step === 1 ? <> setStep(0)}>Back {busy ? "Saving…" : "Save & connect"} :
Done
}>
{step === 0 && (
You'll need an approved Airtel Money merchant ID and OAuth credentials from
developers.airtel.africa . Approval typically takes 2–3 business days.
);
};
/* ====================================================================
FLOW 6 — Zapier (API key + workspace)
==================================================================== */
const ZapierSetup = ({ c, onClose }) => {
const toast = useToast();
const [key] = useState(() => "mk_live_" + Math.random().toString(36).slice(2, 12) + Math.random().toString(36).slice(2, 8));
const [revealed, setRevealed] = useState(false);
const [installed, setInstalled] = useState(false);
const [busy, setBusy] = useState(false);
const finish = async () => {
setBusy(true);
try {
await api.connections.connect("zapier", { acct: "Personal workspace", config: { key } });
toast({ title: "Zapier connected", body: "Mikaka triggers and actions are now available in Zapier." });
onClose();
} catch (err) {
toast({ title: "Could not connect Zapier", body: err?.message || "Please retry.", kind: "danger" });
} finally {
setBusy(false);
}
};
return (
Cancel {busy ? "Saving…" : "Done — I've installed the Zap"} }>
1. Copy your API key
setRevealed(r => !r)}>{revealed ? "Hide" : "Reveal"}
navigator.clipboard?.writeText(key)}> Copy
This key is shown once — store it in a password manager.
3. Pick a starter Zap (optional)
{["Add new caller to Mailchimp audience", "Create a Notion page for every booking", "Send Twilio SMS on missed call"].map(z => (
))}
);
};
/* ====================================================================
FLOW 7 — Webhooks (URL + signing secret + events + retry policy + test)
==================================================================== */
const WebhookSetup = ({ c, onClose }) => {
const toast = useToast();
const [url, setUrl] = useState("");
const [secret] = useState(() => "whsec_" + Math.random().toString(36).slice(2, 26));
const [events, setEvents] = useState({
"call.started": false, "call.ended": true, "call.transcript": false, "booking.created": true, "payment.collected": true, "callback.requested": true,
});
const [version, setVersion] = useState("2026-01");
const [retries, setRetries] = useState(5);
const [test, setTest] = useState(null);
const [busy, setBusy] = useState(false);
const runTest = async () => {
setBusy(true);
try {
const r = await api.connections.testWebhook(url, { secret, events, version, retries });
setTest(r);
} catch (err) {
setTest({ ok: false, code: "error", ms: 0, body: err?.message || "Webhook test failed" });
} finally {
setBusy(false);
}
};
const finish = async () => {
setBusy(true);
try {
await api.connections.connect("webhook", { acct: url, config: { url, secret, events, version, retries } });
toast({ title: "Webhook live", body: url });
onClose();
} catch (err) {
toast({ title: "Could not save webhook", body: err?.message || "Please retry.", kind: "danger" });
} finally {
setBusy(false);
}
};
const validUrl = /^https:\/\//i.test(url);
return (
Cancel {busy ? "Saving..." : "Save webhook"} }>
Events to deliver
{Object.entries(events).map(([k, v]) => (
setEvents(e => ({ ...e, [k]: !e[k] }))}/>
{k}
))}
API version
setVersion(e.target.value)}>
2026-01 2025-09 2025-04
Retries on 5xx / timeout
setRetries(+e.target.value)}>
None 3 (1m, 5m, 1h) 5 (exponential, up to 24h)
Send test event
{busy ? "Sending…" : <> Send}
{`POST ${url || ""}
content-type: application/json
x-mk-signature: t=1730384012,v1=…
x-mk-event-id: evt_test_01HQXY…
{"type":"call.ended","data":{"id":"call_test","duration_s":42,"outcome":"booked"}}`}
{test && (
{test.code} · {test.ms} ms · {test.body}
)}
);
};
/* ====================================================================
Manage drawer (right side) — when an existing connection is clicked.
==================================================================== */
const ManageDrawer = ({ id, onClose, onReconfigure }) => {
const store = MK_USE();
const toast = useToast();
const c = store.connections.find(x => x.id === id);
const [busy, setBusy] = useState(false);
if (!c) return null;
const disconnect = async () => {
if (!confirm(`Disconnect ${c.name}? Mikaka will stop syncing immediately.`)) return;
setBusy(true);
try {
await api.connections.disconnect(id);
toast({ title: `Disconnected from ${c.name}` });
onClose();
} catch (err) {
toast({ title: "Disconnect failed", body: err?.message || "Please retry.", kind: "danger" });
} finally {
setBusy(false);
}
};
const recentSyncs = [
{ t: "12s ago", ev: "call.ended → row appended", ok: true },
{ t: "4m ago", ev: "call.ended → row appended", ok: true },
{ t: "11m ago", ev: "booking.created → contact upserted", ok: true },
{ t: "32m ago", ev: "call.ended → 503 from upstream, retried", ok: false },
{ t: "1h ago", ev: "call.ended → row appended", ok: true },
];
return ReactDOM.createPortal(
e.stopPropagation()} style={{ width: 480 }}>
{HEALTH_CHIP[c.health || "ok"]}
{CAT_LABEL[c.category]}
{c.health === "warn" && (
Action needed
3 timeouts in the last 30 minutes from Daraja. Most likely cause: shortcode IP whitelist hasn't been updated.
View runbook .
Reconfigure
)}
Account
{[
["Connected as", c.acct || "—"],
["Last sync", c.lastSync || "—"],
["Events · 7d", (c.syncCount7d || 0).toLocaleString()],
...(c.config?.callbackUrl ? [["Callback URL", c.config.callbackUrl]] : []),
...(c.config?.channel ? [["Channel", c.config.channel]] : []),
...(c.config?.tab ? [["Tab", c.config.tab]] : []),
].map(([k, v], i, arr) => (
{k}
{v}
))}
{c.scopes && (
<>
Scopes granted
{c.scopes.map(s => {s} )}
)}
Recent activity
{recentSyncs.map((r, i) => (
))}
Reconfigure {
setBusy(true);
try {
await api.connections.refresh(id);
toast({ title: "Sync refreshed", body: c.name });
} catch (err) {
toast({ title: "Sync failed", body: err?.message || "Please retry.", kind: "danger" });
} finally {
setBusy(false);
}
}}>
{busy ? "Syncing..." : "Sync now"}
Disconnect
,
document.body
);
};
Object.assign(window, { TenantConnections });