Step 1: Initialize a new codemod.
Runnpx codemod@latest init
in your desired location to store the codemod folder, and select workflow
as your engine. This sets up the scaffolding for your codemod, making it easy to provide configuration and metadata. While optional for building and running a codemod, this step enhances discoverability and sharing.

Step 2: Find JS/TS files.
From the previous step, we got a new directorymui-named-import-to-direct-import
and file inside src/index.ts
. Let’s update this boilerplate file.
We need to get all the files that potentially can have Material UI Icons imports
Step 3: Use ast-grep for pattern detection.
Let’s use ast-grep which is built-in into our workflow engine$$$_
pattern means any number of elements, in our case any number of named imports.
Step 4: Use AI for code transformation.
Now that we have all the needed files and imports, we should fix it somehow. We can write some logic to handle different cases, like support of aliases or … we can just ask LLM to make changesStep 5: Run and test the codemod locally.
Let’s check it out:
Step 6: Publish the Codemod
Now that our codemod is ready, we can publish it to Codemod Registry. This allows your codemod to be:- easily accessible to the open source community and your peers
- seamlessly distributed upon releasing new versions
- integrated with the rest of Codemod platform

