Coding agents

1. Connect your coding agent

Choose the coding agent you already use. CoBlick runs as a remote MCP server, so there is no local CoBlick package to keep running.

Claude CodeRun one command

TerminalCopy

claude mcp add --transport http coblick-ui https://coblick.com/api/mcp

CodexAdd CoBlick, then sign in

TerminalCopy

codex mcp add coblick-ui --url https://coblick.com/api/mcp

Sign inCopy

codex mcp login coblick-ui

CursorAdd this MCP configuration

MCP configurationCopy

{
  "mcpServers": {
    "coblick-ui": {
      "url": "https://coblick.com/api/mcp"
    }
  }
}

VS CodeAdd this MCP configuration

MCP configurationCopy

{
  "servers": {
    "coblick-ui": {
      "type": "http",
      "url": "https://coblick.com/api/mcp"
    }
  }
}

Another coding agentUse the CoBlick server URL

MCP configurationCopy

{
  "mcpServers": {
    "coblick-ui": {
      "type": "http",
      "url": "https://coblick.com/api/mcp"
    }
  }
}

2. Sign in

Let the coding agent open CoBlick in your browser. Sign in, review the requested access, and choose the project it will use.

If the coding agent cannot complete browser sign-in, create an MCP access token from Connect an agent and add it to the agent. MCP access tokens start with cui_mcp_, are shown once, and expire after 90 days.

3. Search the catalog

Start with a request that asks for a small set of visible choices. Tell the coding agent not to install anything until you choose.

Find three sign-in screens for a SaaS dashboard.
Show a preview link, whether each block is Free or Pro, and the main difference between them.
Do not install anything yet.

Check the preview links yourself. If two options are close, ask the coding agent to compare those block names instead of requesting another long search result.

4. Install

Name the exact block and ask to see the planned files before the coding agent writes to your project.

Install application-login-split-with-image from https://coblick.com/r/application-login-split-with-image.
Before writing files, show which files and packages will be installed and flag any existing file that would change.
Then install the block and run the project's normal checks.

• The coding agent reads the block's implementation guide before changing files.
• It checks the block against the connected project's framework and paths.
• It calls out existing files instead of silently replacing them.
• It shows the project checks it ran after installation.

Useful prompts

• CompareCompare these two block names. Focus on responsive behavior, required data, and which existing UI files each one uses.
• Plan the integrationRead the implementation guide for this block. List the data and actions my app must provide. Do not write code yet.
• Check for updatesList updates for the blocks in this project. Show what changed and wait before replacing any file.

Block page actions

Open a block, try it at the size and theme you need, then send it to your coding agent.