Awesomate docs v0.27.0

Start here

Quickstart

Sign a person in on a web page and show them their records, kept current as they change. About ten minutes, on the Pro plan.

You'll make an app, add yourself to it, and build a one-file web page that signs you in by email and lists your account's jobs as they change.

You need a Pro or Embedded account, and Claude Code with the Awesomate MCP connected (it sets up the app for you). The page itself is plain HTML and JavaScript.

1. Make an app

Tell Claude Code what you're building:

Make an Awesomate app called "Quickstart" that runs on http://localhost:5173, invite only.

Claude uses awesomate_crm_apps and gives you back a publishable key starting pk_. It is not a secret: it goes in your page. The address must match where you serve the page exactly, port included.

2. Add yourself

Add me to the Quickstart app as staff.

Staff can read every kind until you set rules, which suits a first try. You can also add people on the app's page in the hub: Website, Apps, then your app, People.

3. Have something to read

The app client reads your account's kinds (its own tables), not its contact list. If you have none yet:

Define a job kind with a title and a status (open, booked or done), and add two test jobs.

4. The page

Save this as index.html:

<!doctype html>
<meta charset="utf-8">
<title>Quickstart</title>
<form id="signIn">
  <input id="email" type="email" placeholder="you@example.com" required>
  <button>Email me a link</button>
  <p id="note"></p>
</form>
<div id="signedIn" hidden>
  <p>Signed in as <span id="who"></span> <button id="signOut">Sign out</button></p>
  <ul id="jobs"></ul>
</div>
<script type="module" src="./app.js"></script>

And this as app.js, with your key:

import { createAppClient } from 'https://cdn.jsdelivr.net/npm/@awesomate/sdk@0.27.0/+esm';

const app = createAppClient({ publishableKey: 'pk_your_key_here' });
const $ = (id) => document.getElementById(id);
let stop = null;

// Show whoever is signed in: called on every sign-in and sign-out, including the email link.
function show(user) {
  stop?.();
  $('signIn').hidden = !!user;
  $('signedIn').hidden = !user;
  if (!user) return;
  $('who').textContent = user.email;
  // The whole list at first, then again whenever a job changes, from anywhere.
  stop = app.live('job', { orderBy: ['created_at', 'desc'] }, (rows) => {
    $('jobs').replaceChildren(...rows.map((job) => {
      const li = document.createElement('li');
      li.textContent = `${job.title} (${job.status})`;
      return li;
    }));
  });
}
app.auth.onChange(show);
show(await app.auth.user()); // someone already signed in on this device
app.auth.onSignInError((err) => { $('note').textContent = err.message; });

$('signIn').addEventListener('submit', async (e) => {
  e.preventDefault();
  const r = await app.auth.signInWithLink($('email').value, { redirectTo: location.href });
  $('note').textContent = r.message;
});
$('signOut').addEventListener('click', () => app.auth.signOut());

5. Try it

Serve the folder on the address you gave the app:

npx serve -l 5173 .

Open http://localhost:5173, enter your email, and click the link in the email you get. You're signed in and see your jobs. Ask Claude to change a job's status and watch the list update without a reload.

Next