Build a 2D Robot Arm with Claude AI

Use Claude Artifacts to build an interactive 2D robot arm simulator in your browser.

Introduction

30 Second Summary

Robot arms are everywhere. From factory floors to surgical suites, understanding how they move is a core skill in robotics engineering.

In this project, you will build a fully interactive 2D robot arm simulator through conversation with Claude, Anthropic's AI assistant. Everything runs directly in your browser with no local installation required.

What You'll Build

A multi-joint robot arm simulator rendered on an HTML5 Canvas that responds to mouse clicks using inverse kinematics and lets you manipulate joint angles with sliders, all running live inside Claude's Artifacts preview.

By the end of this project, you'll have:

A Claude account configured and verified for coding work with Artifacts.
An interactive robot arm simulator with forward kinematics (joint angles to position) and inverse kinematics (click a target, arm reaches it).
A repeatable prompting workflow for building and refining code with AI that you can apply to any future project.
Secret Mission: Add path tracing and workspace boundary visualization to create a visually impressive demo.

Do I need to know JavaScript?

You do not need any JavaScript experience. If you understand basic programming concepts like variables, functions, and loops in any language, you are ready to go. Claude writes all the JavaScript code for you.

Before We Start

Before We Start...

Set Up Your Claude Account

To build our robot arm simulator, you need a coding partner that can generate and preview interactive code instantly. That's exactly what Claude does with its Artifacts feature.

In this step, you will create a free Claude account and confirm that Artifacts are working. Once verified, you will be ready to start building the simulator through conversation.

In this step, get ready to:

Create a free Claude account and explore the interface.
Locate the Artifacts feature and understand what it does.
Verify Artifacts work by generating a test animation.

Sign up at claude.ai

Claude is an AI assistant made by Anthropic. Its free plan includes everything you need for this project: chat, Artifacts, extended thinking, code execution, web search, and memory.

In your browser, navigate to claude.ai.
Click Sign up (or Try Claude if you see that instead).
Create an account using your email address, or sign in with Google.
Check your inbox and verify your email if prompted.
Once verified, you will land on the main chat interface.

What is the Claude free plan?

Claude's free plan costs $0 and includes chat, Artifacts, extended thinking, code execution, web search, and memory across conversations.

There are daily usage limits on the free plan, but building a single interactive artifact in one conversation sits comfortably within them.

Explore the interface

Before building anything, take a moment to orient yourself in the Claude interface. It is similar to ChatGPT but has a few key differences.

Find the chat input at the bottom of the screen. This is where you type prompts to Claude.
Look in the left sidebar for the Artifacts tab. This is where interactive creations live.
Notice the model indicator near the chat input. You are using Claude Sonnet 4.6 on the free plan.

What are Artifacts?

Artifacts are interactive apps that emerge from your conversations with Claude. They let you generate material like code, documents, and apps directly from a chat.

When Claude generates an Artifact, a live preview panel appears on the right side of your screen. You can interact with it immediately without downloading or installing anything.

Verify Artifacts are working

The best way to confirm your setup is correct is to ask Claude to create a quick interactive Artifact. You will generate a simple animation, verify the preview works, then clean up.

Click in the chat input and paste the following prompt:

Create a simple interactive artifact that shows a bouncing ball on an HTML5 canvas

Press Enter to send the prompt.
Wait for Claude to generate the code. A live preview panel should appear on the right side of your screen.
Confirm you can see an animated ball bouncing inside the preview panel.

What should I see?

Claude will write code in the chat and simultaneously display a live Artifact preview to the right. Inside the preview, a ball should be bouncing around a canvas area.

If you see the preview panel with the animation running, Artifacts are working correctly on your account.

Don't see a preview panel?

Make sure you are on claude.ai (not the API docs or a different Anthropic page). The Artifact preview only appears in the main chat interface.

Try refreshing the page and sending the prompt again. If the issue persists, check that your browser is up to date (Chrome, Edge, or Firefox recommended).

help me troubleshoot why I'm not seeing an Artifact preview panel when I ask Claude to create an interactive HTML5 canvas animation

Now delete this test conversation to keep your sidebar clean. Hover over the conversation in the sidebar and look for a delete or remove option.

Keep your sidebar organized

Each new prompt in this project will go in a fresh conversation. Deleting test chats now prevents clutter later when you are iterating on your robot arm.

Your Claude account is ready and Artifacts are confirmed working. Next up, you will write your first structured prompt and watch Claude build a robot arm with forward kinematics in real time.

Build the Base Robot Arm with Forward Kinematics

Your Claude account is ready and you have confirmed that Artifacts work. Now it is time to build something real.

In this step, you will use a structured prompt to get Claude to generate an interactive robot arm simulator. The arm uses forward kinematics to calculate where the tip of the arm ends up based on the angles of its joints.

In this step, get ready to:

Write a structured prompt that tells Claude exactly what to build.
Review and understand the forward kinematics code Claude generates.
Add slider controls for real-time joint manipulation.

Start a new conversation with a structured prompt

The quality of what Claude builds depends entirely on how clearly you describe what you want. Vague prompts produce vague results. Structured prompts that specify the technology, the requirements, and the visual output produce working code on the first try.

In Claude, click the compose area at the bottom of the screen to start a new conversation.
Paste the following prompt into the chat input and press Enter to send it:

Build an interactive 2D robot arm simulator as an artifact using HTML5 Canvas and JavaScript.

Specifications:
- The arm has 2 links with configurable lengths (L1 = 150px, L2 = 120px)
- Use forward kinematics to calculate the end-effector position from joint angles:
  x = L1*cos(theta1) + L2*cos(theta1+theta2)
  y = L1*sin(theta1) + L2*sin(theta1+theta2)
- Draw the arm with colored segments (different color per link)
- Draw joints as circles at each connection point
- Add a grid background for spatial reference
- Display the arm on an HTML5 Canvas element
- Set initial joint angles to theta1 = 45 degrees, theta2 = -30 degrees

Why structure the prompt this way?

Notice how the prompt specifies technology (HTML5 Canvas + JavaScript), math (the exact forward kinematics formula), and visuals (colored segments, grid, joint circles). This leaves nothing for Claude to guess at.

Being specific about technical requirements upfront is the most important prompting technique for code generation. Claude fills in gaps with reasonable defaults, but "reasonable" might not match what you want.

After you send the prompt, Claude will generate code and display a live preview panel on the right side of the screen. This is your Artifact.

You should see a robot arm rendered on a canvas with a grid background, colored segments, and circles at each joint.

Don't see a live preview panel?

Make sure you are using Claude on a desktop browser, not mobile. Artifacts are not available on mobile. If you see code but no preview, try refreshing the page and sending the prompt again.

Help me troubleshoot my missing Artifact preview

Review and understand the generated code

Claude does not just give you code. It explains what it built. Reading this explanation helps you understand the robotics concepts so you can discuss them in interviews.

Read through Claude's explanation below the code. It will walk you through how it implemented the forward kinematics math.
In the Artifact preview, identify the arm's base (fixed point), the first link, the elbow joint, the second link, and the end-effector (tip).
Look for the forward kinematics formula in Claude's explanation. It calculates the end-effector position like this:

// Forward kinematics: joint angles to end-effector position
// x = L1*cos(theta1) + L2*cos(theta1+theta2)
// y = L1*sin(theta1) + L2*sin(theta1+theta2)

What is forward kinematics?

Forward kinematics answers the question: "If I know the angles of each joint, where does the tip of the arm end up?" You start with angles and calculate position.

The formula uses trigonometry. Each link contributes a horizontal (cos) and vertical (sin) component based on its angle. The second link's position depends on both theta1 and theta2 because it rotates relative to the first link.

Ask Claude to explain the math in more detail by sending this follow-up message:

Explain how the forward kinematics calculation works in this code, relating it to the DH convention I'd see in a robotics course.

Claude will connect the implementation to formal robotics theory. This is useful context for internship interviews where you might discuss kinematics.

Add slider controls for joint manipulation

A static arm is not very useful for understanding how joint angles affect position. Sliders let you drag and see the arm move in real time, making the forward kinematics formula tangible.

Send this follow-up prompt to Claude in the same conversation:

Add to the existing artifact:
- Interactive sliders below the canvas for theta1 and theta2 (range -180 to 180 degrees)
- The arm should update in real-time as I drag each slider
- Display the current end-effector (x, y) position as a coordinate readout below the sliders
- Label each slider with the joint name and current angle value

Why say "Add to the existing artifact"?

Claude remembers everything in the current conversation. Saying "add to the existing artifact" tells it to modify the code it already generated rather than starting from scratch. This is how you iteratively build features without losing previous work.

Claude will update the Artifact with the new controls. The preview panel refreshes automatically.

Test the sliders by dragging each one left and right. The arm should move smoothly as you drag.
Watch the coordinate display update in real time as you move the sliders. The x and y values change to reflect the new end-effector position.
Try setting theta1 to 0 and theta2 to 0. The arm should extend straight to the right with both links in a line.

Sliders not updating the arm?

If the sliders appear but the arm does not move, Claude may have missed connecting the slider events to the drawing function. Send this follow-up: "The sliders are visible but dragging them doesn't update the arm. Fix the event listeners so the canvas redraws on every slider input."

This is a normal part of iterative development with AI. Describe what is wrong and Claude fixes it.

Help me fix my robot arm sliders

✔️ Awesome, my arm moves with the sliders!

Great work. Your robot arm artifact now has the full forward kinematics foundation: two colored links, joint circles, a grid background, working sliders for theta1 and theta2, and a live coordinate display.

ⓧ I'd like to double check what I should have

Your Artifact should have all of the following features. If any are missing, ask Claude to add them in a follow-up message.

An HTML5 Canvas with a grid background.
A 2-link robot arm with colored segments (different color per link).
Circles drawn at each joint.
A slider for theta1 (range -180 to 180 degrees).
A slider for theta2 (range -180 to 180 degrees).
The arm updates in real time when you drag either slider.
A coordinate display showing the current end-effector (x, y) position.

You now have a working 2D robot arm with forward kinematics. Next up, you will add the reverse capability: clicking anywhere on the canvas and having the arm reach for that point using inverse kinematics.

Add Inverse Kinematics with Mouse Interaction

Your robot arm responds to sliders, but real robots need to reach specific points in space. Right now you control the arm by setting angles, which is like steering a car by specifying individual wheel rotations instead of just pointing where you want to go.

In this step, you will add inverse kinematics so you can click anywhere on the canvas and the arm figures out the joint angles to reach that point. You will also add smooth animation and handle cases where the target is out of reach.

In this step, get ready to:

Add click-to-reach inverse kinematics using the law of cosines.
Handle edge cases when clicking outside the arm's reachable workspace.
Add smooth animation with linear interpolation so the arm glides to its target.

Prompt Claude to add click-to-reach functionality

Forward kinematics answers "given these angles, where is the end-effector?" Inverse kinematics answers the opposite question: "given a target point, what angles do I need?"

In your existing Claude conversation, type the following prompt:

Add inverse kinematics to the existing artifact so that clicking anywhere on the canvas moves the end-effector to that point. Use the geometric approach with the law of cosines for the 2-link arm. Include visual feedback: show the target point as a crosshair, and update the sliders to reflect the new joint angles after each click.

What does this prompt do?

This prompt tells Claude exactly what math to use (law of cosines) and what feedback to show (crosshair, slider updates). Being specific about the technical approach gives Claude the constraints it needs to produce correct kinematics code on the first try.

Notice you said "Add to the existing artifact" implicitly by referencing the artifact. Claude remembers your full conversation, so it builds on the code from Step 2 rather than starting from scratch.

Wait for Claude to generate the updated artifact.
In the Artifact preview on the right, click somewhere on the canvas near the arm.

You should see a crosshair appear at your click location and the arm snap to point at that position. The sliders should update to show the new joint angles.

How does inverse kinematics work here?

For a 2-link arm, the law of cosines calculates the elbow angle (theta2) from the distance to the target. Once theta2 is known, theta1 is calculated using arctangent. This geometric approach gives an exact closed-form solution for 2 links.

Arm not responding to clicks?

Make sure you are clicking directly on the canvas area, not on the sliders or surrounding space. If the artifact is not updating at all, scroll up in Claude's response to check if it produced an error message. You may need to ask Claude to fix any issues it reports.

help me debug why my artifact isn't responding to mouse clicks

Handle edge cases through iterative refinement

A 2-link arm can only reach points within a circle of radius L1 + L2 from its base. Clicking outside this circle can cause the math to break or the arm to behave strangely.

Test clicking outside the arm's reach by clicking far away from the base in a corner of the canvas.
Test clicking very close to the base of the arm.
Test clicking behind the arm (on the opposite side from where it currently points).

If the arm glitches, disappears, or produces NaN errors for unreachable points, you need to ask Claude to fix it. Type this prompt:

The arm glitches when I click outside its reach. Add boundary handling that extends the arm fully toward unreachable targets instead of breaking.

Why is this iterative debugging?

This is how professional developers work with AI coding tools. You describe the problem you observed, and the AI fixes it. You do not need to know the exact code fix yourself. Describing what went wrong clearly is the key skill.

After Claude updates the artifact, test again by clicking far outside the arm's reach.

You should see the arm extend fully in the direction of your click, pointing straight at the target without glitching. The crosshair should still appear at your click location.

Still seeing glitches after the fix?

Try being more specific with Claude about what you observe. For example: "When I click at the top-left corner, the arm disappears completely" gives Claude more context than "it's still broken." The more precise your bug report, the better Claude's fix.

help me describe this bug to Claude more precisely

Add smooth animation

Right now the arm snaps instantly to its target, which looks unnatural. Real robot arms move smoothly between positions, and this makes the simulation much more satisfying to interact with.

Ask Claude to add animation by typing this prompt:

Animate the arm movement instead of snapping instantly to the target. Use linear interpolation of joint angles over approximately 500ms. The sliders should update smoothly during the animation to reflect the current angles.

What is linear interpolation?

Linear interpolation (often called "lerp") smoothly transitions between two values over time. For each frame of the animation, the joint angle is calculated as a blend between the start angle and the target angle based on how much time has elapsed.

Wait for Claude to update the artifact.
Click on different spots around the canvas.

You should see the arm glide smoothly to each new target over about half a second. Watch the sliders as it moves. They should animate in sync with the arm, showing the angles changing in real time.

Each prompt builds on the last

Notice how each prompt in this step added one feature without restarting. This incremental approach is a core prompting technique for building complex artifacts with Claude. Keep features small and testable, then layer them one at a time.

Animation looks choppy or sliders lag behind?

Ask Claude to use requestAnimationFrame for the animation loop if it is not already. You can say: "The animation is choppy. Make sure you're using requestAnimationFrame and updating the sliders on every frame."

help me get smoother animation in my Claude artifact

Your arm now responds to clicks, handles impossible targets gracefully, and animates smoothly between poses. Next up, you will extend it to three joints and add visual polish to make it portfolio-ready.

Polish and Add a Third Joint

Your robot arm now responds to mouse clicks, reaching toward any target using inverse kinematics. The smooth animation and slider sync make it feel like a real interactive tool.

In this step, you will push the simulator further by adding a third joint. A 3-link arm introduces a genuine engineering challenge: the math has infinite solutions. You will also add visual polish that makes the artifact portfolio-ready, then publish it with a shareable link.

In this step, get ready to:

Add a third link and joint, upgrading the arm to 3 degrees of freedom.
Add visual polish including gradients, labels, a trail, and a reset button.
Publish and share your artifact with a public link.

Add a third link to the robot arm

A 2-link arm has exactly two degrees of freedom, which matches the two coordinates (x, y) of a point on a flat plane. That means there is usually one unique solution when you click a target. A 3-link arm has three degrees of freedom but still only needs to reach a 2D point. This creates an under-determined system with infinite valid solutions.

Before asking Claude to write any code, you will ask it to explain the engineering tradeoff. This is a key prompting technique: getting Claude to reason about the problem first produces better implementations.

Send this prompt to Claude to get an explanation of the challenge before any code changes:

Before you code this, explain why 3-DOF IK is harder than 2-DOF and what approach you recommend

Why ask for an explanation first?

When Claude explains the tradeoffs before coding, it commits to a consistent approach. You also get to understand the engineering decision, which is valuable if you discuss this project in an interview.

Claude will likely describe options like fixing the elbow angle, minimizing joint movement, or using a weighted pseudo-inverse. All are valid approaches to resolving the redundancy.

Read Claude's explanation carefully. It should describe why infinite solutions exist and recommend a specific resolution strategy.
Once you understand the approach, send a follow-up prompt to implement the change:

Great, now implement that approach. Extend the arm to 3 links with 3 joints. Add a third slider for the new joint angle. Update the forward kinematics to include the third link, and update the inverse kinematics using the approach you just described. Keep everything else working (click-to-reach, animation, boundary handling).

What does this prompt do?

This prompt references Claude's own explanation ("the approach you just described") so Claude stays consistent with its reasoning. It also explicitly lists the features that must keep working, preventing regressions.

Check the Artifact preview on the right side of the screen. You should see the arm now has three colored segments with a third joint connecting them.
Look below the canvas for three sliders (theta1, theta2, and theta3) and verify the coordinate display still shows the end-effector position.
Click various points on the canvas to confirm the 3-link arm still reaches targets correctly.
Test clicking outside the arm's reachable workspace (further than L1 + L2 + L3 from the base) to verify boundary handling still works.

Arm glitching when you click?

If the arm jumps erratically or snaps to strange positions, tell Claude exactly what you see. Try: "The arm flickers between two poses when I click near the base. Can you add damping or constrain the solution to avoid large joint jumps?"

This is iterative debugging in action. Describe the symptom, and Claude will refine the IK solver.

Help me debug my 3-DOF inverse kinematics

What is 3-DOF redundancy?

A planar 3-link arm has 3 joint angles (degrees of freedom) but only needs to satisfy 2 constraints (x and y position of the end-effector). The extra DOF means there are infinitely many arm configurations that reach the same point.

This is a real concept that comes up in robotics interviews. Industrial arms with 6+ joints are highly redundant, and engineers use strategies like weighted pseudo-inverses to pick the "best" solution from the infinite set.

Add visual polish

The arm works correctly, but right now it looks like a basic prototype. A few visual upgrades will make the simulator feel polished and easier to understand at a glance.

Send this prompt to Claude to add all visual enhancements at once:

Add visual polish to the robot arm artifact:
1. Gradient-colored arm segments that transition from a dark color at the base to a bright color at the tip
2. Joint angle labels displayed on or near each joint showing the current angle in degrees
3. A coordinate frame at the base showing x and y axes with arrows
4. A semi-transparent trail showing the last few positions of the end-effector (like a fading ghost trail)
5. A "Reset" button that returns all joints to their default starting pose

Why request everything in one prompt?

These are all purely visual additions that do not affect the arm's logic. Bundling them into a single numbered list keeps your conversation concise. Claude handles multiple visual changes well when they are independent of each other.

If you were changing the math or control logic, you would ask for one change at a time to catch regressions early.

Check the Artifact preview. You should see the arm segments displaying a color gradient from base to tip.
Look at each joint for angle labels showing the current angle in degrees.
Look at the arm's base for small x and y axis arrows forming a coordinate frame.
Drag the sliders to move the arm. You should see a fading trail following the end-effector's path.
Click the Reset button. All joints should snap back to their default angles.

Missing some visual features?

If one or two items are missing (for example, no coordinate frame or no trail), ask Claude to fix just the missing piece. Try: "The trail and Reset button are working, but I don't see the coordinate frame axes at the base. Can you add those?"

Targeted follow-ups work better than repeating the entire request.

Help me fix missing visual elements in my artifact

Do a final check of all features working together: click the canvas to set a target, watch the arm animate with its gradient colors and trail, observe the angle labels update, and then click Reset to confirm it returns to the starting pose.

Publish and share your artifact

Your simulator is complete. Publishing it generates a public link that anyone can open to interact with your robot arm directly in their browser.

Make sure the Artifact panel is open on the right side of the screen showing your robot arm.
Click the Publish button in the top-right corner of the Artifact panel.
Copy the public link that Claude generates.

Who can see your published artifact?

Anyone with the link can view and interact with your robot arm. The link is tied to the specific version of the artifact you published, so future edits in your conversation will not change what others see unless you re-publish.

Viewers with a Claude account can also remix your artifact, creating their own copy to modify. Your original stays unchanged.

Open the copied link in a new browser tab to verify it loads your interactive robot arm simulator.
Test clicking the canvas and dragging sliders to confirm interactivity works for viewers.

Use this in internship applications

This published link is portfolio-ready. You can include it in robotics internship applications or bring it up in interviews to discuss forward kinematics and inverse kinematics concepts with a live interactive demo.

Don't see the Publish button?

Make sure the Artifact panel is expanded (not collapsed). The Publish button appears in the top-right corner of the artifact's panel header. If you still cannot find it, check that you are looking at the Artifact (the interactive preview) and not just Claude's text response.

Help me find the Publish button for my artifact

Secret mission

Add Workspace Visualization and Path Tracing

Your robot arm works great, but can you visualize where it's been and where it can reach? Add a rainbow path tracer and a workspace boundary overlay to turn your simulator into a truly impressive demo.

Clean Up Your Resources

This project runs entirely on Claude's free plan, so there are no ongoing costs or cloud resources to worry about. Decide whether to keep your artifact published, pause sharing, or delete everything.

Resources you used:

Claude conversation containing your robot arm prompts and iterations.
Published artifact with a shareable link (your robot arm simulator).

Keep everything running

No action needed. Choose this if you want to keep your simulator accessible and continue iterating on it.

Your artifact stays in your Claude account indefinitely.
The published shareable link remains active. Anyone with the link can view and interact with your robot arm.
Your Claude free account has no monthly charges.

Pause - I'll come back to this later

Revoke public access to your artifact while keeping it saved in your account. You can still view and edit it privately.

Open your robot arm conversation in Claude.
Navigate to the artifact you published.
Look for the sharing controls on the artifact and remove the published link.
The shareable URL stops working, but your artifact and conversation remain in your account for future use.

Safer than full deletion

Pausing preserves all your prompts and iteration history. You can always re-share later without rebuilding anything from scratch.

Delete - I don't want to use this again

Remove your conversation and artifact entirely from your Claude account.

Open the Claude sidebar where your conversations are listed.
Find your robot arm conversation.
Delete the conversation from your Claude sidebar. This removes the conversation and its associated artifact.

What about my Claude account?

Your Claude free account has no ongoing cost. There is no need to delete it unless you want to. You can use it for future projects at no charge.

Nice Work!

You just built a fully interactive 3-DOF robot arm simulator without installing a single tool or writing code from scratch. Everything happened through conversation with Claude.

You've learned how to:

Built a 3-DOF robot arm simulator with forward kinematics (joint angles to position) and inverse kinematics (click-to-reach) running live in a Claude Artifact.
Applied prompting techniques for coding with AI: structured specifications, iterative refinement, and asking for explanations before implementation.
Published a shareable artifact link you can include in robotics internship applications and discuss in interviews.
Secret Mission: Added workspace boundary visualization and rainbow path tracing to create a visually impressive demo of your arm's reachable area and movement history.

Ready to quiz yourself?