# Run Atlas Headless in CI for React Projects in 2026 > React developers in 2026 can run Atlas headless in CI pipelines to automate tasks and get machine-readable output, integrating with `pnpm` and `Vitest`. In 2026, React developers can run Atlas sessions non-interactively within CI pipelines to automate code modifications and generate machine-readable output, integrating direct with existing toolchains like `pnpm`, `Vitest with React Testing Library`, and `prettier` for efficient, automated development workflows. This approach allows Atlas to perform tasks such as converting class components to hooks or adding new `React Testing Library` tests without human intervention during the pipeline execution. ## Key takeaways - Atlas runs non-interactively in React CI with `atlas run`. - Machine-readable output is available via `atlas run --format json` for React pipelines. - Pre-approve `bash`, `read`, `edit` tools for headless React operations. - Atlas provides unified diffs and git patches for review of React code changes. - direct integrates with `pnpm`, `Vitest with React Testing Library`, and `prettier`. ## How to Run Atlas Headless in a React CI Pipeline Running Atlas headless in a React CI pipeline in 2026 is achieved by invoking the `atlas run` command, which operates non-interactively by default. This command sends a single prompt to Atlas, streams all events to standard output, and then exits automatically once the session becomes idle, making it ideal for automated environments. To integrate Atlas into your React project's continuous integration workflow, you will use the `atlas run` command. This command is specifically designed for non-interactive execution, allowing it to function effectively within a CI/CD pipeline without requiring user input. For instance, a CI job might execute `atlas run "Convert all class components in src/components to functional components with hooks"` to automate a significant refactoring task across your React codebase. Atlas will then build its code index using local Ollama embeddings, ensuring your proprietary React code remains off third-party servers, and proceed to draft a plan. The session will conclude once Atlas has completed its work or determined it cannot proceed further, providing a clear exit status for the pipeline. ## Capturing Machine-Readable Output from Atlas in React CI To enable subsequent pipeline steps to programmatically process Atlas's output, the `--format json` flag is essential when running `atlas run` in 2026. This flag instructs Atlas to stream raw event data in a structured JSON format to stdout, rather than human-readable prose, providing a consistent interface for automation. When automating tasks in a React CI pipeline, it is often necessary for downstream steps to parse and react to the output generated by Atlas. By appending `--format json` to your `atlas run` command, such as `atlas run --format json "Add Vitest with React Testing Library tests for src/components/Button.tsx"`, Atlas will emit a stream of JSON objects representing each event in its session. This machine-readable format allows a `bash` script or a `Node.js` process within your CI environment to easily extract information, such as file changes, tool calls, or the final status of the operation. This is particularly useful for integrating with other tools in your React ecosystem, like triggering `prettier` formatting on modified files or reporting test results from `Vitest`. ## Configuring Tool Permissions for Headless React Workflows For Atlas to operate autonomously in a headless React CI environment in 2026, all necessary tools must be pre-approved through the permission configuration, as there is no interactive user to respond to 'ask' prompts. This includes essential tools like `bash`, `read`, `edit`, and `todowrite` to enable code modifications and system interactions. Atlas's robust security model requires explicit permission for every tool call, which is permission-gated against allow, ask, and deny rules. In a headless CI setup for a React project, interactive 'ask' prompts are impossible. Therefore, before initiating an `atlas run` command, you must configure Atlas's permissions to 'allow' the tools it will need to complete its task. For example, if Atlas is expected to modify a React component file like `src/components/UserProfile.tsx` or run a `pnpm` command, `edit` and `bash` permissions must be pre-approved. This ensures that Atlas can perform actions like reading `package.json`, editing `src/App.tsx`, or executing `pnpm test` with `Vitest with React Testing Library` without interruption, maintaining the integrity and security of your React codebase. ## Ensuring Safety and Review in Headless React Code Changes Atlas incorporates several safety mechanisms to ensure that even headless code changes in a React project are reviewable and reversible in 2026. These include drafting a plan in a read-only agent, computing unified diffs for every file edit, and snapshotting changes as git patches for easy rollback. Despite running non-interactively, Atlas maintains a high level of safety and transparency for changes made to your React project. Before any modifications are applied, Atlas drafts a comprehensive plan in a read-only plan agent, which can be reviewed if the output is captured. Crucially, for every file edit, such as modifying `src/hooks/useAuth.ts` or updating `vite.config.ts`, Atlas computes a unified diff and surfaces it. In a headless context, this diff is part of the `--format json` event stream, allowing your CI pipeline to capture and present these changes for review. Furthermore, Atlas snapshots all file changes as git patches, meaning that any edits made by Atlas, for example, converting a class component to a functional one, can be easily diffed against the original state and rolled back using standard git commands, providing a robust safety net for your React development. ## Steps 1. Initialize Atlas in your React project by ensuring a `package.json` exists and Atlas can read your components, hooks, and bundler configuration (e.g., `vite.config.ts`). 2. Configure Atlas permissions to pre-approve necessary tools like `bash`, `read`, `edit`, and `todowrite` in your Atlas configuration file, as a headless run cannot prompt for approval. 3. Define a CI job that invokes `atlas run` with your desired prompt, specifying the model (e.g., `provider/model`) and `--format json` for machine-readable output. For example: `atlas run --format json --model github/copilot-gpt4-turbo --command "Add Vitest with React Testing Library tests for src/components/Header.tsx"`. 4. Capture the JSON event stream from `stdout` in your CI pipeline and parse it to extract relevant information, such as proposed file changes or the final status of the Atlas session. 5. Implement a pipeline step to review the unified diffs generated by Atlas, which are included in the JSON output, before applying or committing changes to your React codebase. 6. Optionally, use `atlas run --continue ` or `atlas run --fork ` to resume or branch off a previous Atlas session, allowing for multi-step automated workflows in your React CI. 7. Integrate with your existing React toolchain: for example, after Atlas edits a file, run `pnpm prettier --write src/components/NewComponent.tsx` to ensure formatting consistency. ## FAQ ### How does Atlas integrate with `pnpm` in a React CI pipeline? Atlas integrates with `pnpm` by utilizing the `bash` tool, which must be pre-approved in its permission configuration. This allows Atlas to execute `pnpm` commands directly within your React project's CI environment. For instance, Atlas can run `pnpm install` to manage dependencies or `pnpm test` to execute `Vitest with React Testing Library` tests, ensuring that any code changes it proposes are validated against your project's existing test suite and build process. ### Can Atlas write `Vitest` tests for React components in headless mode? Yes, Atlas can write `Vitest` tests for React components in headless mode. By providing a prompt like "Add `Vitest` tests with `React Testing Library` for `src/components/MyComponent.tsx`", Atlas will analyze the component, draft a plan, and use its `edit` tool to create or modify test files (e.g., `src/tests/MyComponent.test.tsx`). All these actions occur non-interactively, with changes surfaced as diffs in the JSON output for review. ### How does Atlas ensure code quality with `prettier` in headless React CI? Atlas ensures code quality with `prettier` in headless React CI by allowing you to integrate `prettier` as a post-processing step. While Atlas itself focuses on code generation and modification, its `bash` tool can be used to invoke `pnpm prettier --write` on any files it modifies. Alternatively, your CI pipeline can automatically run `pnpm prettier --check` or `pnpm prettier --write` across the codebase after Atlas completes its task, ensuring all React code adheres to your project's formatting standards. ### What kind of React tasks can Atlas automate in CI? Atlas can automate a wide range of React tasks in CI. This includes refactoring class components to functional components with hooks, adding new `React Testing Library` tests for existing components, generating new components based on specifications, or updating `vite.config.ts` for bundler configuration changes. Atlas's ability to read `package.json` and understand AST declarations using tree-sitter makes it highly effective for React-specific code transformations. ### How do I review changes made by Atlas in a headless CI run for a React project? To review changes made by Atlas in a headless CI run for a React project, you must capture the `--format json` output. This JSON stream contains unified diffs for every file edit Atlas proposes. Your CI pipeline can then parse this output and present these diffs in a human-readable format, perhaps as a comment on a pull request or a dedicated review step, allowing developers to approve or reject the automated changes to files like `src/App.tsx` or `src/components/Button.tsx`. ### Can Atlas use local models for React code analysis in CI? Yes, Atlas can build its code index with local Ollama embeddings, keeping your React code off third-party servers. This capability is fully supported in CI environments. By configuring Atlas to use local Ollama models, you ensure that sensitive React application code, including components, hooks, and business logic, remains within your secure infrastructure during the code analysis and modification process, enhancing data privacy and compliance. --- Canonical HTML: https://runatlas.sh/resources/stacks/run-atlas-headless-in-ci-in-react Source of truth: aeo_pages row `/resources/stacks/run-atlas-headless-in-ci-in-react` (segment: Stacks) (this file is generated from it, never hand-edited). Licence: Atlas is proprietary with a free core. It is not open source and there is no public source repository.