Tidewave

Tidewave is the coding agent for full-stack web app development. Integrate Claude Code, OpenAI Codex, and other agents with your web app and web framework at every layer, from UI to database. See our website for more information.

This project supports:

• TanStack Start with React
• Vite with React/Vue (which includes Astro, VitePress, etc)

If you are using React/Vue with Django, FastAPI, Flask, Phoenix, or Rails, follow the steps here instead.

This project can also be used through the CLI or as a standalone Model Context Protocol server.

Installation

TanStack Start

If you are using TanStack Start with React, install Tidewave with:

$ npm install -D tidewave
# or
$ yarn add -D tidewave
# or
$ pnpm add --save-dev tidewave
# or
$ bun add --dev tidewave

Then configure your vite.config.js (also works for .ts and .mjs):

import { defineConfig } from 'vite';
import tidewave from 'tidewave/vite-plugin';

export default defineConfig({
  plugins: [tidewave()],
});

And finally create or modify src/start.ts file to import Tidewave in development:

import { createStart } from '@tanstack/react-start';

// Import Tidewave only in development.
if (process.env.NODE_ENV === 'development' && typeof window === 'undefined') {
  import('tidewave/tanstack');
}

export const startInstance = createStart(() => {
  return {};
});

Now make sure Tidewave is installed and you are ready to connect Tidewave to your app.

Vite

If you are building a frontend application with React or Vue, using a backend as a service, such as Supabase, or a non-officially supported web framework, we recommend using our Vite integration.

Install it with:

$ npm install -D tidewave
# or
$ yarn add -D tidewave
# or
$ pnpm add --save-dev tidewave
# or
$ bun add --dev tidewave

Then configure your vite.config.js (also works for .ts and .mjs):

import { defineConfig } from 'vite';
import tidewave from 'tidewave/vite-plugin';

export default defineConfig({
  plugins: [tidewave()],
});

Now make sure Tidewave is installed and you are ready to connect Tidewave to your app.

Our Vite integration for React and Vue allows Tidewave Web to perform changes on the front-end, and the agent will be able to modify your backend code as usual, but some functionality (such as accessing logs, doing database calls, etc) won't be available. You can also use our Figma Dev Mode and Supabase integration for additional features.

Configuration

Vite's tidewave accepts the configuration options below:

• allowRemoteAccess: Tidewave only allows requests from localhost by default, even if your server listens on other interfaces, for security purposes. Read our security guidelines for more information and when to allow remote access (if you know what you are doing)
• allowedOrigins: a list of values matched against the Origin header to prevent cross origin and DNS rebinding attacks. Each value must be a string of shape [scheme:]//host[:port], where both scheme and port are optional. The host may also start with *. Example: ["//localhost:8000", "//*.test"]. By default, Tidewave allows Vite's configured server host and port, using localhost when Vite uses its implicit host
• tmpDir: temporary directory Tidewave uses for screenshots and recordings. Defaults to tmp, storing files under tmp/tidewave/screenshots and tmp/tidewave/recordings
• team: enable Tidewave Web for teams

Available tools

• get_docs - get the documentation for a given module/namespace or a class/interface/enum/type in that namespace. It consults the exact versions used by the project, ensuring you always get correct information

• get_source_location - get the source location for a given module/namespace or a class/interface/enum/type in that namespace, so an agent can directly read the source skipping search

• get_logs - reads console log written by the server

• project_eval - evaluates code within the runtime itself, giving the agent access to dependencies, server code, and all in-memory data

CLI

Tidewave.js also comes with a CLI for developers who want to use it as a standalone MCP or query its functionality directly. Note this functionality is separate from Tidewave Web.

STDIO MCP

Configure your editor to run tidewave in the same directory as your package.json as a STDIO MCP Server:

npx tidewave mcp
# or with Bun
bunx tidewave mcp
# or with Deno
deno run npm:tidewave mcp

Available options:

• --prefix path - Specify the directory to find the package.json file

Get docs / get source

Fetch docs or retrieve the source location for classes, types, methods, etc:

# Extract documentation for a symbol
npx tidewave docs <module-path>

# Get source file location for a module
npx tidewave source <module-path>

Here are some examples:

# Local TypeScript/JavaScript files
npx tidewave docs ./src/utils
npx tidewave docs ./src/utils:formatDate
npx tidewave docs ./components:Button#onClick

# Node.js dependencies
npx tidewave docs typescript:createProgram
npx tidewave docs react:Component#render

# Get source file locations
npx tidewave source ./src/utils:formatDate
npx tidewave source typescript:createProgram

Contributing

bun install              # Install dependencies
bun run build            # Compile TypeScript
bun run dev              # Run CLI with Bun
bun test                 # Run tests with Vitest
bun run lint             # ESLint checking
bun run lint:fix         # ESLint with auto-fix
bun run format           # Prettier formatting
bun run format:check     # Check Prettier formatting
bun run clean            # Clean dist directory

Acknowledgements

A thank you to Zoey for implementing the Vite integration as well as the CLI interface.

License

Copyright (c) 2025 Dashbit

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.