A
Agentable
Get Started GitHub
Developer Quick Start

Get started in
under two minutes

Install the framework and embed a fully functional agent-native canvas in your application.

View prerequisites Read the README
PREREQUISITES

Requirements

  • Node.js 20 or higher
  • Modern browser (Chrome, Firefox, Safari, Edge)

Agentable is published on npm and works seamlessly in both browser and Node environments.

01

Install via npm

TERMINAL 
npm install agentable-canvas

The package includes the core canvas engine, panel system, and Lit web component.

02

Lit Embed (Primary Path)

The fastest way to get started is with the official Lit web component. Copy and paste the following HTML: 

<!DOCTYPE html>
<html>
<head>
  <script type="module" 
    src="https://moss-career-blueprint.pages.dev/embed/agentable-canvas.js">
  </script>
</head>
<body>
  <agentable-canvas 
    tenant="your-tenant-id"
    primary-color="#2563EB"
    welcome-message="Start collaborating with agents"
    canvas-mode="bounded">
  </agentable-canvas>
</body>
</html>
03

Live Demo Embed

Here's a working instance of the canvas using the quickstart-demo tenant:

This is a fully functional live embed powered by the production Agentable runtime.
04

React CanvasShell Snippet

import { CanvasShell } from 'agentable-canvas/react';

function App() {
  return (
    <CanvasShell 
      tenant="quickstart-demo"
      primaryColor="#2563EB"
      canvasMode="infinite" />
  );
}
05

Whiteboard Host Snippet

import { LazyWhiteboardShell } from 'agentable-canvas';

const whiteboard = new LazyWhiteboardShell({
  tenant: 'quickstart-demo',
  mode: 'bounded'
});

whiteboard.mount(document.getElementById('whiteboard-container'));
06

createCanvasHost with Panels + Adapter

import { createCanvasHost } from 'agentable-canvas';

const host = createCanvasHost({
  tenant: 'quickstart-demo',
  adapter: myDataAdapter,
  panels: ['static', 'schema-driven', 'agent-composed']
});

host.render(document.getElementById('canvas-root'));