…

vibe-coding

This article is not really an opinion piece about whether vibe coding is good or bad. I’m using it unashameably now. As a complete beginner is gets you into the fray quicker and as an experienced developer it can drasticly speed up your work.

There are many pitfalls and huge bills to rack up, I think windsurf is probably the most cost effective route to successful vibecoding. Claude code is amazingly expensive…

Phoenix, elixir vibecoding#

One of my favourite languages to program in is Elixir…

So far I’ve had success using phind.com and providing context like this:

find ./lib -type f -name "*" -exec sh -c 'echo "=== $1 ==="; cat "$1"; echo ""' _ {} \; > ./lib.txt

To get a text output including file names.. then asking for features… then going “please continue from where you left off” until all the code gets returned.

Then I integrate the code by hand and battle through syntax errors by feeding stack traces and errors back into phind.

It’s labourious but wierdly powerful when you get the hang of it.

For a $20 a month flat fee subscription it’s a valid and cost effective method.

Masochism#

This turns out to be a masochistic way of doing things.. I was playing around with the idea of having an Elixir package that automatically fed the errors back and avoiding this copy-paste effort.

This was always in the pipeline but now it turns out this has been solved by MCP.

Tidwave -> hot off the press!#

The creator of Elixir Jose Valim and Dashbit have released tidewave which is basically an Elixir Phoenix integration that allows external AI or agents to control and code your app via MCP.

Using claude code#

I am on Linux so I can’t use Claude Desktop and claude code is probably more appropriate due to its agentic coding abilities.

Obtain your anthropic API key and get access to claude code… then proceed to install it.

Install Claude code#

npm install -g @anthropic-ai/claude-code

Working with Phoenix and LiveView#

Add tidewave to your Phoenix app via the mix.exs dependencies…


def deps do
  [
    {:tidewave, "~> 0.1", only: :dev}
  ]
end

Add the tidewave plug your endpoint.ex

plug Tidewave

Run your app to enable the MCP routes at /tidewave/mcp

cd ./your_project
mix deps.get
mix phx.server

Now you can specify the MCP route before running claude…

claude mcp add --transport sse tidewave http://localhost:4000/tidewave/mcp
claude

Vibing in full effect#

It can understand what page your looking at “in theory” due to the MCP integration but it struggled to find non live view pages I was looking at in practice because it was trying to look for active liveView configuration.

It is still necessary to paste in errors and coerce things from time to time but as a force multiplier I don’t see the point in not using AI assist if everyone else is doing it.

Other MCP clients#

Other MCP clients are available which opens up tidewave to many other LLM providers.

windsurf + tidewave#

I also connected tidewave to windsurf which works equally well. Just add the tidewave MCP endpoint: http://localhost:4000/tidewave/mcp to the windsurf MCP configuration:

windsurf is about $20 dollars a month.. I would recommend getting phind.com + windsurf. Claude code is good if you can afford it.

End#

You have used up all your tokens.

vibecoding with tidewave