docs: add PowerSync DevTools guides for Vite, Nuxt, and Node.js

.github/vale/config/vocabularies/PowerSync/accept.txt

@@ -329,3 +329,5 @@ PWAs
 XCFramework
 growable
 ps_crud
+loopback
+oplog

client-sdks/frameworks/nuxt.mdx

@@ -63,10 +63,6 @@ export default defineNuxtConfig({
 });
 ```
 
-<Warning>
-  If you are using Tailwind CSS in your project, see [Known Issues](/tools/nuxt-inspector#known-issues) on the Nuxt Inspector page.
-</Warning>
-
 ## Configure PowerSync in Your Project
 
 ### Define your Schema
@@ -164,13 +160,14 @@ export class PowerSyncConnector implements PowerSyncBackendConnector {
 Create a [Nuxt plugin](https://nuxt.com/docs/guide/directory-structure/plugins) at `plugins/powersync.client.ts`. The `.client.ts` suffix ensures this only runs in the browser.
 
 ```typescript plugins/powersync.client.ts
-import { NuxtPowerSyncDatabase, createPowerSyncPlugin } from '@powersync/nuxt';
+import { PowerSyncDatabase } from '@powersync/web';
+import { createPowerSyncPlugin } from '@powersync/nuxt';
 import { AppSchema } from '~/powersync/AppSchema';
 import { PowerSyncConnector } from '~/powersync/PowerSyncConnector';
 
 export default defineNuxtPlugin({
   async setup(nuxtApp) {
-    const db = new NuxtPowerSyncDatabase({
+    const db = new PowerSyncDatabase({
       database: {
         dbFilename: 'my-app.sqlite'
       },
@@ -285,4 +282,4 @@ const lists = await db.selectFrom('lists').selectAll().execute();
 
 ## DevTools
 
-The `@powersync/nuxt` module includes a PowerSync diagnostics panel that integrates with Nuxt DevTools. It shows sync status, local data, config, and logs. See [Nuxt DevTools Integration](/tools/nuxt-inspector) for setup instructions and available views.
+The `@powersync/nuxt` module adds PowerSync DevTools to Nuxt DevTools. It shows the sync status, buckets, Sync Streams, local data, the schema, and logs. Read [PowerSync DevTools for Nuxt](/tools/devtools/nuxt) to set it up.

docs.json

@@ -332,7 +332,8 @@
                   "client-sdks/reference/flutter",
                   "client-sdks/frameworks/flutter-web-support",
                   "client-sdks/orms/flutter-orm-support",
-                  "client-sdks/reference/flutter-api"
+                  "client-sdks/reference/flutter-api",
+                  "tools/dart-devtools-extension"
                 ]
               },
               {
@@ -526,17 +527,25 @@
               "tools/cli",
               "tools/powersync-dashboard",
               "tools/diagnostics-client",
-              "tools/local-development",
-              "tools/terraform",
-              "tools/ai-tools",
               {
                 "group": "DevTools",
                 "pages": [
                   "tools/devtools-overview",
-                  "tools/dart-devtools-extension",
-                  "tools/nuxt-inspector"
+                  {
+                    "group": "Set Up",
+                    "pages": [
+                      "tools/devtools/vite",
+                      "tools/devtools/nuxt",
+                      "tools/devtools/node"
+                    ]
+                  },
+                  "tools/devtools/using-devtools",
+                  "tools/devtools/mcp"
                 ]
-              }
+              },
+              "tools/local-development",
+              "tools/terraform",
+              "tools/ai-tools"
             ]
           },
           {
@@ -588,6 +597,10 @@
     }
   },
   "redirects": [
+    {
+      "source": "/tools/nuxt-inspector",
+      "destination": "/tools/devtools/nuxt"
+    },
     {
       "source": "/overview-1",
       "destination": "/intro/powersync-overview"

tools/ai-tools.mdx

@@ -63,6 +63,10 @@ npx add-mcp https://docs.powersync.com/mcp
 
 Or add the URL manually in your AI tool's MCP settings. You can also use the contextual menu on any docs page for quick access — it includes options to copy the server URL or connect directly to Cursor or VS Code.
 
+<Tip>
+  To give an agent access to your running app's PowerSync client, use the [PowerSync DevTools MCP tools](/tools/devtools/mcp).
+</Tip>
+
 ### Full Documentation Text
 
 For broad context about PowerSync, we provide two plain-text versions of the full documentation:

tools/devtools-overview.mdx

@@ -1,36 +1,83 @@
 ---
-title: "DevTools Integrations"
-description: "IDE and framework DevTools integrations for inspecting PowerSync client-side databases and sync state during development."
+title: "PowerSync DevTools"
+description: "Inspect the live state of your app's PowerSync client during development, in your browser DevTools or through MCP tools for coding agents."
 sidebarTitle: "Overview"
 ---
 
-PowerSync currently provides DevTools integrations for Dart/Flutter and Nuxt. These embed a diagnostics panel into your existing IDE or framework tooling, so you can inspect your app's local database, Sync Stream state, and JWT credentials without launching a separate tool. They are available in development builds only.
-
 <Info>
-  Support for additional frameworks is under consideration. If you'd like to see a specific integration, submit an idea or vote for it on the [PowerSync Roadmap](https://roadmap.powersync.com).
+  PowerSync DevTools is currently available for [Vite](/tools/devtools/vite), [Nuxt](/tools/devtools/nuxt), and [Node.js](/tools/devtools/node) apps.
 </Info>
 
-<CardGroup>
-  <Card title="Dart & Flutter DevTools" icon="flutter" horizontal href="/tools/dart-devtools-extension">
-    Inspect databases, run SQL queries, and view Sync Stream state inside Dart & Flutter DevTools.
+Use PowerSync DevTools to:
+
+- Check that the client is connected and up to date, and see sync errors.
+- Look at the data on the device, and run SQL on it.
+- See which buckets and Sync Streams the client syncs, and how far each one has downloaded.
+- See the local changes that wait to upload.
+- Inspect the client configuration, such as the endpoint, user ID, connection parameters, and schema.
+- Read the SDK logs.
+- Test offline behavior: disconnect, reconnect, or clear and re-sync.
+
+Coding agents can query the same client and run sync actions through [MCP tools](/tools/devtools/mcp) when you use Vite, Nuxt DevTools 4, or Node.js.
+
+DevTools runs in development only and adds nothing to a production build.
+
+<Frame caption="PowerSync DevTools in the Vite DevTools dock.">
+  ![PowerSync DevTools panel showing the Sync Status tab](/images/tools/devtools-vite-dock.png)
+</Frame>
+
+## How It Works
+
+Your Vite or Nuxt dev server serves DevTools. In a Node.js app, your app process serves it instead.
+
+```mermaid
+flowchart LR
+  App["Your app<br/>(browser tab or Node process)"] -- "live database" --> Host["Dev server<br/>(Vite, Nuxt, or your Node app)"]
+  Host --> UI["DevTools window"]
+  Host --> Agent["Coding agent<br/>(MCP)"]
+```
+
+DevTools reads from the database that your app has open, so it shows the same data that your app sees.
+
+## Set Up DevTools
+
+<CardGroup cols={3}>
+  <Card title="Vite" icon="bolt" href="/tools/devtools/vite">
+    React, Vue, Svelte, or any web app that uses Vite 7 or later.
   </Card>
 
-  <Card title="Nuxt DevTools" icon="vuejs" horizontal href="/tools/nuxt-inspector">
-    Inspect sync status, local data, config, and logs inside Nuxt DevTools.
+  <Card title="Nuxt" icon="vuejs" href="/tools/devtools/nuxt">
+    Nuxt apps that use `@powersync/nuxt` with Nuxt DevTools 3 or 4.
+  </Card>
+
+  <Card title="Node.js" icon="node-js" href="/tools/devtools/node">
+    Node.js apps that use `@powersync/node`.
   </Card>
 </CardGroup>
 
-## DevTools vs. Sync Diagnostics Client
+<Info>
+  Support for more platforms is under consideration. To ask for a specific integration, submit an idea or vote for it on the [PowerSync Roadmap](https://roadmap.powersync.com).
+</Info>
 
-The DevTools integrations and the [Sync Diagnostics Client](/tools/diagnostics-client) serve different purposes and complement each other.
+## Usage and MCP Tools
 
-The DevTools integrations connect to your app's running process and show you what is happening on the client — local SQLite data, sync state, and any issues within the app itself.
+<CardGroup cols={2}>
+  <Card title="Using DevTools" icon="table-columns" href="/tools/devtools/using-devtools">
+    What each tab is for and which actions you can run.
+  </Card>
+
+  <Card title="MCP Tools" icon="robot" href="/tools/devtools/mcp">
+    Give a coding agent access to your app's live PowerSync client.
+  </Card>
+</CardGroup>
+
+## DevTools vs. Sync Diagnostics Client
 
-The Sync Diagnostics Client connects via a user JWT and PowerSync endpoint. It shows sync-level data — table, row, operation and bucket counts, and stream subscriptions — as seen through the sync connection.
+Use DevTools to inspect the client in your running app. Use the [Sync Diagnostics Client](/tools/diagnostics-client) to see the data that the Service syncs to a specific user. You can use both in tandem.
 
-|  | DevTools integrations | Sync Diagnostics Client |
+|  | PowerSync DevTools | Sync Diagnostics Client |
 | --- | --- | --- |
-| **How it connects** | Directly to your app's running process | Via a user JWT + PowerSync endpoint |
-| **What you inspect** | Local SQLite data and sync state within the app | Sync-level data: buckets, operations, stream subscriptions |
+| **How it connects** | To your running app | With a user JWT and the PowerSync endpoint |
+| **What you inspect** | Local SQLite data and sync state in your app | Sync data: buckets, operations, stream subscriptions |
 | **Environment** | Development only | Any environment |
-| **SDK-specific** | Yes (Dart/Flutter, Nuxt) | No — works with all SDKs |
+| **SDK-specific** | Yes | No. It works with all SDKs. |

tools/devtools/mcp.mdx

@@ -0,0 +1,129 @@
+---
+title: "PowerSync DevTools MCP Tools"
+description: "Give a coding agent access to your app's live PowerSync client through the PowerSync DevTools MCP endpoint."
+sidebarTitle: "MCP Tools"
+---
+
+PowerSync DevTools exposes MCP (Model Context Protocol) tools that let a coding agent, such as Claude Code or Codex, query your app's local database, read its sync status, and run sync actions, such as reconnect or clear the local data.
+
+<Note>
+  These tools work with your running app. To let an agent search the PowerSync documentation, use the [docs MCP server](/tools/ai-tools#mcp-server) instead.
+</Note>
+
+## Endpoints
+
+| Host | Endpoint |
+| --- | --- |
+| Vite | `http://localhost:5173/__devtools/__mcp` (use your dev server port) |
+| Nuxt DevTools 4 | `http://localhost:3000/__devtools/__mcp` (use your dev server port) |
+| Node.js | `<url>/__mcp`, where `url` is the value that `enablePowerSyncDiagnostics()` returns |
+
+Nuxt DevTools 3 does not have an MCP endpoint.
+
+On the web, the tools get the database from an open app tab. Keep your app open in a browser that Vite DevTools trusts, or the tools return an error.
+
+For a Node.js app, set a fixed `port` in `enablePowerSyncDiagnostics()` so that the endpoint stays the same when your app restarts.
+
+## Connect a Coding Agent
+
+The endpoint accepts only requests that have a loopback `Origin` header, such as `http://localhost:5173`. Some MCP clients do not send this header, so add it to the client configuration.
+
+For example, to add the Vite endpoint to Claude Code:
+
+```bash
+claude mcp add --transport http powersync-devtools http://localhost:5173/__devtools/__mcp --header "Origin: http://localhost:5173"
+```
+
+If your MCP client cannot send the header, set `allowedOrigins: false`. Read [Origin and Authorization](#origin-and-authorization).
+
+<Tip>
+  Coding agents such as Claude Code can add the server themselves. Start your dev server, open your app, and give the agent a prompt like this one:
+
+  ```text
+  Connect to the PowerSync DevTools MCP server of my running app.
+  The endpoint is http://localhost:5173/__devtools/__mcp. It uses the Streamable HTTP transport.
+  Every request must send the header "Origin: http://localhost:5173".
+  Add the server, then call powersync_sources and powersync_status and tell me the sync state.
+  ```
+
+  Change the URL and the port to match your host. Some agents must restart before they can use a new MCP server.
+</Tip>
+
+## Tools
+
+The tools take positional arguments named `arg0` and `arg1`. The last argument of most tools is the database ID. Pass `null` to use the first attached database, or call `powersync_sources` to list the IDs.
+
+| Tool | Arguments | Returns |
+| --- | --- | --- |
+| `powersync_sources` | None | The attached databases, with their ID and SDK. |
+| `powersync_query` | `arg0`: `{ sql, params? }`<br />`arg1`: database ID or `null` | `{ columns, rows }`. Each row is an array in column order. |
+| `powersync_schema` | `arg0`: database ID or `null` | The schema, as the PowerSync SQLite core receives it. |
+| `powersync_info` | `arg0`: database ID or `null` | The endpoint, the token, the client ID, the connection method, and the core version. |
+| `powersync_status` | `arg0`: database ID or `null` | The last sync status that the client reported. |
+| `powersync_upload-queue` | `arg0`: database ID or `null` | The number and size of the local changes that wait to upload. |
+| `powersync_action` | `arg0`: `{ action, args? }`<br />`arg1`: database ID or `null` | Runs one of these actions: `reconnect`, `disconnect`, `clearData`, `requestCheckpoint`, `subscribeStream`, `unsubscribeStream`. |
+
+For `subscribeStream` and `unsubscribeStream`, `args` is `{ name, params?, ttl?, priority? }`.
+
+<Warning>
+  `powersync_query` can change data. `powersync_action` with `clearData` deletes the local data, including the local changes in the upload queue, and downloads the data again. `powersync_info` returns the current JWT. Give these tools only to agents that you trust.
+</Warning>
+
+## Origin and Authorization
+
+To change how the endpoint checks requests, use the `mcp` setting:
+
+| Value | Result |
+| --- | --- |
+| `'auto'` | The default. The endpoint accepts requests with a loopback `Origin` header. |
+| `{ allowedOrigins: false }` | The endpoint also accepts requests without an `Origin` header. Use this only when the server listens on `localhost`. |
+| `{ authorization: '<token>' }` | Requests must also send `Authorization: Bearer <token>`. Read the token from an environment variable. |
+| `false` | Turns off the endpoint. |
+
+Set it in your host:
+
+<Tabs>
+  <Tab title="devtools option (Vite 8.3+)">
+    ```typescript
+    export default defineConfig({
+      devtools: { apply: 'serve', mcp: { allowedOrigins: false } },
+      plugins: [powersyncDevtools()]
+    });
+    ```
+  </Tab>
+  <Tab title="DevTools() plugin (Vite 7+)">
+    ```typescript
+    export default defineConfig({
+      plugins: [...(await DevTools({ mcp: { allowedOrigins: false } })), powersyncDevtools()]
+    });
+    ```
+  </Tab>
+  <Tab title="Nuxt DevTools 4">
+    ```typescript
+    export default defineNuxtConfig({
+      vite: {
+        devtools: { mcp: { allowedOrigins: false } }
+      }
+    });
+    ```
+  </Tab>
+  <Tab title="Node.js">
+    ```typescript
+    const devtools = await enablePowerSyncDiagnostics(db, { mcp: { allowedOrigins: false } });
+    ```
+  </Tab>
+</Tabs>
+
+## Test the Endpoint
+
+Use `curl` to check that the endpoint works. This example counts the operations in the local oplog:
+
+```bash
+curl -X POST http://localhost:5173/__devtools/__mcp \
+  -H 'Origin: http://localhost:5173' \
+  -H 'Content-Type: application/json' \
+  -H 'Accept: application/json, text/event-stream' \
+  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"powersync_query","arguments":{"arg0":{"sql":"SELECT count(*) AS operations FROM ps_oplog"},"arg1":null}}}'
+```
+
+If the response is `403 Forbidden`, the request has no loopback `Origin` header.