Skip to content
Trimble SketchUp

Build with Claude Code

This is the fastest way to build a JSA extension. You’ll clone a starter repo that’s packed with context about the API, then ask Claude to build something custom for you. No web development experience required.

What you’ll need

Section titled “What you’ll need”

Step 1: Clone the starter repo

Section titled “Step 1: Clone the starter repo”

Open a terminal and run:

Terminal window
git clone https://github.com/SketchUp/sketchup-js-api-tutorials.git
cd sketchup-js-api-tutorials

This repo contains:

  • agent/ — Detailed API reference and recipes, optimized for AI consumption
  • examples/ — Working extension examples you can install right now
  • css/ — Stylesheet that gives your extension a native SketchUp look

Step 2: Open it in Claude Code

Section titled “Step 2: Open it in Claude Code”

Launch Claude Code in the repo directory:

Terminal window
claude

Claude will automatically pick up the context from the agent/ folder, which contains everything it needs to know about the JSA API, the manifest format, and common patterns.

Step 3: Ask Claude to build your extension

Section titled “Step 3: Ask Claude to build your extension”

Here’s where it gets fun. Ask Claude to build something specific. For example:

“Build me an extension that counts all the faces, edges, and component instances in my model, and displays the results in a floating panel.”

Or get creative:

“Build an extension that generates a random city block — a grid of boxes with random heights, like a skyline.”

“Build an extension that finds all faces without a material applied and colors them bright red so I can spot them easily.”

Claude will create the manifest, the JavaScript (or HTML), and package it all into a zip file you can install.

Step 4: Install your extension

Section titled “Step 4: Install your extension”
  1. Open the SketchUp for Web JSA Server and create or open a model
  2. Go to File → Extensions → Extension Manager
  3. Drag your .zip file onto the upload area
  4. Your extension appears in the Extensions menu — click it to run!

Step 5: Iterate

Section titled “Step 5: Iterate”

Don’t like something? Just tell Claude:

“Make the panel wider and add a button that exports the count to the console.”

“Change it so it only counts entities in the current selection, not the whole model.”

Each time, Claude will update the code and re-zip it. Drag the new zip into Extension Manager to replace the old version.

Tips

Section titled “Tips”
  • Be specific about what you want. “Build something cool” is harder for the AI than “Build a panel that lists all materials and their colors.”
  • Start simple, then ask for more features. It’s easier to iterate than to get a complex extension right on the first try.
  • Look at the examples in the examples/ folder if you want to see what a working extension looks like before you start. You can even install them directly — each folder has a .zip ready to go.
  • Check the recipes in agent/JSA_RECIPES.md if you’re curious what the API can do. It’s written for AI consumption but perfectly readable by humans too.

What’s next?

Section titled “What’s next?”
  • Browse the Examples to see code snippets for specific API features
  • Read about the Manifest format to understand what’s in that JSON file Claude generated
  • Check out the Capabilities page to see what’s supported today