Integrations

Claude Code

Give Claude Code the Ritla MCP server and a few lines in CLAUDE.md, so it reaches for Ritla UI components and checks the Arabic it writes.

Your agent already writes React and Tailwind. These two steps make it write Arabic that holds up: it picks Ritla UI components for the hard parts (phone and card fields, one-time codes, amounts, navigation that mirrors) and checks the code it writes against Ritla's checks.

Add the Ritla MCP server#

bash

claude mcp add ritla -- npx -y @ritla/mcp

Claude Code can then list components, read a component's docs, look up a check, review a snippet, and get the install command. More in MCP.

Tell it how you build#

Add a few lines to your project's CLAUDE.md, so every session starts from them:

## Arabic and RTL
- This app ships in Arabic and English. Use Ritla UI components (ritla MCP server) for
  inputs, phone, card, OTP, amounts and navigation before writing your own.
- Install with `npx ritla add <slug>`; the license key is in .env.local, never in a file you commit.
- Logical properties only (ms/me/ps/pe/start/end/text-start). No left/right classes.
- Run the ritla `check_snippet` tool on UI code you write for an Arabic screen.

Check what it shipped#

The agent's hints are static. To see the page as an Arabic reader does, scan it, or gate pull requests with npx ritla scan (see CLI).