### Configure Devcontainer for Automatic Tidewave Startup

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/containers.md

Set up your `.devcontainer/devcontainer.json` to automatically install and run Tidewave when a container is created or started. This ensures Tidewave is available by default.

```json
{
  ...
  "postCreateCommand": "curl -sL -o /usr/local/bin/tidewave https://github.com/tidewave-ai/tidewave_app/releases/latest/download/tidewave-cli-aarch64-unknown-linux-musl && chmod +x /usr/local/bin/tidewave",
  "postStartCommand": "nohup tidewave --port 9000 > /tmp/tidewave.log 2>&1 &",
  "forwardPorts": [9000]
}
```

--------------------------------

### Install Tidewave using Igniter

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/README.md

Use the `igniter` mix archive to automatically install Tidewave into an existing Phoenix application. Ensure `igniter_new` is installed first.

```sh
# install igniter_new if you haven't already
mix archive.install hex igniter_new

# install tidewave
mix igniter.install tidewave
```

--------------------------------

### Install Tidewave MCP with HTTP Transport

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp_claude_code.md

Use the `claude` CLI to add `tidewave` with the HTTP transport. Replace `$PORT` with your web application's port.

```shell
claude mcp add --transport http tidewave http://localhost:$PORT/tidewave/mcp
```

--------------------------------

### Install and Run Tidewave CLI in Devcontainer

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/containers.md

Download and execute the Tidewave CLI within a dev container. Ensure the CLI is executable and specify the desired port for Tidewave.

```bash
$ curl -sL -o tidewave https://github.com/tidewave-ai/tidewave_app/releases/latest/download/tidewave-cli-$(uname -m)-unknown-linux-musl
$ chmod +x tidewave
$ ./tidewave --port 9000
2025-11-03T16:27:00.232551Z  INFO tidewave_core::server: HTTP server bound to 127.0.0.1:9001
```

--------------------------------

### MCP Server Configuration Example

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp.md

Configure your editor or MCP client to use the Tidewave MCP server. Specify the type as 'http' and provide the path and port where your web application is running.

```text
http://localhost:4000/tidewave/mcp
```

--------------------------------

### Dockerfile for Phoenix Development Container

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/containers.md

Sets up a Docker image with Elixir, Hex, Rebar, and necessary tools like curl, git, bash, and socat. It also downloads and installs the tidewave CLI and configures a run script for network forwarding.

```dockerfile
FROM hexpm/elixir:1.18.4-erlang-27.3.4-ubuntu-noble-20250529

RUN mix local.hex --force
RUN mix local.rebar --force

RUN apt update && apt -y install curl git bash inotify-tools socat
RUN curl -sL -o tidewave https://github.com/tidewave-ai/tidewave_app/releases/latest/download/tidewave-cli-$(uname -m)-unknown-linux-musl && \
    chmod +x tidewave && \
    mv tidewave /usr/local/bin/tidewave
RUN <<EOF cat >> /run.sh
#!/bin/sh

socat TCP-LISTEN:4001,fork TCP:localhost:4000 > /dev/null 2>&1 &
socat TCP-LISTEN:5432,fork,bind=127.0.0.1 TCP:db:5432 > /dev/null 2>&1 &
socat TCP-LISTEN:9001,fork TCP:localhost:9000 > /dev/null 2>&1 &
tidewave -p 9000 > /dev/null 2>&1 &

bash
EOF
RUN chmod +x run.sh

```

--------------------------------

### NixOS Environment Variables for Claude Code

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/providers/claude_code.md

Example environment variables for NixOS to specify custom paths for the Claude Agent ACP and Claude Code executables. This is useful for custom installations on NixOS.

```nix
TIDEWAVE_CLAUDE_AGENT_ACP_EXECUTABLE = "/run/current-system/sw/bin/claude-agent-acp"
CLAUDE_CODE_EXECUTABLE = "/run/current-system/sw/bin/claude"

```

--------------------------------

### Agent Rule Example for Tidewave MCP

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp.md

Nudge your coding agent to use Tidewave MCP tools for tasks like code evaluation and database querying. Use `get_docs` for documentation and `get_source_location` for definitions.

```text
Always use Tidewave's tools for evaluating code, querying the database, etc.

Use `get_docs` to access documentation and the `get_source_location` tool to
find module/function definitions.
```

--------------------------------

### Development Script for Docker Compose and Container Build

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/containers.md

This script orchestrates the Docker environment by first starting the compose project, then building a custom development container image, and finally running an ephemeral container with volume and port mappings.

```bash
#!/bin/sh
docker compose -f docker-compose.dev.yml up -d
docker build -f Dockerfile.dev -t tidewave-devcontainer .
docker run --rm -w $(pwd) \
  -v $(pwd):$(pwd) \
  --network my_app \
  -p 127.0.0.1:3000:3001 \
  -p 127.0.0.1:9000:9001 \
  -it tidewave-devcontainer /run.sh

```

--------------------------------

### Dockerfile for Ruby on Rails Development Environment

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/containers.md

Build a custom Dockerfile for a Ruby on Rails development environment. This includes installing necessary tools like curl, git, and bash, downloading and setting up the Tidewave CLI, and configuring shell scripts to manage port forwarding and background services.

```dockerfile
FROM ruby:3.2

RUN apt update && apt -y install curl git bash inotify-tools socat
RUN curl -sL -o tidewave https://github.com/tidewave-ai/tidewave_app/releases/latest/download/tidewave-cli-$(uname -m)-unknown-linux-musl && \
    chmod +x tidewave && \
    mv tidewave /usr/local/bin/tidewave
RUN <<EOF cat >> /run.sh
#!/bin/sh

socat TCP-LISTEN:3001,fork TCP:localhost:3000 > /dev/null 2>&1 &
socat TCP-LISTEN:5432,fork,bind=127.0.0.1 TCP:db:5432 > /dev/null 2>&1 &
socat TCP-LISTEN:9001,fork TCP:localhost:9000 > /dev/null 2>&1 &
tidewave -p 9000 > /dev/null 2>&1 &

bash
EOF
RUN chmod +x run.sh
```

--------------------------------

### Add Tidewave and Bandit to non-Phoenix Project

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/README.md

Include `tidewave` and `bandit` as development dependencies for non-Phoenix Elixir projects. This setup is for using Tidewave as a Model Context Protocol server.

```elixir
{:tidewave, ">~ 0.4", only: :dev},
{:bandit, ">~ 1.0", only: :dev},
```

--------------------------------

### Create Tidewave Alias for Bandit Server

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/README.md

Define a mix alias to easily start a Bandit server with Tidewave as the plug. This is useful for running Tidewave as a standalone MCP server.

```elixir
aliases: [
  tidewave:
    "run --no-halt -e 'Agent.start(fn -> Bandit.start_link(plug: Tidewave, port: 4000) end)'"
]
```

--------------------------------

### Proxy HTTPS with Caddy

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/https.md

Configure Caddy to proxy HTTPS requests to Tidewave. This setup assumes Tidewave is running on http://localhost:9832 and you want to expose it via https://localhost:9833.

```caddyfile
https://localhost:9833 {
    # Uncommend if you want to use Caddy's own certificate
    # tls internal

    reverse_proxy http://localhost:9832 {
        header_up Origin "https://localhost:9833" "http://localhost:9832"
    }
}
```

--------------------------------

### Docker Run Command for Host Path Mapping

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/containers.md

Demonstrates how to run a Docker container while setting the TIDEWAVE_HOST_PATH environment variable to ensure correct file path alignment between the host and the container.

```bash
docker run -e TIDEWAVE_HOST_PATH=$(pwd) ...

```

--------------------------------

### Prompt for Recording Video with Voice Narration

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/features/vision_mode.md

This prompt demonstrates how to record a video with voice narration using Tidewave. It includes steps for setting up the ElevenLabs API key and instructing the agent on what to record, with options for overlays, zoom, and disabling sound effects.

```text
Please record the following video:

overlay: This is Tidewave's video recorder.

overlay: First add your Eleven Labs API key
open up settings, focus on this element: {Selected element <div>}

overlay: Then tell your agent what to record
now close settings, focus on {Selected element <div>}
(use 2x zoom in), and type "make an awesome video!", zoom out
```

--------------------------------

### Configure MCP Hub Servers for Neovim

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp_neovim.md

Add this JSON configuration to `~/.config/mcphub/servers.json` to register your Tidewave MCP server. Replace `$PORT` with your application's running port.

```json
{
  "mcpServers": {
    "tidewave": {
      "url": "http://localhost:$PORT/tidewave/mcp"
    }
  }
}
```

--------------------------------

### Configure Tidewave CLI for HTTPS

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/https.md

Run the Tidewave CLI with options to specify the HTTPS port and certificate paths. This allows direct HTTPS configuration without a config file.

```shell
$ tidewave --https-port 9833 --https-cert-path ./cert.pem --https-key-path ./key.pem
```

--------------------------------

### Add Tidewave to mix.exs

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/README.md

Include the `tidewave` package in your project's dependencies. This is typically for development environments.

```elixir
def deps do
  [
    {:tidewave, ">~ 0.5", only: :dev},
    {:phoenix, ...},
  ]
end
```

--------------------------------

### Configure OpenRouter with Codex

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/providers/codex.md

Add this configuration to `~/.codex/config.toml` to use Codex with OpenRouter. Ensure your API key and base URL are correctly set.

```toml
model = "anthropic/claude-sonnet-4.5"
model_provider = "openrouter"

[model_providers.openrouter]
name = "Openrouter"
base_url = "https://openrouter.ai/api/v1"
http_headers = { "Authorization" = "Bearer sk-or-v1-..." }
wire_api = "chat"
```

--------------------------------

### Define Docker Compose for Development Environment

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/containers.md

Create a `docker-compose.dev.yml` file to define external services like a PostgreSQL database for your development environment. This sets up the necessary network and service configurations.

```yaml
services:
  db:
    image: postgres:16
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: my_app_dev
    volumes:
      - ./db:/var/lib/postgresql/data
    networks:
      - my_app

networks:
  my_app:
    name: my_app
```

--------------------------------

### VS Code with WSL Integration

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/integrations/editors.md

Set up a custom URL for VS Code when using WSL. This configuration utilizes __WSLDISTRO__ and __WSLFILE__ variables to correctly map paths between the WSL environment and the host.

```text
vscode://vscode-remote/wsl+__WSLDISTRO__/__WSLFILE__:__LINE__:__COLUMN__
```

--------------------------------

### Configure Zed Custom Server for Tidewave MCP

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp_zed.md

Use this JSON configuration to add Tidewave MCP as a custom server in Zed. Replace $PORT with your application's running port. This enables Zed to discover and use Tidewave tools.

```json
{
  "tidewave-mcp": {
    "url": "http://localhost:$PORT/tidewave/mcp"
  }
}
```

--------------------------------

### Configure Vite Proxy for Tidewave

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/integrations/frontend.md

Use this Vite configuration to proxy the /tidewave path to your backend server when frontend and backend are on different ports. Ensure your frontend port and backend port are correctly specified.

```javascript
export default defineConfig({
  // Works react() and vue()
  plugins: [tailwindcss(), react()],
  server: {
    port: 3001, // your frontend port
    proxy: {
      "/tidewave": `http://localhost:3000` // your backend port
    },
  },
});
```

--------------------------------

### Configure Webpack Proxy for Tidewave

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/integrations/frontend.md

Configure your webpack.config.js or webpack.dev.js to proxy the /tidewave path to your backend server. This is necessary when your frontend and backend run on different ports during development.

```javascript
module.exports = {
  devServer: {
    port: 3001, // your frontend port
    proxy: [
      {
        context: ['/tidewave'],
        target: 'http://localhost:3000' // your backend port
      }
    ]
  }
};
```

--------------------------------

### Configure Session Store for SameSite=None in Ruby on Rails

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/custom_domains.md

Add this configuration to `config/initializers/development.rb` to enable cross-domain cookie support. Ensure `rack-session` is version 2.1.0 or later.

```ruby
config.session_store :cookie_store,
  key: "__your_app_session",
  same_site: :none,
  secure: true,
  assume_ssl: true
```

--------------------------------

### Configure Phoenix LiveView for Tidewave

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/README.md

Enable debug options in `config/dev.exs` for Phoenix LiveView to ensure compatibility and proper functionality with Tidewave. These are default in Phoenix v1.8+.

```elixir
config :phoenix_live_view,
  debug_heex_annotations: true,
  debug_attributes: true
```

--------------------------------

### Configure Tidewave Plug Options

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/README.md

Configure the Tidewave plug with various options to control remote access, inspect tool results, set team configuration, and manage toolbar injection into HTML pages.

```elixir
plug Tidewave, options
```

--------------------------------

### Custom Editor URLs

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/integrations/editors.md

Configure custom URLs for editors like JetBrains IDEs to open files at specific lines. The variables __FILE__, __LINE__, and __COLUMN__ are available for dynamic path and line number insertion.

```text
idea://open?file=__FILE__&line=__LINE__
pycharm://open?file=__FILE__&line=__LINE__
```

--------------------------------

### Allow Remote Access and Specify Allowed Origins

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/remote_access.md

Use this command to enable remote access for the Tidewave CLI and specify which origins are permitted to connect. Ensure you secure your remote machine as this configuration allows direct access.

```bash
$ tidewave --allow-remote-access --allowed-origins https://example.com:9898
```

--------------------------------

### OpenCode MCP Configuration

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp_opencode.md

Add this JSON configuration to your opencode.json file to enable Tidewave MCP integration. Replace $PORT with your web application's port.

```json
{
  "mcp": {
    "tidewave": {
      "type": "remote",
      "url": "http://localhost:$PORT/tidewave/mcp",
      "enabled": true
    }
  }
}
```

--------------------------------

### Test Web Application Endpoint with Curl

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp.md

Use this command to directly query the /tidewave/mcp endpoint of your web application to check for connectivity issues. Ensure your web server is running and accessible.

```bash
curl -v http://localhost:4000/tidewave/mcp \
--header 'Content-Type: application/json' \
--header "Accept: application/json, text/event-stream" \
--data '{"jsonrpc":"2.0","id":1,"method":"ping"}'
```

--------------------------------

### Configure Tidewave App for HTTPS

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/https.md

Add these settings to your Tidewave App configuration file to enable HTTPS. Ensure you provide valid paths to your certificate and key files.

```toml
https_port = 9833
https_cert_path = "/path/to/cert.pem"
https_key_path = "/path/to/key.pem"
```

--------------------------------

### Configure Tidewave App Environment Variables

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/providers/claude_code.md

This TOML configuration is used to set environment variables for the Tidewave app, such as enabling Vertex AI or specifying the Claude Code executable path. Changes require restarting the Tidewave app.

```toml
# This file is used to configure the Tidewave app.
# If you change this file, you must restart Tidewave.

[env]
CLAUDE_CODE_USE_VERTEX = "1"
CLAUDE_CODE_EXECUTABLE = "..."

```

--------------------------------

### Configure Session Options for SameSite=None in Phoenix

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/custom_domains.md

Modify the session options in `lib/your_app_web/endpoint.ex` to support `SameSite=None; Secure` cookies. This should be added within the `if code_reloading? do` block.

```elixir
if code_reloading? do
  @session_options Keyword.merge(@session_options, same_site: "None", secure: true)
  # here goes the remaining of the code reloading configuration
end
```

--------------------------------

### Invoke MCP Proxy Directly

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp.md

Test the MCP proxy by piping a JSONRPC request to its executable. This helps verify if the proxy itself is functioning correctly before integrating it with an editor.

```bash
echo '{"jsonrpc":"2.0","id":1,"method":"ping"}' | /path/to/mcp-proxy http://localhost:$PORT/tidewave/mcp
```

--------------------------------

### Configure Session Options for Multiple Hosts

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/README.md

Use this configuration in your endpoint.ex to allow Tidewave to run embedded across multiple subdomains in a secure context. Ensure your domains are considered secure by browsers, such as *.localhost.

```elixir
@session_options [
  # ... your configuration
]

if code_reloading? do
  @session_options Keyword.merge(@session_options, same_site: "None", secure: true)
end
```

--------------------------------

### Configure Parcel Proxy for Tidewave

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/integrations/frontend.md

Create a .proxyrc.json file in your project root to configure Parcel's built-in API proxy support for the /tidewave path. This is required when your frontend and backend are served on different ports.

```json
{
  "/tidewave": {
    "target": "http://localhost:3000"
  }
}
```

--------------------------------

### Docker Container Host Path Configuration

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/integrations/editors.md

When running Tidewave Web in a Docker container, set the TIDEWAVE_HOST_PATH environment variable to map container file paths to the host machine's project directory. This ensures correct file referencing.

```bash
docker run -e TIDEWAVE_HOST_PATH=$(pwd) ...
```

--------------------------------

### Generate Self-Signed Certificate

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/https.md

Use OpenSSL to generate a self-signed certificate and key for HTTPS. This is useful for local development and testing.

```shell
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -days 365 -nodes \
  -subj "/CN=localhost" \
  -addext "subjectAltName=DNS:localhost,IP:127.0.0.1"
```

--------------------------------

### Add Tidewave MCP to Codex CLI

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/mcp/mcp_codex.md

Use this command to add Tidewave MCP as a service within the Codex CLI using the HTTP transport. Replace `$PORT` with your application's running port.

```shell
$ codex mcp add tidewave --url http://localhost:$PORT/tidewave/mcp
```

--------------------------------

### Allow Remote Access and Origins in Tidewave App

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/pages/guides/https.md

Configure the Tidewave App to allow remote access and specify allowed origins. This is crucial for accessing Tidewave from different machines or domains.

```toml
# Allow access from other machines, only enable it in safe networks
allow_remote_access = true
# Use the addresses you will insert in the browser to actually open up Tidewave 
allowed_origins = ["https://example.com:9898"]
```

--------------------------------

### Plug Tidewave into Phoenix Endpoint

Source: https://github.com/tidewave-ai/tidewave_phoenix/blob/main/README.md

Integrate Tidewave into your Phoenix application's endpoint for development mode. This allows Tidewave to connect to your running application.

```diff
+  if Mix.env() == :dev do
+    plug Tidewave
+  end

  if code_reloading? do
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.