Codemod Studio allows you to “instantly” create code automation bots with the help of Codemod AI. Codemod AI is an innovative tool designed to streamline the process of creating codemods using before and after examples.

By leveraging advanced AI technologies and deterministic software engineering tools, Codemod AI significantly improves the accuracy and efficiency of autogenerated codemods.

​
Features

​
(Multiple) before/after code examples

The user-defined code snippets in the before/after panels are used by the AI helper to generate a codemod based on the changes in code between both snippets.

By adding multiple pairs of before and after code examples, you can help Codemod AI cover more edge cases.

To add before/after code snippets, you can:

  • Provide one or multiple pairs of before and after code examples. Insert the original code into the Before panel, then insert how the code should look like after transformation into the After panel
  • or use the codemod learn command straight from your IDE/CLI to automatically populate the before/after snippets.

​
Natural Language Descriptions in Examples

This feature allows you to provide transformation logic in the form of natural language descriptions directly within the code examples.

To use natural language descriptions, you can:

  • Add comments with natural language descriptions in your Before or After code examples.
  • These descriptions provide context and guide Codemod AI in generating more precise and generalizable codemods.

Example:

​
Automated Test Case Generation

Codemod AI can generate new before and after examples automatically based on the existing test cases or a description from a migration guide. This feature allows you to create new before and after examples quickly and easily.

To generate test cases, you can:

1

Navigate to the bottom panel in Codemod Studio.

2

Enter a relevant text snippet from a migration guide or provide existing before and after examples.

3

Click the Magic Wand icon to auto-generate a new pair of before and after examples.

​
AI Helper

The assistant provides support and guidance throughout the codemod creation and execution process. It leverages AI to help users generate codemod scripts, troubleshoot issues, and refine their code transformations.

To use the AI helper, make sure that the before/after panels are correctly populated, then use the available actions or prompt builders to iteratively build your codemod.

​
Codemod editor

The codemod editor allows you to review and edit the generated codemod. This makes it easy to tweak your codemod without having to leave your studio environment.

​
Output panel

The output panel dynamically reflects how the codemod affects the Before snippet in real-time.

This immediate feedback loop helps you quickly identify and correct any issues in your codemod without having to export and run it over your local project.

​
AST viewer

The AST viewer enables you to see a detailed view of the before and after snippets’ Abstract Syntax Tree (AST).

This feature is especially useful for experienced codemod builders who want to edit/build codemods manually.

The AST viewer is made for more advanced codemod developers. If you intend to build codemods using the AI helper only, you can skip using this feature.

​
Debugger

The debugger displays the events that occur any caught errors when running the codemod. This allows you to easily trace and debug your codemod if it doesn’t work as expected.

You can use console.log in the codemod editor to print out any output in the debugger.

​
Sharing codemods

After building a codemod, you can click Share to get a shareable public link to your codemod.

This allows you to easily share and test your codemods with friends, team members, and the community.

​
Running codemods

Once you are done with building your codemod, you can instantly publish the codemod privately and run it locally over your project using Codemod CLI.

1

Publish codemod

Click Run via CLI to instantly publish the codemod to your private registry.

2

Run via Codemod CLI

Run the codemod using Codemod CLI.

Alternatively, you can download the codemod package locally and run it with Codemod CLI or publish it publicly to Codemod Registry.

​
Tips and Tricks for Writing Better Tests and Codemods

  1. Clarity is Key: Ensure that the transformation logic is clear for both humans and AI. Well-defined logic leads to more accurate codemods.

  2. Follow the MECE Principle: When designing test cases, aim for them to be Mutually Exclusive and Collectively Exhaustive (MECE). This means:

    1. Mutually Exclusive: Each test case should cover a unique scenario without overlap. Ideally, you only need one clear example with a proper description for each pattern. Break down complex transformations into smaller, more manageable parts.

    • Collectively Exhaustive: Together, your test cases should cover all possible scenarios for the codemod.

    For example, if you’re writing a codemod to update function syntax:

    • Test case 1: Regular function to arrow function
    • Test case 2: Function with parameters
    • Test case 3: Function with default parameters
    • Test case 4: Async function

    Each case covers a distinct scenario, and together they cover a wide range of function types.

  3. Descriptions Improve Generalization: When adding natural language descriptions to the before and/or after snippets, focus on providing clear and concise guidance. Proper description will help Codemod AI to generate atomic codemods with fewer examples. Even a single well-described example can yield a correct atomic codemod.

  4. Balance Simplicity and Complexity: While it’s possible to create complex transformation logics that support all cases, simpler, more focused codemods are often more maintainable and easier to understand.

Was this page helpful?

execOverview