# MCP server Wisty UI's MCP server lets your coding agent search the components, read their docs and examples, and get the command that installs them. Ask for a screen, like an account lookup on the new contact form, and the agent picks the parts. It needs no account. ## Connect your agent Add `https://ui.wisty.ai/mcp` to any MCP client, as a remote HTTP server. Where a form asks for authentication, choose none. ### Agentforce Vibes These steps follow Vibes 4.40. 1. **In VS Code, open Agentforce Vibes. Choose Toolkit, then MCP Servers.** 2. **Choose + Add Server.** 3. **Set Server Type to Remote, name it wisty-ui, paste the address into HTTP Endpoint and choose Add Server.** ```text https://ui.wisty.ai/mcp ``` 4. **Check that wisty-ui shows Connected and 5 tools.** If it doesn't yet, choose Refresh. Share it with your team in `.mcp.json`. ```json { "mcpServers": { "wisty-ui": { "type": "http", "url": "https://ui.wisty.ai/mcp" } } } ``` ### Claude For the Claude app and claude.ai, which share connectors. Connecting from Claude isn't tested yet. 1. **Add the server.** Open Customize, then Connectors. Choose + Add, then Add custom connector. Name it Wisty UI, paste the address and choose Continue. Under Authentication, choose No sign in, then Add. On Team and Enterprise plans, an owner adds it instead. They open Organization settings, then Connectors, and choose Add, then Custom, then Web. ```text https://ui.wisty.ai/mcp ``` 2. **Ask.** ```text Which Wisty UI components would you use for an account record page? ``` The first time, your agent asks to use wisty-ui. Allow it. If it calls wisty-ui and answers with Wisty UI's components, you're connected. ### Claude Code 1. **Add the server.** Run this once. It's saved for all your projects. ```bash claude mcp add --transport http --scope user wisty-ui https://ui.wisty.ai/mcp ``` 2. **Check it's connected.** In Claude Code, run `/mcp`. wisty-ui shows as connected. Share it with your team in `.mcp.json`. Commit this file to share the server with your team. Claude Code asks each person once before using it, and Agentforce Vibes reads the same file. ```json { "mcpServers": { "wisty-ui": { "type": "http", "url": "https://ui.wisty.ai/mcp" } } } ``` ### ChatGPT For the ChatGPT app on your computer. It shares its servers with the Codex CLI and editor extension, so adding Wisty UI here adds it there too. For chatgpt.com in a browser, see Other agents. Connecting from ChatGPT isn't tested yet. 1. **Add the server.** Open Settings, then MCP servers (Plugins, then MCPs, in newer versions), and choose Add server. Name it wisty-ui, pick Streamable HTTP, paste the address, save and restart. ```text https://ui.wisty.ai/mcp ``` 2. **Ask.** In a new chat in the app's Codex tab. ```text Which Wisty UI components would you use for an account record page? ``` The first time, your agent asks to use wisty-ui. Allow it. If it calls wisty-ui and answers with Wisty UI's components, you're connected. Share it with your team in `.codex/config.toml`. ```toml [mcp_servers.wisty-ui] url = "https://ui.wisty.ai/mcp" ``` ### Codex For the Codex CLI and the Codex extension in your editor. The ChatGPT app shares this setup. Connecting from Codex isn't tested yet. 1. **Add the server.** Run this once. ```bash codex mcp add wisty-ui --url https://ui.wisty.ai/mcp ``` 2. **Check it's connected.** In Codex, run `/mcp`. wisty-ui is listed with its tools. Share it with your team in `.codex/config.toml`. ```toml [mcp_servers.wisty-ui] url = "https://ui.wisty.ai/mcp" ``` ### VS Code For GitHub Copilot. Agentforce Vibes keeps its own servers, so it has its own tab. Connecting from VS Code isn't tested yet. 1. **Add the server.** [Install in VS Code](vscode:mcp/install?%7B%22name%22%3A%22wisty-ui%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fui.wisty.ai%2Fmcp%22%7D) or run ```bash code --add-mcp '{"name":"wisty-ui","type":"http","url":"https://ui.wisty.ai/mcp"}' ``` 2. **Check it's connected.** VS Code asks you to trust the server once. Then run MCP: List Servers from the Command Palette. wisty-ui shows as Running. Copilot uses it in agent mode. Share it with your team in `.vscode/mcp.json`. ```json { "servers": { "wisty-ui": { "type": "http", "url": "https://ui.wisty.ai/mcp" } } } ``` ### Cursor Connecting from Cursor isn't tested yet. 1. **Add the server.** [Add to Cursor](cursor://anysphere.cursor-deeplink/mcp/install?name=wisty-ui&config=eyJ1cmwiOiJodHRwczovL3VpLndpc3R5LmFpL21jcCJ9) or add it to `~/.cursor/mcp.json` ```json { "mcpServers": { "wisty-ui": { "url": "https://ui.wisty.ai/mcp" } } } ``` 2. **Check it's connected.** Open Cursor Settings, then MCP. wisty-ui shows a green dot and its tools. Share it with your team in `.cursor/mcp.json`. ```json { "mcpServers": { "wisty-ui": { "url": "https://ui.wisty.ai/mcp" } } } ``` ### Lovable Connecting from Lovable isn't tested yet. 1. **Add the server.** In a chat, open Connectors, then + and MCP server. Name it Wisty UI and paste the address. Under authentication, choose No authentication, then Add server. The connection is yours, and it isn't part of the app you publish. ```text https://ui.wisty.ai/mcp ``` 2. **Ask.** ```text Which Wisty UI components would you use for an account record page? ``` The first time, your agent asks to use wisty-ui. Allow it. If it calls wisty-ui and answers with Wisty UI's components, you're connected. ### v0 Connecting from v0 isn't tested yet. 1. **Add the server.** In the prompt box, open +, then MCPs, and add a server. Name it Wisty UI, paste the address and choose No Auth. ```text https://ui.wisty.ai/mcp ``` 2. **Ask.** ```text Which Wisty UI components would you use for an account record page? ``` The first time, your agent asks to use wisty-ui. Allow it. If it calls wisty-ui and answers with Wisty UI's components, you're connected. ### Other agents Add `https://ui.wisty.ai/mcp` as a remote HTTP server. Where a form asks for authentication, choose none. - **ChatGPT on the web.** On chatgpt.com, open Plugins, choose + and Add custom MCP server, paste the address and set Authentication to No authentication. Confirm the risk warning, then type @ in a chat to use it. If the option is missing, your workspace admin controls it. - **Gemini CLI.** `gemini mcp add -t http -s user wisty-ui https://ui.wisty.ai/mcp`. - **GitHub Copilot CLI.** `copilot mcp add --transport http wisty-ui https://ui.wisty.ai/mcp`. - **opencode.** `opencode mcp add`, type Remote. - **Zed.** Settings, then AI and MCP Servers. Add Remote Server. - **Windsurf (Devin).** Cascade's MCP config file, with the address as `serverUrl`. - **Kiro, Cline, Antigravity, JetBrains.** Their MCP settings file, with the address as the URL. - **Bolt.** Connectors, then Manage connectors and Custom MCP server, with Authentication left at None. - **Replit.** Its MCP settings, with the address as the URL. ### Hand it to your agent Or paste this into your agent, and it adds the server itself. ```text Connect the Wisty UI MCP server by following https://ui.wisty.ai/docs/mcp.md ``` ## If it doesn't connect - Start a new session. An agent that was already running when you added the server may not see it. - Check the server list. Run `/mcp` in Claude Code, or open your agent's MCP settings. wisty-ui should be listed and connected. If it asks you to sign in, remove wisty-ui and add it again with no authentication. - In Agentforce Vibes, if the form asks for a URL and not an HTTP Endpoint, Server Type is still Platform. Change it to Remote. - Restart the app if wisty-ui shows as connected but the agent says it can't reach it. - Paste the prompt under Hand it to your agent, and the agent adds the server itself. ## Tools | Tool | Returns | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `search_components` | Components that match a job, like "record picker" or "confirm delete", best match first. Each result quotes the When to use or When not to use line that matched. | | `list_components` | Every item by kind, like primitive, component or block, or only one kind. | | `get_component` | One component's install command, its examples by name, its docs by section and its API reference for your project's library. With `sections`, only the parts you name, like Rules. With `source`, its files too. | | `get_example` | The code of one example, for your project's library. A page block's first example is the files its install writes. | | `get_install_command` | The steps to install one component: the registry setup if it's missing, the shadcn CLI command, the theme step that writes the theme into your stylesheet once, and the step that copies Salesforce's icon sprites when the install brings Icon. | ## Try it Describe what the screen does: - "Add an account lookup to the new contact form." - "Show open opportunities in a table I can sort and select." - "Ask before deleting a record, the Salesforce way." ## Without the MCP server Without the server, Copy page on any component page copies its docs as Markdown, and [Agent setup](/docs/agents) has the skill and rules.