Use Loora from GitHub Copilot agent mode in VS Code.
VS Code uses servers, not mcpServers, and it wants the transport named: "type": "http" for a streamable HTTP server like Loora. It is the one configuration key most commonly copied wrong, because almost every other client in this list spells the outer object differently.
Configuration
.vscode/mcp.json in the workspace, or the user-level mcp.json via the command palette.
{
"servers": {
"loora": {
"type": "http",
"url": "https://mcp.loora.design/mcp"
}
}
}Steps
- Run MCP: Add Server from the command palette, or create .vscode/mcp.json with the block above.
- Choose whether the server belongs to this workspace or to your user profile.
- Open the Chat view, switch the mode selector to Agent, and open the tools picker.
- Click Start on the loora server and approve the sign-in when the browser opens.
- Confirm the Loora tools are checked in the tools picker before you prompt.
Worth knowing
- MCP support in agent mode needs a current VS Code — if there is no Agent entry in the chat mode selector, update first.
- The outer key is servers. A block starting with mcpServers is Cursor or Claude syntax and VS Code will ignore it.
- A workspace .vscode/mcp.json is checked in with the repository; it carries the endpoint only, never a token.
- The tools picker has a per-tool checkbox, so you can leave the destructive tools such as deleteNodes and deleteDesign unchecked.
What you can ask for
Once the server is connected, VS Code has the same vocabulary as every other client. Every call commits a validated canvas transaction, so it is inspectable, undoable, and safe to make on a branch.
| Group | Tools |
|---|---|
| Read | listDesigns, getDesignContext, readNode, readTree, searchNodes, listAssets, listVersions |
| Write | createPage, insertNodes, patchNodes, moveNodes, deleteNodes |
| Reuse | createComponent, createInstance, setTokens |
| Motion | setAnimations, animateNodes |
| Look | viewCanvas, viewPage, viewNode, getScreenshot |
| Branches | listBranches, createBranch, proposeBranch, compareBranch, applyBranch, reopenBranch, closeBranch |
| Designs | createDesign, renameDesign, deleteDesign, exportCode |
A good first prompt: ask for listDesigns, then getDesignContext on the one you want, then have it call setTokens before it draws anything. Why that order matters →
VS Code and Loora: questions
Why does VS Code not see my MCP server?
The most common cause is the outer key. VS Code expects "servers", while Cursor and Claude expect "mcpServers". The second is the transport: a remote server needs "type": "http".
Does this work with Copilot, or do I need another extension?
It works with Copilot Chat in agent mode. Switch the chat mode selector to Agent and the MCP tools appear in the tools picker.
Can I stop the agent from deleting things?
Uncheck deleteNodes, deleteDesign, and closeBranch in the tools picker. On the Loora side every write is a logged transaction, so anything that does land can be rolled back from version history.