# Build with AI (https://docs.salla.dev/twilight/react/start/build-with-ai) An AI coding assistant builds a theme faster when it can do three things: **know** the platform, **act** on your partner account, and **read** these docs. Salla provides the first two. These docs provide the third. | Piece | What it gives the assistant | Where it comes from | | ------------------------ | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | **Agent kit** (skills) | Step-by-step workflows, such as the `salla-theme-builder` skill | [`SallaApp/salla-partners-agent-kit`](https://github.com/SallaApp/salla-partners-agent-kit) | | **Partners MCP** (tools) | Actions on your account: list, inspect and create themes | `https://partners.mcp.salla.dev` | | **These docs** | The Twilight engine reference, through the `salla_themes_docs` tool | Step 3 below | | **Salla CLI** | Running your theme on your machine | [Local development](https://docs.salla.dev/twilight/react/local-development) | Skills tell the assistant *how*. The MCP lets it *do*. You can use skills alone as a reference, but connecting the MCP is what lets the assistant act for you. ## 1. Install the agent kit [#1-install-the-agent-kit] You need a [Salla Partners](https://salla.partners) account and a supported client. Pick yours: ```bash title="Claude Code" claude plugin marketplace add SallaApp/salla-partners-agent-kit ``` ```bash title="Cursor, Copilot, Codex" npx plugins add SallaApp/salla-partners-agent-kit ``` ```bash title="Gemini CLI" gemini extensions install https://github.com/SallaApp/salla-partners-agent-kit ``` The Gemini extension also wires the Partners MCP, so Gemini needs no separate step 2. ## 2. Connect the Partners MCP [#2-connect-the-partners-mcp] The Partners MCP is a remote server. Add it once, then sign in from your browser. The login lasts about 14 days and renews on its own. ```bash title="Claude Code" claude mcp add --transport http salla-partners https://partners.mcp.salla.dev ``` Then run `/mcp` in Claude Code and authorize. For other clients, add this to the MCP config file (Cursor: `~/.cursor/mcp.json` or `.cursor/mcp.json`): ```json title="MCP configuration" { "mcpServers": { "salla-partners": { "type": "http", "url": "https://partners.mcp.salla.dev" } } } ``` In Claude Desktop use Settings, then Connectors, then **Add custom connector**, and paste the same URL. ## 3. The docs come with it [#3-the-docs-come-with-it] The Partners MCP has a second theme tool, `salla_themes_docs`, that searches and reads these docs. There is nothing more to connect: the same server and the same login give the assistant both your account and the Twilight engine reference, so it can look things up instead of guessing. | Action | What it does | | -------- | ----------------------------------------------------------------------------------------- | | `search` | Finds pages, for example "add a custom route". Returns the title, the link and a snippet. | | `read` | Reads one page as Markdown. | | `list` | Returns the index of every page. | Tell the assistant to use it before writing theme code, for example "check the Twilight docs first". ### Without the Partners MCP [#without-the-partners-mcp] The Partners MCP is the one place these docs are served to assistants, so there is no second server to set up. Any assistant can still read the pages as plain text: * Add `.md` to any page address, for example `https://docs.salla.dev/twilight/react/guide/settings.md`. Each page also has a **Copy Markdown** button. * `https://docs.salla.dev/twilight/react/llms.txt` is a map of every page, for an assistant that fetches by address. ## What the theme tool can do [#what-the-theme-tool-can-do] Theme work goes through two tools: `salla_themes` for your account and `salla_themes_docs` for these docs. | You want to | Use | Notes | | ------------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | List or search your themes | `salla_themes action=list` | Filter by name, status (`development`, `live`, `archive`) and type (`store`, `landing`, `bundle`). | | Read a theme's record | `salla_themes action=get` | Price, status, repository, preview store. | | Read its components and settings | `salla_themes action=github_config` | Returns `components`, `settings`, `features`, `tags` and `templates` from the theme's `twilight.json`. This is the only way to read them. | | Look up category ids | `salla_themes action=categories` | Needed to create a theme. | | Look something up in these docs | `salla_themes_docs action=search` | Then `action=read`. Read-only, needs no theme permission. | | Create a theme | `salla_themes action=create` | Creates the theme **and** a private GitHub repository. | | Run it locally | [`salla theme dev`](https://docs.salla.dev/twilight/react/local-development/run-locally) | The CLI, not the MCP. | | Change price, details, components, settings, or publish | The Partners Portal | Not in the MCP yet. See the warning below. | Do not ask the assistant to push settings or components some other way. The Portal's settings write **replaces the whole settings list**, so sending one setting deletes the rest. Make those changes in the [Partners Portal](https://portal.salla.partners). ## Try it [#try-it] Describe the goal in plain words. The agent kit routes to the theme skill on its own. If it does not, name the skill: "use the salla-theme-builder skill". * "List my themes that are in development." * "Show me the components and settings of theme 1234." * "Create a store theme called Acme Fashion, support email [dev@acme.example](mailto:dev@acme.example)." * "Read the Twilight docs and explain how to add a page to my theme." ## Creating a theme with the assistant [#creating-a-theme-with-the-assistant] The assistant follows the same steps each time and stops for your confirmation at each gate. ### Check you can reach themes [#check-you-can-reach-themes] It runs `list`. A success means your session is valid and your role can see themes. ### Collect the details [#collect-the-details] You give an English name (up to 50 characters, unique across all Salla themes), an Arabic name, a support email and the type. Categories are optional (one to three). ### Pick the GitHub account [#pick-the-github-account] The repository is created under a GitHub App installation. With one installation it is used automatically. With none, the assistant gives you the install link and stops. With several, it asks you which account should own the repository. ### Confirm, then create once [#confirm-then-create-once] The assistant shows the exact values and waits for a clear yes. Creating a theme also creates a repository, so it is never repeated blindly. After a timeout it checks `list` first, because the first call may have succeeded. ### Set the real price [#set-the-real-price] Every new theme is created with a price of **250**, whatever you asked for. Set the real price on the theme's page in the Partners Portal before you publish. Public themes can cost 250 to 50,000 and private themes 1,000 to 50,000. ### Develop it locally [#develop-it-locally] Clone the repository, then [run it with the CLI](https://docs.salla.dev/twilight/react/local-development/run-locally) and [link a store](https://docs.salla.dev/twilight/react/local-development/link-a-store). When it is ready, [publish it](https://docs.salla.dev/twilight/react/local-development/publish). ## When something fails [#when-something-fails] | What you see | What it means | Do this | | ------------------------------------------ | -------------------------------------- | -------------------------------------------------------------------------------------------- | | Tools do not appear | The MCP is not connected | Check it in your client (Claude Code: `/mcp`). The URL is `https://partners.mcp.salla.dev`. | | 401 on every call | The session expired | Sign in to the MCP again. | | 403 | Your role lacks the theme permission | The company owner grants `manage-themes` in the Partners Portal. Reconnecting does not help. | | 401 on `get` or `create`, but `list` works | Your company is not enabled for themes | Ask Salla to enable themes for your account. Reconnecting does not help. | | "No GitHub App installation" | Nothing can own the repository | Install the GitHub App from the link in the message, then create again. Nothing was created. | | A field error on `name` | The name is taken | Agree a different name, then create again. | ## See also [#see-also] * [Create a theme](https://docs.salla.dev/twilight/react/local-development/create-a-theme): the CLI route, which needs no Partners account to start. * The kit's own [getting started guide](https://github.com/SallaApp/salla-partners-agent-kit/blob/master/docs/getting-started.md).