I Built a Controller Mapper for the MSI Claw (Without Writing a Line of Code)
The MSI Claw 8 AI+ is a great piece of hardware. Gorgeous screen, proper Windows handheld, runs Steam games natively. But configuring the controller? Absolute pain.
Steam Input is powerful but opaque. You open the configurator, stare at a grid of buttons, and try to remember which action you bound to which key. For complex games like Dwarf Fortress, you're mapping 80+ keybindings across four controller layers. There's no visual feedback, no way to see your layout at a glance, and if you mess up the VDF file, you start over.
I wanted a tool that would let me paste a game's keybindings and see them mapped to the controller visually. Nothing like that existed. So I built one.
The Problem
Steam Input Is Painful
Steam Input's controller configurator works, but it was designed for people who already understand controller mapping. For complex PC games with dozens of keyboard shortcuts, the process is: open Steam, enter the configurator, click each button one at a time, assign an action, repeat 80 times, then test and discover you've put movement on the wrong stick.
The MSI Claw makes this worse because it has fewer physical buttons than a typical keyboard game expects. You need to use layers (action sets in Steam's terminology) to fit everything: a Base layer for the most common actions, shoulder modifier layers (L1 and R1) for secondary commands, and Back Grip layers for the rest.
The real problem isn't the buttons. It's the mental model. You can't see the full picture. You're editing one binding at a time in a modal, and there's no way to check "wait, did I already assign something to the left bumper on the R1 layer?"
What the Tool Does
Paste and Parse
Paste your game's keybindings in any format. The parser handles plain text lists, CSV, wiki tables, config file syntax. It identifies the action name and the key, categorises each binding (movement, combat, UI, camera, etc.), and flags any it can't parse.
Auto-Map to Controller
The mapper takes your parsed bindings and assigns them to controller buttons using a priority system. High-frequency actions (movement, primary attack) get the best slots on the Base layer. Less common actions get pushed to modifier layers. The algorithm knows which buttons are ergonomically accessible and prioritises accordingly.
Interactive SVG Layout
See your entire controller layout at a glance. An SVG diagram of the MSI Claw shows every button with its assigned action. Click any button to reassign it. Switch between layers (Base, L1, R1, Back) with tabs. Unassigned bindings appear in a list on the side so nothing gets lost.
Quick Reference Card
Generate a printable reference card showing all your bindings organised by layer. Useful for learning a new layout without constantly checking the configurator.
VDF Export
Export your layout as a Steam Input VDF file. Drop it into your Steam controller config folder and your layout is live. No manual entry in the Steam configurator needed.
How It Works Under the Hood
The tool is a single HTML file. No dependencies, no build tools, no server. Open it in a browser and it works. Here's what happens when you paste your keybindings:
- Parsing: A multi-format parser splits your input into action-key pairs. It handles tab-separated, comma-separated, colon-separated, and freeform text. It strips out headers, blank lines, and formatting noise.
- Category detection: Each action is categorised automatically. "Move forward" becomes Movement. "Attack" becomes Combat. "Open inventory" becomes UI. The categoriser uses keyword matching with fallbacks for ambiguous actions.
- Priority assignment: Categories get priority weights. Movement is highest (you need WASD on the sticks). Combat is next. UI and menu actions are lowest. Within each category, the parser's original order serves as a tiebreaker.
- Slot mapping: The auto-mapper walks the priority list and assigns each action to the best available slot. Base layer gets the top-priority actions, L1 layer gets the next tier, and so on. Ergonomic slot quality is pre-scored: thumbstick click is worse than face button, which is worse than trigger.
- Rendering: The SVG diagram updates live. Labels appear beside each button. Click any label to open a modal where you can reassign, swap, or clear the binding.
The AI Build Process
This entire tool was built with Claude Code. I described what I wanted in plain English, iterated on the result, and refined the UX by testing in the browser and feeding back what didn't work.
The whole thing is one HTML file: 1,400+ lines of HTML, CSS, and JavaScript. No framework, no bundler, no package.json. This is deliberate. A single file means zero deployment friction. Host it anywhere. Open it locally. Send it to someone. It just works.
Everything runs in the browser. Your keybindings never leave your machine. The parser, mapper, renderer, and VDF exporter are all client-side JavaScript. There's nothing to install, no account to create, no data sent anywhere.
The build process was roughly: describe the feature, test it, describe the fix, test again. The SVG controller diagram took the most iteration because spatial layout is hard to describe in words. But Claude Code handled the coordinate maths, the path drawing, and the click target geometry without me needing to understand any of it.
"I told it what I wanted the controller to look like. It figured out the SVG. I told it the labels were overlapping. It fixed the spacing. I never opened a graphics editor."
What I Learned
Building a tool like this taught me a few things about non-coder development:
- Single-file apps are underrated. No build step means no build errors. No dependencies means no version conflicts. For tools that serve a specific purpose, a single HTML file is the perfect delivery format.
- Domain knowledge matters more than code. I know what makes a good controller layout because I use a handheld daily. That knowledge shaped every design decision. The AI handled the implementation, but the "what" and "why" came from me.
- Visual tools need visual iteration. I couldn't describe the SVG layout perfectly on the first try. I had to see it, adjust it, see it again. The feedback loop between browser and AI is where the quality happens.
- Niche tools fill real gaps. This tool serves maybe a few thousand people worldwide who own an MSI Claw and play complex PC games. But for those people, it saves hours of tedious configuration. Small audience, real value.