Phase 2 — Code Migration

Phase 2 migrates your source components to a SitecoreAI SXA Headless app using Content SDK 2.0. Components are migrated one at a time, in priority order, with each one verified live in a sandbox before moving to the next.

Duration: Hours — iterative, one component at a time | Orchestrator: Code Migration Orchestrator

Requires: Discovery complete | Sandbox mode: Mock (no live SitecoreAI connection needed)

---

How Code Migration works

Styles first, then components. Before any component is migrated, global styles are migrated as a batch. This gives the sandbox a working visual foundation so components render correctly from the first one.

Home page first, then outward. Components are migrated in page-aware priority order — home page components first. You get a recognizable, testable result immediately rather than starting with obscure components that are hard to verify.

One component at a time. Each component is migrated individually. After each one, the agent opens the sandbox dev server URL so you can see it rendered live before approving. This means you catch problems at the unit level, the app is always in a working state, and rollback restores both code and state instantly.

Mock mode. The sandbox renders components using static layout snapshots from your XP instance — no live SitecoreAI connection needed. Phase 2 and Phase 3 can run in parallel.

---

What gets migrated — Headless (JSS) vs MVC

🟢

Headless (JSS) source sites

React/JSS components are migrated to SitecoreAI Content SDK 2.0. This is a minimal-change migration — approximately 95% of original component code is preserved. Only what is structurally incompatible with SitecoreAI is modified. Field bindings, prop types, and component structure stay as close to the original as possible.

🔵

MVC source sites

Razor views, controllers, and view models are reconstructed as React/TSX components. This is a translation, not a port — Razor and React are different languages. What is preserved is the HTML structure, class names, and field bindings, so existing styles continue to apply and the visual result matches the original.

For each MVC rendering, the agent uses the source mapping from Discovery to locate the .cshtml, the controller action, and the view model type, then converts each part:

• Razor markup becomes JSX with the same DOM structure and class names
• @Model.X expressions become fields.X reads against the Layout Service JSON
• Glass Mapper view models are recognized and translated to TypeScript prop interfaces
• Partial views (@Html.Partial, @Html.RenderPartial) decompose into child React components in the same folder
• Razor patterns that don’t translate cleanly (e.g. embedded C# logic that belongs in a resolver) are surfaced for your guidance rather than silently attempted

---

Before you start

• Phase 1 — Discovery is complete
• code-discovery-report artifact exists in your workspace
• Your project is open in Kajoo Agentic

---

How to run Code Migration

1. Open your project in Kajoo Agentic and start a new chat session (or continue an existing one)
2. Type "Start code migration" to invoke the Code Migration Orchestrator
3. The agent loads the code-discovery-report and presents the component list and migration order
4. Confirm to begin — styles are migrated first as a batch
5. For each component:
   • The agent migrates the component and commits a checkpoint to the target repo
   • Review the rendered output in the sandbox dev server URL
   • Choose your next action (see below)
6. Continue until all components are migrated or you choose to stop

📘

You can run Phase 3 — Content Migration in a separate chat session within the same project at the same time. Code and content migration operate on independent systems.

---

What you’ll decide

After each component is migrated:

If a component fails to render or causes a build error:

---

Checkpoints and rollback

Every component migration creates a checkpoint — a git commit plus a state snapshot — before any changes are made. Rollback restores both the code (git) and the migration state in one operation. You always return to a known-good state.

Checkpoints are committed to your target repository throughout the migration. The final state is your migrated codebase.

---

Resuming Code Migration

Progress is tracked in the migration-state artifact — completed, pending, and skipped components per page.

To resume: open a new chat session in your project and type "Resume code migration". The agent reads migration-state and picks up from the next pending component. You can resume across sessions, days, or team members.

---

What Code Migration produces

Migrated component code is committed to your target repository throughout the process. Each commit is labelled with the component name.

---

Troubleshooting

---

What’s next