diff --git a/tools/spatialDraw/DrawingManager.js b/tools/spatialDraw/DrawingManager.js
index 2596ea8..e987984 100644
--- a/tools/spatialDraw/DrawingManager.js
+++ b/tools/spatialDraw/DrawingManager.js
@@ -334,6 +334,64 @@ class DrawingManager {
             this.setCursor(this.cursorMap['PROJECTION']);
         }
     }
+    
+    apiDrawLine(startPoint, endPoint, color) {
+        try {
+            this.setColor(color);
+            this.setTool(drawingManager.toolMap['LINE']);
+            console.log('TODO: support programmatically drawn lines')
+
+            this.tool.startDraw(this.drawingGroup, this.convertToVec3(startPoint), this.cursor.getNormal());
+            this.tool.moveDraw(this.drawingGroup, this.convertToVec3(endPoint), this.cursor.getNormal());
+            this.tool.endDraw();
+        } catch (e) {
+            console.warn(e);
+        }
+    }
+
+    convertToVec3(input) {
+        let x, y, z;
+
+        if (Array.isArray(input)) {
+            // Input format is an array [x, y, z]
+            [x, y, z] = input;
+        } else if (typeof input === 'string') {
+            // Input format is a string "(x, y, z)"
+            const match = input.match(/\(([^)]+)\)/);
+            if (match) {
+                [x, y, z] = match[1].split(',').map(Number);
+            } else {
+                throw new Error('Invalid string format');
+            }
+        } else if (typeof input === 'object' && input !== null) {
+            // Input format is an object {x, y, z}
+            if ('x' in input && 'y' in input && 'z' in input) {
+                x = input.x;
+                y = input.y;
+                z = input.z;
+            } else {
+                throw new Error('Object does not have x, y, and z properties');
+            }
+        } else {
+            throw new Error('Unsupported input type');
+        }
+
+        return new THREE.Vector3(x, y, z);
+    }
+
+    apiCountLines() {
+        return this.eventStack.length; // todo; this only counts lines from active session
+    }
+    
+    apiClearCanvas() {
+        // let numUndoEvents = this.eventStack.filter(item => item.type === 'erase').length;
+        // for (let i = 0; i < numUndoEvents; i++) {
+        //    
+        // }
+        while (this.eventStack.length > 0) {
+            drawingManager.popUndoEvent(); // todo; this only clears lines from active session
+        }
+    }
 }
 
 /* ========== Classes ========== */
diff --git a/tools/spatialDraw/index.html b/tools/spatialDraw/index.html
index 9b81195..405651f 100644
--- a/tools/spatialDraw/index.html
+++ b/tools/spatialDraw/index.html
@@ -7,6 +7,7 @@
     <script src="objectDefaultFiles/envelope.js"></script>
     <script src="objectDefaultFiles/pep.min.js"></script>
     <script src="objectDefaultFiles/gl-worker.js"></script>
+    <script src="objectDefaultFiles/SpatialApplicationAPI.js"></script>
 
     <style>
         @font-face {
diff --git a/tools/spatialDraw/index.js b/tools/spatialDraw/index.js
index 23944fd..65dc2af 100644
--- a/tools/spatialDraw/index.js
+++ b/tools/spatialDraw/index.js
@@ -41,6 +41,47 @@ if (!spatialInterface) {
     spatialInterface = new SpatialInterface();
 }
 
+function setupAPI() {
+    const api = new SpatialApplicationAPI('spatialDraw', spatialObject.object, spatialObject.frame);
+
+    api.defineAPI('addLine', [
+        {name: 'startPoint', type: 'Point', description: 'Start point of the line'},
+        {name: 'endPoint', type: 'Point', description: 'End point of the line'},
+        {name: 'color', type: 'String', description: 'Color of the line'}
+    ], {
+        type: 'boolean',
+        description: 'Draws a line on the canvas; returns success or error'
+    }, (startPoint, endPoint, color) => {
+        console.log('>> spatialDraw addLine', startPoint, endPoint, color);
+        drawingManager.apiDrawLine(startPoint, endPoint, color);
+        return true;
+    });
+
+    api.defineAPI('clearCanvas', [
+        // no parameters
+    ], {
+        type: 'boolean',
+        description: 'Erases all drawings, resetting the canvas to an empty state; returns success or error'
+    }, () => {
+        console.log('>> spatialDraw clearCanvas');
+        drawingManager.apiClearCanvas();
+        return true;
+    });
+    
+    api.defineAPI('countLines', [
+        // no parameters
+    ], {
+        type: 'number',
+        description: 'Returns the number of visible strokes that users have drawn onto the canvas'
+    }, () => {
+        console.log('>> spatialDraw countLines');
+        return drawingManager.apiCountLines();
+    });
+
+    api.sendAPIDefinitionsToParent();
+    api.listenForCalls();
+}
+
 spatialInterface.setMoveDelay(500);
 spatialInterface.useWebGlWorker();
 spatialInterface.setAlwaysFaceCamera(true);
@@ -211,9 +252,13 @@ function initDrawingApp() {
         nextCircle.classList.add('active'); // Activates
     });
     drawingManager.addCallback('color', (color) => {
-        sizeCircles.forEach(sizeCircle => sizeCircle.setColor(color));
-        colorCircles.forEach(colorCircle => colorCircle.classList.remove('active'));
-        colorCircles.find(circle => circle.dataset.color === color).classList.add('active');
+        try {
+            sizeCircles.forEach(sizeCircle => sizeCircle.setColor(color));
+            colorCircles.forEach(colorCircle => colorCircle.classList.remove('active'));
+            colorCircles.find(circle => circle.dataset.color === color).classList.add('active');
+        } catch (e) {
+            console.warn('cant update 2D UI to match the colors value');
+        }
     });
     drawingManager.addCallback('eraseMode', (eraseMode) => {
         if (eraseMode) {
@@ -335,6 +380,7 @@ function initRenderer() {
             groundPlaneContainerObj.add(directionalLight2);
 
             spatialInterface.onSpatialInterfaceLoaded(function() {
+                setupAPI();
                 spatialInterface.subscribeToMatrix();
                 spatialInterface.addGroundPlaneMatrixListener(groundPlaneCallback);
                 spatialInterface.addMatrixListener(updateMatrices); // whenever we receive new matrices from the editor, update the 3d scene