Testing Your Application

<video controls className="w-full aspect-video rounded-xl" src="https://vkcdn.britannio.dev/showcase/flat-task-panel/vk-onb-companion-demo-3.mp4"

</video>

Overview

Preview Mode provides an embedded browser experience within Vibe Kanban, allowing you to test and iterate on your web applications without leaving the development environment. This feature eliminates the need to switch between your browser and Vibe Kanban by providing live preview capabilities and precise component selection tools.

Key Benefits:

Embedded viewing: See your application running directly in Vibe Kanban
Precise component selection: Click to select specific UI components for targeted feedback
Dev Server Logs: Monitor development server output with expandable/collapsible logs at the bottom
Seamless workflows: No context switching between tools

Setting Up Preview Mode

<Steps> <Step title="Configure Development Server Script"> Navigate to your project settings and configure the development server script that starts your local development environment.

Common examples:

npm run dev (Vite, Next.js)
npm start (Create React App)
yarn dev (Yarn projects)
pnpm dev (PNPM projects)

<Frame> </Frame> <Info> You may also need to configure a setup script (e.g., `npm install`) to install dependencies before the development server starts. Configure this in project settings under Setup Scripts. </Info> <Tip> Ensure your development server prints the URL (e.g., `http://localhost:3000`) to stdout/stderr for automatic detection. </Tip> </Step> <Step title="Install Web Companion"> For precise component selection, install the `vibe-kanban-web-companion` package in your application. <Info> **Recommended**: Use the "Install companion automatically" button in the Preview tab to have Vibe Kanban create a task that installs and configures the companion for you. <Frame> </Frame> </Info>

Manual Installation:

Add the dependency to your project:

bash

npm install vibe-kanban-web-companion

Then add the companion to your application:

<Tabs> <Tab title="Create React App"> Add to your `src/index.js` or `src/index.tsx`: ```jsx import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion'; import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <VibeKanbanWebCompanion />
    <App />
  </React.StrictMode>
);
```

</Tab> <Tab title="Next.js"> Add to your `pages/_app.js` or `pages/_app.tsx`: ```jsx import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion' import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <VibeKanbanWebCompanion />
      <Component {...pageProps} />
    </>
  )
}
```

</Tab> <Tab title="Vite"> Add to your `src/main.jsx` or `src/main.tsx`: ```jsx import { VibeKanbanWebCompanion } from "vibe-kanban-web-companion"; import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <VibeKanbanWebCompanion />
    <App />
  </React.StrictMode>
);
```

</Tab> </Tabs> <Note> The Web Companion is automatically tree-shaken from production builds, so it only runs in development mode. </Note> </Step> <Step title="Start Development Server"> In the Preview section, click the **Start Dev Server** button to start your development server. <Frame> </Frame>

The system will:

Launch your configured development script
Detect the URL of your website and load it </Step>

</Steps>

Using Preview Mode

Accessing the Preview

Once your development server is running and a URL is detected:

Click the Preview button (eye icon) in the task interface
View embedded application in the iframe
Interact with your app directly within Vibe Kanban

The preview toolbar provides essential controls for managing your preview experience:

Refresh: Reload the preview iframe
Copy URL: Copy the development server URL to clipboard
Open in Browser: Open the application in your default browser
Stop Dev Server: Stop the running development server

Dev Server Logs

At the bottom of the Preview panel, you'll find Dev Server Logs that can be expanded or collapsed. These logs show real-time output from your development server, making it easy to monitor server activity, errors, and debugging information without leaving the preview.

Component Selection

When the Web Companion is installed, you can precisely select UI components for targeted feedback:

<Steps> <Step title="Activate Selection Mode"> Click the floating Vibe Kanban companion button in the bottom-right corner of your application to activate component selection mode. <Frame> </Frame> </Step> <Step title="Choose Component Depth"> When you click a component, Vibe Kanban shows a hierarchy of components from innermost to outermost. Select the appropriate level for your feedback:

Inner components: For specific UI elements (buttons, inputs)
Outer components: For broader sections (cards, layouts)

<Frame> </Frame> </Step> <Step title="Provide Targeted Feedback"> After selecting a component, write your follow-up message. The coding agent will receive: - **Precise DOM selector** information - **Component hierarchy** and source file locations - **Your specific instructions** about what to change <Check> No need to describe "the button in the top right" - the agent knows exactly which component you mean! </Check> </Step> </Steps>

Troubleshooting

If the preview doesn't load automatically, ensure your development server prints the URL to stdout/stderr for automatic detection.

Supported URL formats:

http://localhost:3000
https://localhost:3000
http://127.0.0.1:3000
http://0.0.0.0:5173

<Note> URLs using `0.0.0.0` or `::` are automatically converted to `localhost` for embedding. </Note>

New Task Attempts - Learn about task attempt lifecycle
Reviewing Code Changes - Analyse and review code modifications
Configuration & Customisation - Customise Vibe Kanban settings