← Blog

Add realtime WebSockets with Claude Code in ten minutes

· Hibira

Connect Claude Code to the Hibira MCP server and let it create an app, fill in your .env, wire up pusher-js and prove the first event arrives.

Adding realtime to an app is mostly plumbing: create credentials, put them in the right env file, configure a client library, authorize private channels, and then check that an event actually arrives. That's exactly the kind of work an AI coding agent does well, as long as it can reach the service. The Hibira MCP server gives it that reach.

This post uses Claude Code. Cursor, VS Code, Claude and ChatGPT work the same way; the MCP server page has the setup for each.

What the agent can do

Through the Model Context Protocol, Hibira offers nine tools. The agent can read your plan and apps, create and update apps, read usage, publish a test event, watch the debug console, and fetch the integration guide for your framework with your app's ID and key filled in. It can't delete apps or rotate secrets, and it never sees an existing app's secret.

Step 1: add the server

You need a Hibira account; the free plan is enough. In your project folder, run:

claude mcp add --transport http hibira https://hibira.io/mcp

The first time Claude Code uses the server, it opens a Hibira page in your browser. Sign in, choose read only or read and write, and approve. If it doesn't open on its own, run /mcp in Claude Code and choose to authenticate the hibira server. Setting up a new app needs write access.

Step 2: ask for what you want

Be specific about your stack and where you'll run it. For a Laravel app with a Vite front end:

Add Hibira realtime to this Laravel app. Create an app called "shop-dev" that allows http://localhost:5173, put the keys in .env, set up Laravel Echo, and broadcast OrderShipped on a private orders channel.

What happens next is the agent's own plan, but it usually goes like this:

  1. get_account to see the plan and the WebSocket host.
  2. create_app with the name and allowed origin. The secret comes back once, and the tool tells the agent to write it straight into your git-ignored .env.
  3. get_integration_guide for laravel, which returns the Echo configuration, the .env keys and the steps for private channels, with your values filled in.
  4. Edits to .env, config/broadcasting.php, resources/js/echo.js and routes/channels.php, and a new broadcast event.

Review the diff as you would any other change. The edits are ordinary Laravel; nothing in your code depends on the agent afterwards.

Step 3: prove an event arrives

This is where the debug console earns its keep. Ask:

Open the app in the browser, then send a test OrderShipped event to private-orders.1 and tell me whether a subscriber received it.

The agent calls send_test_event, which publishes like your server would, and watch_debug_events, which listens to the app's debug console for up to 30 seconds and reports connections, subscriptions and messages. If nothing was subscribed, it can see that too, which usually points at the auth endpoint or the allowed origins.

On the Free plan the debug console shows connections, subscriptions and published messages; paid plans add client events, webhooks and errors.

Day-to-day questions

Once connected, the server is useful beyond setup:

  • "How close are my apps to their daily message limit?" uses get_usage.
  • "Why are browsers on staging.example.com refused?" uses get_app to read the allowed origins, and update_app to fix them if you agree.
  • "Turn on client events for shop-dev so typing indicators work" is one update_app call.

Keeping it safe

  • Read only when you can. Grant read and write while you set things up, and read only for everyday questions.
  • Tokens for agents without a browser. CI jobs and remote agents can use a personal access token instead of signing in. Make one on the AI agents page, limit it to one app, and give it an expiry date:
claude mcp add --transport http hibira https://hibira.io/mcp \
  --header "Authorization: Bearer hkb_pat_..."
  • Revoke at any time. The AI agents page lists every connected agent and token; revoking one takes effect immediately.
  • Test events are real messages. They count toward your plan's daily limit like any other publish, and the server allows a few per second per account.

Try it

Sign up for the free plan, add the server, and ask your agent to wire up the framework you use. If it gets stuck, the integration guides show the same setup by hand.