---
title: Fast Iteration
description: "Develop Apps locally with Skybridge's DevTools and Vite HMR for instant feedback without tunneling."
---


**Problem:** Testing views in remote MCP Clients (e.g. ChatGPT, Claude, etc.) is slow. It requires HTTP tunneling, manual refreshes, and provides limited debugging feedback.

**Solution:** Skybridge includes DevTools and a Vite HMR plugin that let you develop views entirely on your machine with instant feedback.

## The Challenge

When building Apps the traditional way, your development loop looks like:

1. Make a code change
2. Restart your server
3. Start the tunnel
4. Go to Claude or ChatGPT dev mode
5. Trigger the tool manually by chatting
6. Wait for the view to load
7. See if your change worked
8. Repeat

This can take 30-60 seconds per iteration. With complex views, that adds up fast.

## The Skybridge Approach

With Skybridge, the loop becomes:

1. Make a code change
2. See it instantly in your browser

That's it. DevTools mocks the Apps SDK (ChatGPT) environment, and Vite's HMR updates your view without a full reload.

## DevTools

When you run `pnpm dev`, Skybridge starts:
- Your MCP server at `http://localhost:3000/mcp`
- DevTools UI at `http://localhost:3000/`

The DevTools UI provides:
- **Tool listing** - See all registered tools and views
- **Input forms** - Test tools with custom inputs
- **View preview** - Render views in a mocked Apps SDK (ChatGPT) environment

<Note>
**MCP Apps and DevTools**

DevTools uses the **Apps SDK runtime** (mocked `window.openai`). MCP Apps view rendering is not yet supported in DevTools. For MCP Apps, use DevTools for tool development and UI logic; validate views in a real client (e.g. [Goose](https://goose.ai/), Claude) before shipping. See [DevTools Guide](/devtools) and [Test Your App](/quickstart/test-your-app#testing-in-claude).
</Note>

<Info>
**Full DevTools Guide**

For comprehensive documentation on all DevTools features, including view inspection, MCP client logs, and custom integration, see the [DevTools Guide](/devtools).
</Info>

<img src="/images/devtools-landing.png" alt="Skybridge DevTools" style={{maxWidth: '100%', borderRadius: '8px', border: '1px solid #e0e0e0'}} />

## HMR with Vite Plugin

Skybridge includes a Vite plugin that enables Hot Module Replacement for views:

```typescript
// vite.config.ts
import { skybridge } from "skybridge/vite";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react(), skybridge()],
});
```

The plugin:
- **Auto-discovers views** in `src/views/` (both flat files and directories)
- **Enables HMR** so changes appear instantly without page reload
- **Transforms `data-llm`** attributes at build time
- **Configures build output** with proper asset paths

<Info>
**Starter template required**

These features require the Skybridge starter template structure (`pnpm create skybridge`). If you're adding Skybridge to an existing app, you'll need to configure the Vite plugin manually.
</Info>

When you save a file, only the changed component re-renders. Form inputs, scroll position, and local state are preserved.

## Automatic Environment Detection

Your view code works identically in ChatGPT, MCP Apps clients like Claude, and local DevTools. Skybridge detects the environment and uses the appropriate communication layer:

| Environment | Communication |
|-------------|---------------|
| ChatGPT | `window.openai` API |
| MCP Apps (Goose, Claude, …) | MCP protocol via postMessage |
| DevTools | Mocked Apps SDK (postMessage) |
You don't need to know which is active—just use the hooks.

## When to Use What

**DevTools (90% of development time)**
- Rapid UI iteration
- Testing tool inputs/outputs
- Debugging state management
- Day-to-day development

**ChatGPT, Claude, or other MCP Apps clients (10% of development time)**
- Final integration testing
- Real LLM conversation flow
- Verifying `data-llm` context
- Pre-ship validation

<Tip>
**Workflow**

Build locally → validate in [ChatGPT](/quickstart/test-your-app#testing-in-chatgpt) or [MCP Apps](/quickstart/test-your-app#testing-in-claude) → ship. 

See [Test Your App](/quickstart/test-your-app) for detailed testing setup instructions.
</Tip>

## DevTools Features

The DevTools UI includes:

### Tool Inspector
See all registered tools and their schemas. Click to fill input forms automatically.

### View Preview
Renders your view in an iframe with mocked `window.openai`. Supports:
- Theme switching (light/dark)
- Display mode switching (pip/inline/fullscreen)
- Locale changing


### Response Inspector
View the full tool response including `content`, `structuredContent`, and `_meta`.

## Related

- [DevTools Guide](/devtools) - Complete DevTools documentation and features
- [Test Your App](/quickstart/test-your-app) - Full testing workflow including ChatGPT and MCP Apps clients
- [useLayout API](/api-reference/use-layout) - Access theme and layout info
- [useCallTool API](/api-reference/use-call-tool) - Make tool calls from views
