Kilo canvas

[intuitiv]

Context

This PR introduces the "Mobile Bridge," a new feature that untethers development from the desk by allowing users to continue their Kilo Code sessions from a mobile device.

This was born from a personal need to achieve true continuity in my development workflow. I often found myself needing to step away from my computer mid-task, shattering my focus. The goal of the Mobile Bridge is to enable a seamless, continuous "vibe coding" session, turning a fragmented process into an uninterrupted conversation with Kilo, no matter where I am.

Implementation

I chose to build this feature directly into the Kilo Code extension to create a robust, first-class experience, avoiding fragile workarounds like a companion extension that would rely on file polling.

The implementation consists of three core parts:

1. The Bridge Server (src/bridge/MobileBridge.ts): A new module is introduced that starts a per-workspace HTTP server. It's activated via a new status bar item and exposes two primary endpoints: POST /new-task and POST /send-followup. The server interacts with Kilo by calling its internal functions directly, ensuring a stable and performant connection.

2. UI Integration: A new, minimal UI element is added to the VS Code status bar. This allows the user to easily start and stop the Mobile Bridge server for the active workspace and configure the port.

3. The "Kilo Canvas" Mobile App: To make this feature immediately useful, this PR also includes "Kilo Canvas," a mobile client sub-project located in the monorepo (apps/kilo-remote). Built with Expo (React Native), it serves as both a reference implementation for the API and a fully functional mobile app that the community can use out-of-the-box.

The main tradeoff of this approach is that the bridge has a direct dependency on Kilo's internal controllers, but I believe this is the correct choice for such a deeply integrated feature, ensuring long-term stability over external methods.

Screenshots

Mobile bridge on vscode workspace

Kilo canvas sample screenshot from my mobile

apps/kilo-remote/README.md has all the necessary details to setup for dev and deploy of mobile app.

How to Test

1. Run the extension from this branch.

2. From the VS Code status bar, click the new button to "Start Mobile Bridge".

3. Test creating a new task:

   • Open your terminal and run the following curl command:

   curl -X POST -H "Content-Type: application/json" \
     -d '{"message": "Hello Kilo, this is a test from the new bridge."}' \
     http://localhost:8080/new-task

   • Expected Result: A new task should appear in the Kilo UI, and the command should return a JSON response containing the taskId.

4. Test sending a follow-up message:

   • Take the taskId from the previous response and use it in the next command:

   curl -X POST -H "Content-Type: application/json" \
     -d '{"taskId": "YOUR_TASK_ID_HERE", "message": "This is a follow-up message."}' \
     http://localhost:8080/send-followup

   • Expected Result: The follow-up message should appear in the active Kilo task, and a JSON response with Kilo's reply will be returned.

Get in Touch

I'm active on the Kilo Code Discord. My handle is sainath_aet. I'm very excited about this feature's potential and am happy to discuss it further and make any changes needed

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9490aa8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR