Setting Up Your Kanbots Workshop: Tauri v2 and Svelte 5

Welcome to the Kanbots project, where we’ll build an innovative desktop Kanban application designed to host and orchestrate multiple AI agents. This application will empower you to automate development tasks, from code generation to review, leveraging isolated Git worktrees for each agent’s context.

In this first chapter, we lay the groundwork for Kanbots. We’ll set up the core cross-platform desktop application using Tauri v2 for the backend and Rust, paired with a modern Svelte 5 frontend. By the end of this milestone, you will have a functional desktop application window displaying a basic Svelte interface, ready for further development. This foundational setup is crucial for enabling the local-first, privacy-conscious AI agent interactions that will define Kanbots.

Planning & Design: The Kanbots Architecture Core

Kanbots is designed as a desktop application to offer several key advantages: direct filesystem access, enhanced privacy for sensitive AI API keys, and a responsive, integrated user experience. To achieve this, we’ll use a robust architecture:

Tauri v2 (Rust Backend): Tauri provides a framework for building cross-platform desktop applications using web technologies. Its Rust backend offers performance, strong type safety, and direct access to system-level functionalities like Git operations and secure API key storage. We chose Tauri v2 for its latest features and performance improvements.
Svelte 5 (Frontend): Svelte is a modern JavaScript framework known for compiling code into tiny, vanilla JavaScript bundles, resulting in highly performant and reactive user interfaces. Svelte 5, while currently in beta, brings significant advancements in reactivity and component architecture, making it an excellent choice for a dynamic application like Kanbots.
Inter-Process Communication (IPC): The Svelte frontend will communicate with the Rust backend via Tauri’s IPC mechanism. This allows the UI to trigger backend logic (e.g., Git commands, AI agent orchestration) and receive updates, ensuring a seamless user experience.

Project Structure Overview

When we initialize our Tauri project, it will create a standard directory structure:

src-tauri/: This directory houses all the Rust backend code, including the main application logic, API interactions, and system integrations (like Git worktree management).
src/: This will contain our Svelte frontend code, including components, styling, and client-side logic.
package.json: Manages frontend dependencies and scripts.
Cargo.toml: Manages Rust dependencies and project metadata.

flowchart TD User[User Interaction] --> Svelte_FE[Svelte Frontend] Svelte_FE -->|IPC Call| Tauri_Backend[Tauri Backend] Tauri_Backend --> OS[Operating System] Tauri_Backend --> AI_APIs[External AI APIs] OS -->|File System Access| Tauri_Backend

The user interacts with the Svelte frontend, which communicates with the Rust backend via IPC. The Rust backend then handles all system-level operations, including interacting with the operating system (e.g., file system for Git worktrees) and external AI APIs.

Step-by-Step Implementation: Building the Foundation

Let’s get our development environment set up and create the initial Kanbots application.

Prerequisites

Before we begin, ensure you have the following tools installed and configured on your system. These versions are current as of 2026-05-24.

Rust Toolchain:
- What it is: The Rust programming language and its package manager, Cargo, are essential for the Tauri backend.
- Why it exists: Provides a high-performance, memory-safe language for system-level operations.
- Installation: Follow the official instructions at rust-lang.org/tools/install. This typically involves running curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh.
- Verification:
```
rustup update
rustc --version
cargo --version
```
  You should see output similar to rustc 1.78.0 (286c47847 2024-04-29) and cargo 1.78.0 (c406a0a 2024-04-29) or newer.
Node.js and npm/Yarn:
- What it is: A JavaScript runtime and package manager (npm or Yarn) for managing our Svelte frontend dependencies.
- Why it exists: Enables development and building of JavaScript-based web applications.
- Installation: Download the LTS version from nodejs.org.
- Verification:
```
node -v
npm -v
# or yarn -v if you prefer Yarn
```
  You should see versions like v20.12.2 for Node.js and 10.5.0 for npm or newer.
Git:
- What it is: The distributed version control system. Critical for managing worktrees later.
- Why it exists: Tracks code changes, enables collaboration, and is fundamental to Kanbots’ agent isolation.
- Installation: Follow instructions at git-scm.com/downloads.
- Verification:
```
git --version
```
  You should see something like git version 2.44.0 or newer.
Code Editor:
- Recommendation: VS Code with Rust Analyzer and Svelte extensions.

1. Install Tauri CLI

We’ll use the Tauri CLI to create and manage our project. We’re targeting Tauri v2 for its advancements.

cargo install tauri-cli --version 2.0.0-beta.19

What it does: Installs the Tauri command-line interface as a Rust binary.
Why this version: 2.0.0-beta.19 is the latest stable beta as of 2026-05-24. While Tauri v1.x is stable, v2 offers significant improvements we’ll leverage.

2. Create Your Kanbots Project

Now, let’s create a new Tauri project using the Svelte TypeScript template.

Navigate to your desired projects directory in your terminal and run:

cargo tauri dev --template svelte-ts kanbots

cargo tauri dev: This command is typically used to run the application in development mode. When used with --template, it initializes a new project.
--template svelte-ts: Specifies that we want to use the Svelte and TypeScript template. This template is compatible with Svelte 5, though Svelte 5 itself is currently in beta.
kanbots: This is the name of our project directory.

The CLI will prompt you for a few details. You can accept the defaults for now:

? What is your app name? › Kanbots
? What is the window title? › Kanbots
? Where should your frontend files be located, relative to the project root? › src
? What is your frontend dev command? › npm run dev
? What is your frontend build command? › npm run build
? What is the path to your frontend dist folder? › ../dist

This process will set up the necessary files and install frontend dependencies. It might take a few minutes.

3. Explore the Project Structure

Once the command completes, you’ll have a kanbots directory. Let’s look at the key parts:

kanbots/
├── src-tauri/             # Rust backend code
│   ├── Cargo.toml        # Rust dependencies and project metadata
│   ├── src/              # Main Rust source files
│   │   ├── main.rs       # Tauri application entry point
│   │   └── commands.rs   # IPC commands exposed to the frontend
│   └── ...
├── src/                  # Svelte frontend code
│   ├── App.svelte        # Main Svelte component
│   ├── main.ts           # Svelte application entry point
│   └── ...
├── package.json          # Frontend dependencies and scripts (npm/yarn)
├── tsconfig.json         # TypeScript configuration
└── ...

src-tauri/src/main.rs: This is the heart of your Rust application. It initializes Tauri, defines the main window, and registers any custom commands the frontend can call.
src/App.svelte: This is your main Svelte component. It’s where the initial UI of your application is defined.

4. Run Your Kanbots Application

Navigate into your newly created kanbots directory:

cd kanbots

Now, start the application in development mode:

cargo tauri dev

What it does: This command first builds the Rust backend, then starts the Svelte development server, and finally launches the Tauri desktop window, which loads your Svelte frontend.
Why this command: It provides hot-reloading for your Svelte changes and detailed logging from the Rust backend, making development efficient.

You should see a new desktop window appear, displaying the default Svelte starter page.

5. Customize the Frontend

Let’s make a small change to confirm everything is working as expected.

Open src/App.svelte in your code editor. Replace the existing content with a simpler message:

File: kanbots/src/App.svelte

<script lang="ts">
  // We'll add more reactive state here later
</script>

<main>
  <h1>Welcome to Kanbots!</h1>
  <p>Your AI agent workshop is taking shape.</p>
</main>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
    padding: 2em;
    background-color: #f0f0f0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  h1 {
    color: #333;
    margin-bottom: 0.5em;
  }
  p {
    color: #666;
    font-size: 1.1em;
  }
</style>

What changed: We removed the default Tauri/Svelte boilerplate and added a simple <h1> and <p> tag with a custom message and basic styling.
Why this change: This confirms that the Svelte frontend is correctly integrated and that hot-reloading is functional.

Save the file. You should see the Tauri desktop window automatically update to display “Welcome to Kanbots!”

Testing & Verification

At this stage, verification is straightforward:

Run the application: Execute cargo tauri dev from the kanbots project root.
Observe the desktop window: A new desktop application window should appear.
Check content: The window should display “Welcome to Kanbots! Your AI agent workshop is taking shape.”
Confirm hot-reloading: Make a minor text change in src/App.svelte and save. The window content should update immediately without needing to restart cargo tauri dev.

If these steps are successful, your basic Kanbots workshop is correctly set up.

Production Considerations

Even at this early stage, it’s good to think about production:

Build Times: Rust compilation can be lengthy, especially the first time. Tauri optimizes subsequent builds, but expect initial builds to take several minutes depending on your system. This is a common tradeoff for performance and safety.
Bundle Size: Tauri applications are generally lightweight because they leverage the native WebView rather than bundling an entire browser runtime (like Electron). This contributes to smaller executable sizes, which is beneficial for deployment.
Cross-Platform Consistency: Tauri handles much of the platform-specific boilerplate. However, always test your application on your target operating systems (Windows, macOS, Linux) as you add features to catch any platform-specific UI or behavior quirks early.
Secure API Keys (Future): We’ll integrate AI agents later, requiring API keys. For a desktop application, hardcoding keys is a major security risk. We’ll explore secure methods like OS-level secret management (e.g., Keychain on macOS, Credential Manager on Windows) or environment variables in a later chapter to keep these sensitive credentials out of your codebase.

Common Issues & Solutions

Rust Toolchain Not Found / Not Up-to-Date:
- Issue: cargo commands fail, or rustc reports an old version.
- Solution: Ensure Rust is correctly installed via rustup and updated with rustup update. Restart your terminal after installation.
Node.js/npm Errors:
- Issue: Frontend dependencies fail to install, or npm run dev doesn’t work.
- Solution: Verify Node.js and npm are installed and on your PATH. Sometimes, reinstalling node_modules (rm -rf node_modules && npm install) can resolve issues.
Tauri Build Errors (Missing Dependencies):
- Issue: cargo tauri dev fails with errors related to system libraries (e.g., webkit2gtk on Linux, developer tools on macOS/Windows).
- Solution: Tauri often requires specific system dependencies for the WebView. Refer to the Tauri prerequisites documentation for your operating system and install any missing packages.
Frontend Not Loading / Blank Window:
- Issue: The Tauri window appears but is blank or shows an error related to the frontend.
- Solution: Check the console in your browser’s developer tools (you can usually open this in the Tauri window with F12 or Cmd+Option+I). Look for Svelte compilation errors or network errors if the frontend dev server isn’t running correctly. Ensure npm run dev (or yarn dev) runs successfully in your src directory.

Summary & Next Step

Congratulations! You’ve successfully set up the core Kanbots desktop application using Tauri v2 and Svelte 5. You have a running desktop window, and you’ve verified that frontend changes are reflected in real-time. This robust foundation is critical for building a responsive, feature-rich application.

In the next chapter, we’ll dive into the fascinating world of Git worktrees. You’ll learn how to programmatically create and manage isolated Git environments directly from your Rust backend, a core mechanism for enabling our AI agents to work on tasks without interfering with each other’s codebases.

This page is AI-assisted and reviewed. It references official documentation and recognized resources where relevant.