Sign in

Claude Code + Liveblocks

Use Claude Code with Liveblocks to add collaborative features to your app. Install agent skills so your assistant follows Liveblocks and Yjs guidance, and use our MCP server to allow AI to inspect and modify your data, such as rooms, Storage, Yjs, comments, and more.

Setup

  1. Install agent skills

    To help AI follow best practices in your app, add Liveblocks agent skills to your system. Make sure to select Claude Code in the CLI. Global installation is easiest.

    Terminal
    npx skills add liveblocks/skills

  2. Install MCP server

    To allow AI to inspect and modify data in your project, install the Liveblocks MCP server. Run the following command in the terminal, inserting your secret key from your dashboard:

    $claude mcp add liveblocks -e LIVEBLOCKS_SECRET_KEY="" -- npx -y github:liveblocks/liveblocks-mcp-server
    Only for development

    Do not use a secret key from a production project, as AI will have direct access to delete data.

  3. Get help from your AI assistant

    You can now use your AI assistant to help you structure and debug your Liveblocks application. Here are a few examples.

    Q: Set up a Liveblocks room on this page.

    A: Certainly, I've set up a Liveblocks room on this page using RoomProvider, it has…


    Q: How many rooms are there?

    A: There are 10 rooms, the last was created 7 minutes ago. Its room ID is l8Gaj9 and…


    Q: Add placeholder comments to the l8Gaj9 room.

    A: I've filled the room with example commands and threads, following your instructions.

More information

Agent skills

Two agent skills are available to your assistant, liveblocks-best-practices and yjs-best-practices. These are collections of markdown files that detail various best practices for using Liveblocks and Yjs. We always recommend using these skills when building, debugging, or answering questions about Liveblocks and Yjs.

MCP server

Most Liveblocks REST API operations as tools, so your AI can inspect and edit rooms and data from the editor. This is helpful for fetching data when debugging, and also useful for creating placeholder content in your development app, for example you can ask AI to create new rooms and add placeholder comments and data.

Each Liveblocks project has a unique secret key, which you pass when installing the MCP server. Only data from this project can be inspected. Never use a secret key from a production project, as giving AI direct access would be dangerous, allowing it to delete your production data.

Limitations and troubleshooting

Skills do not load

Re-run npx skills add liveblocks/skills from the repo root. Ensure Claude Code can see the generated plugin files.

MCP returns auth errors

Use a secret key from the same Liveblocks project as your app. Confirm LIVEBLOCKS_SECRET_KEY in the MCP config matches that project.

MCP returns incorrect data

Check that you’re using the correct secret key for your current project. Try uninstalling and reinstalling with the correct key.

Related docs