codeflash/docs/optimizing-with-codeflash/codeflash-github-actions.mdx
Sarthak Agarwal be031ce205 docs: update JS/TS docs with package manager instructions, monorepo guide, and troubleshooting
- Fix javascript-installation.mdx: remove references to nonexistent
  codeflash.config.js, use package.json config, fix supported framework
  list (only Jest/Vitest), add Python CLI requirement note
- Add package manager-specific commands (npm/yarn/pnpm/bun) throughout
- Add monorepo setup guide with workspace examples
- Add auto-detection table explaining what codeflash init detects
- Add troubleshooting for common issues (exports, framework detection,
  timeouts, TypeScript, monorepo)
- Add yarn/pnpm CI examples to GitHub Actions page with monorepo tip

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-02 22:10:47 +05:30

227 lines
No EOL
7.1 KiB
Text

---
title: "Auto Optimize Pull Requests"
description: "Automatically optimize new code in pull requests with Codeflash GitHub Actions workflow"
icon: "github"
---
Optimizing new code in Pull Requests is the best way to ensure that all code you and your team ship is always performant.
Automating optimization in the Pull Request stage is how most teams use Codeflash, to
continuously find optimizations for their new code.
To scan new code for performance optimizations, Codeflash uses a GitHub Action workflow which runs
the Codeflash optimization logic on the new code in every pull request.
If the action workflow finds an optimization, it communicates with the Codeflash GitHub
App and asks it to suggest new changes to the pull request.
We highly recommend setting this up, since once you set it up all your new code gets optimized.
## Pull Request Optimization 30 seconds demo
<iframe width="640" height="400" src="https://www.youtube.com/embed/nqa-uewizkU?si=H1wb1RvPp-JqvKPh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
## Prerequisites
<Warning>
**Before you begin, make sure you have:**
✅ A Codeflash API key from the [Codeflash Web App](https://app.codeflash.ai/)
✅ Completed local installation with `codeflash init` ([Python](/getting-started/local-installation) or [JavaScript/TypeScript](/getting-started/javascript-installation))
✅ A configured project (`pyproject.toml` for Python, `package.json` for JavaScript/TypeScript)
</Warning>
## Setup Options
<Tabs>
<Tab title="Automated Setup (Recommended)">
<Steps>
<Step title="Run the Setup Command">
```bash
codeflash init-actions
```
This command will automatically create the GitHub Actions workflow file and guide you through the setup process.
Alternatively running `codeflash init` also asks to setup the github actions.
</Step>
<Step title="Customize and Test Your Setup">
Open a new pull request to your GitHub project. You'll see:
- ✅ A new Codeflash workflow running in GitHub Actions
- 🤖 The codeflash-ai bot commenting with optimization suggestions (if any are found)
Ensure that your Python environment installation works correctly and codeflash is able to run.
</Step>
</Steps>
</Tab>
<Tab title="Manual Setup">
<Steps>
<Step title="Create Workflow File">
Create `.github/workflows/codeflash-optimize.yaml` in your repository:
```yaml title=".github/workflows/codeflash-optimize.yaml"
name: Codeflash
on:
pull_request:
paths:
- '**' # Modify this to the path of your project in a mono-repo. Codeflash will only run when code in this directory is modified.
workflow_dispatch:
concurrency:
# Any new push to the PR will cancel the previous run, so that only the latest code is optimized
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
optimize:
name: Optimize new code in this PR
if: ${{ github.actor != 'codeflash-ai[bot]' }}
runs-on: ubuntu-latest
env:
CODEFLASH_API_KEY: ${{ secrets.CODEFLASH_API_KEY }}
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
token: ${{ secrets.GITHUB_TOKEN }}
# TODO: Replace the following with your project's Python installation method
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: '3.11'
# TODO: Replace the following with your project's dependency installation method
- name: Install Project Dependencies
run: |
python -m pip install --upgrade pip
# TODO: Replace the following with your project setup method
pip install -r requirements.txt
pip install codeflash
- name: Run Codeflash to optimize code
id: optimize_code
run: |
codeflash
```
<Warning>
**Replace the TODOs** in the workflow file above with your project's specific setup commands.
</Warning>
Set the `working-directory` parameter in the yaml file, if the commands are meant to be run from some other directory.
</Step>
<Step title="Choose Your Package Manager">
Customize the dependency installation based on your package manager:
The workflow will need to be set up in such a way the Codeflash can create and
run tests for functionality and speed, so the stock YAML may need to be altered to
suit the specific codebase. Typically the setup steps for a unit test workflow can
be copied.
<CodeGroup>
```yaml Poetry (Python)
- name: Install Project Dependencies
run: |
python -m pip install --upgrade pip
pip install poetry
poetry install --with dev
- name: Run Codeflash to optimize code
run: |
poetry env use python
poetry run codeflash
```
```yaml uv (Python)
- uses: astral-sh/setup-uv@v6
with:
enable-cache: true
- run: uv sync --group=dev
- name: Run Codeflash to optimize code
run: uv run codeflash
```
```yaml pip (Python)
- name: Install Project Dependencies
run: |
python -m pip install --upgrade pip
pip install -r requirements.txt
pip install codeflash
- name: Run Codeflash to optimize code
run: codeflash
```
```yaml npm (JavaScript/TypeScript)
- uses: actions/setup-node@v4
with:
node-version: '18'
- name: Install Project Dependencies
run: npm ci
- name: Run Codeflash to optimize code
run: npx codeflash
```
```yaml yarn (JavaScript/TypeScript)
- uses: actions/setup-node@v4
with:
node-version: '18'
- name: Install Project Dependencies
run: yarn install --immutable
- name: Run Codeflash to optimize code
run: yarn codeflash
```
```yaml pnpm (JavaScript/TypeScript)
- uses: pnpm/action-setup@v4
with:
version: 9
- uses: actions/setup-node@v4
with:
node-version: '18'
cache: 'pnpm'
- name: Install Project Dependencies
run: pnpm install --frozen-lockfile
- name: Run Codeflash to optimize code
run: pnpm codeflash
```
</CodeGroup>
<Info>
**Monorepo?** If your codeflash config is in a subdirectory, add `working-directory` to the steps:
```yaml
- name: Run Codeflash to optimize code
run: npx codeflash
working-directory: packages/my-library
```
</Info>
</Step>
<Step title="Add Repository Secret">
1. Go to your GitHub repository settings
2. Navigate to **Secrets and Variables** → **Actions**
3. Click **New repository secret**
4. Add:
- **Name**: `CODEFLASH_API_KEY`
- **Value**: Your API key from [app.codeflash.ai/app/apikeys](https://app.codeflash.ai/app/apikeys)
<Tip>
**Security Note**: Never commit your API key directly to your code. Always use GitHub repository secrets.
</Tip>
</Step>
</Steps>
</Tab>
</Tabs>
## How the Pull Request Optimization Suggestion looks
Codeflash creates a new dependent Pull Request for you to review with the reported speedups, helpful explanation for the optimization
and the proof of correctness. The pull request has the code change for you to review and accept.
![Codeflash PR Review](/images/codeflash_pr_suggestion_1.png)
Sometimes it also makes an inline suggestion with the optimization.
![Codeflash PR Suggestion](/images/code-suggestion.png)
We hope you enjoy the performance unlock the Pull Request optimization enables.