Power your agent
Perintah milik penerbit sendiri. Bukan endpoint PlugMCP.
Host a copy with our keys and logs.
npx -y @elementor/[email protected]Claude Code tidak punya tautan instal untuk perintah lokal. Salin perintah di bawah dan jalankan di terminal.
claude mcp add elementor-angie-sdk -- npx -y @elementor/angie-sdk@1.10.1Jalankan di terminal.
{ "mcpServers": { "elementor-angie-sdk": { "command": "npx", "args": [ "-y", "@elementor/[email protected]" ] } }}claude_desktop_config.json
URL remote atau perintah di mesin Anda? Perbedaan kedua cara instal
Jalankan di PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
BukaDari penerbit
Based on MCP version: 1.20.1
An SDK for extending Angie AI Assistant capabilities.
This SDK enables you to create custom MCP servers that Angie can discover and use to run your plugin features.
TypeScript SDK for Angie AI assistant
Angie is a WordPress AI Assistant that can perform almost any task on a WordPress website.
Angie is fully extensible, so plugin developers can easily integrate their own features, allowing Angie to use and control them.
Angie is built on an MCP-based architecture, enabling you to create custom MCP servers that expose your plugin's capabilities for Angie to access.
To learn about MCP:
The SDK was designed specifically to address these issues:
Run MCP in the Browser The SDK allows you to run an MCP server as a JavaScript module in the browser, so there is no need for creating a PHP-based MCP server or creating an external SSE or HTTPStreamable-based MCP Server.
All logic runs client-side while you can use WP REST or even adminAjax to communicate with your plugin backend.
Register MCP with Angie Without an External Server You can register your MCP directly with Angie using the SDK, even if you don't have an external MCP Gateway. Angie discovers your server through the SDK.
Communicate with MCP on the Current Screen The SDK enables Angie to communicate with your plugin's MCP directly on the current page, so Angie will be able to see and act on the current user's screen.
Angie SDK allows you to use the official TypeScript MCP SDK to write your MCP Server. Then with Angie SDK you can register it and let Angie run your MCP server like other MCP Hosts.
The SDK covers three main abilities:
┌──────────────────────────────┐
│ Angie SDK Flow │
├──────────────────────────────┤
│ │
│ Your WordPress Plugin │
│ │ │
│ │ enqueue script │
│ ▼ │
│ Your MCP Server (JS) │
│ │ │
│ │ register server │
│ ▼ │
│ Angie SDK │
│ │ │
│ ◄─► Browser │
│ │ Transport │
│ ▼ │
│ Angie (iframe) │
│ │
└──────────────────────────────┘
Supported:
Not Supported Yet:
Not Available:
📖 Documentation:
npm install @elementor/angie-sdk
Create a TypeScript or a Javascript file (e.g., demo-mcp-server.ts):
import {
AngieMcpSdk,
CallToolRequest,
CallToolRequestSchema,
ListToolsRequestSchema,
McpServer,
} from '@elementor/angie-sdk';
// Define the MCP server
function createSeoMcpServer() {
const server = new McpServer(
{ name: 'my-seo-server', title: 'SEO', version: '1.0.0' },
{
capabilities: { tools: {} },
instructions: `Guidelines for when to use this server and its capabilities.`
}
);
// Add your tools, resources, etc.
server.tool( ... );
return server;
}
// Register the server with Angie
const server = createSeoMcpServer();
const sdk = new AngieMcpSdk();
await sdk.waitForReady();
sdk.registerServer({
name: 'my-seo-server',
version: '1.0.0',
description: 'SEO tools for Angie',
server,
});
The registerServer() method is asynchronous and returns a Promise.
In most cases, you don't need to await it since registration happens in the background.
Use await sdk.registerServer(...) when:
The SDK can trigger Angie with a prompt, a context attachment, or both.
interface ContextAttachment {
label: string;
content: string;
}
interface PromptSuggestion {
label: string;
value: string;
autoSend?: boolean;
color?: string;
isNew?: boolean;
requiresPrompt?: string;
}
interface AngieTriggerRequest {
prompt?: string;
context?: { source?: string } & Record<string, unknown>;
contextAttachment?: ContextAttachment;
suggestions?: { items: PromptSuggestion[] };
options?: {
timeout?: number;
newChat?: boolean;
autoSend?: boolean;
};
}
import { AngieMcpSdk, type ContextAttachment } from '@elementor/angie-sdk';
// Register your MCP server and trigger Angie
const server = createSeoMcpServer();
const sdk = new AngieMcpSdk();
await sdk.waitForReady();
sdk.registerServer({
name: 'my-seo-server',
version: '1.0.0',
description: 'SEO tools for Angie',
server,
});
// Trigger Angie with a prompt
await sdk.triggerAngie({
prompt: 'Help me optimize this page for SEO',
context: { pageType: 'product', source: 'my-plugin' },
contextAttachment: {
label: 'Current SEO report',
content: 'The page is missing a meta description.',
},
suggestions: {
items: [
{ label: 'Add meta description', value: 'Add a meta description to this page', autoSend: true },
{ label: 'Improve title', value: 'Suggest a better SEO title', isNew: true },
],
},
options: {
timeout: 30000, // Optional: 30 seconds timeout (default: 30000)
newChat: true,
},
metadata: { plan: 'pro', area: 'seo' },
});
// A prompt without context
await sdk.triggerAngie({
prompt: 'Help me create a contact page'
});
// Attach context without pre-filling a prompt
const contextAttachment: ContextAttachment = {
label: 'Selected error',
content: 'Checkout failed with error code PAYMENT_DECLINED.',
};
await sdk.triggerAngie({ contextAttachment });
Request fields:
prompt: Optional prompt text.contextAttachment: Optional labeled content attached to the next submitted user message. It can be used without prompt and is not rendered as part of the message text.suggestions: Optional list of prompt suggestions shown to the user. Each item has a label (displayed text) and value (prompt sent when selected); optional autoSend submits immediately, color sets the chip color, isNew shows a "new" badge, and requiresPrompt gates the suggestion behind a given prompt.context: Optional integration metadata. The SDK adds the current pageUrl and pageTitle;options.timeout: How long to wait for Angie response in milliseconds (default: 30000).options.newChat: When true, clears the current conversation and opens a fresh chat.options.autoSend: When true, submits prompt immediately instead of only pre-filling the composer.metadata: Optional flat metadata stored on new chats. Omit to keep, {} to clear.metadata rules (the server enforces these limits and drops invalid entries):
Metadata is not verified: do not use it for permissions or billing, and do not put personal data (emails, names) or secrets in it.
// Trigger via URL hash - perfect for deep linking
window.location.hash = 'angie-prompt=' + encodeURIComponent('Help me create a contact page');
// Open a new chat via hash parameter
window.location.hash = 'angie-prompt=' + encodeURIComponent('Fix this error') + '&angie-new-chat=true';
// Example URL: https://yoursite.com/wp-admin/edit.php#angie-prompt=Help%20me%20optimize%20SEO&angie-new-chat=true
Hash Parameters:
angie-prompt: The prompt text to populate in the input fieldangie-new-chat: When set to true, clears the current conversation and opens a fresh chat with the prompt pre-filled in the inputBoth loadSidebar() and loadSidebarV2() watch the hash, on page load and on every later hash change. You do not need any hash code of your own.
Note: Always call await sdk.waitForReady() before triggering Angie.
A typical project structure:
your-plugin/
├── plugin.php # Main WordPress plugin file
├── dist/
│ └── demo-mcp-server.js # Bundled MCP server JS
├── src/
│ └── demo-mcp-server.ts # MCP server source
└── ...
Instructions are guidelines that describe when to use your MCP server and what its capabilities are. They help Angie understand what your server can and cannot do, ensuring appropriate tool selection and proper user expectations.
Provide instructions in the second parameter during server initialization:
const server = new McpServer(
{ name: 'content-writer', title: 'Content Writer', version: '1.0.0' },
{
instructions: `Guidelines for using the Text Content Management server.
### Capabilities:
- **Generate new content**: Creates blog posts, page content, headlines, product descriptions
- **Edit existing content**: Refines or adjusts text based on specific instructions
- **Content variations**: Creates multiple versions for A/B testing or different audiences
### Limitations:
- **SEO optimization**: Cannot analyze or optimize for specific keywords or search rankings
- **Fact checking**: Cannot verify accuracy against real-world data
- **Plagiarism checking**: Cannot verify content originality`
}
);
Each tool must be registered with:
Example:
server.setRequestHandler(ListToolsRequestSchema, async () => ({
tools: [
{
name: 'analyze-page-seo',
description: 'Analyzes the SEO of a page.',
inputSchema: {
type: 'object',
properties: { url: { type: 'string', description: 'Page URL' } },
required: ['url'],
},
},
],
}));
Angie extends MCP tool annotations with Angie-specific metadata. Import the annotation constants directly from @elementor/angie-sdk:
import {
ANGIE_REQUIRED_RESOURCES,
ANGIE_MODEL_PREFERENCES,
ANGIE_EXTENDED_TIMEOUT,
MCP_READONLY,
ToolAnnotations,
} from '@elementor/angie-sdk';
server.tool(
'analyze-page-layout',
'Analyzes the current page layout and returns suggestions',
{ /* input schema */ },
{
[MCP_READONLY]: true,
[ANGIE_EXTENDED_TIMEOUT]: { timeoutMs: 30000 },
[ANGIE_REQUIRED_RESOURCES]: [
{ uri: 'elementor://page/layout', whenToUse: 'Always — needed to read the page structure' }
],
[ANGIE_MODEL_PREFERENCES]: {
hints: [{ name: 'claude-sonnet' }]
}
} as ToolAnnotations,
async (args) => { /* handler */ }
);
📖 See Tool Annotations for full reference.
Implement a handler for CallToolRequestSchema:
server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest) => {
const { name, arguments: args } = request.params;
switch (name) {
case 'analyze-page-seo':
// Call your backend or perform logic
const { root, nonce } = window.wpApiSettings;
const response = await fetch(`${root}my-plugin/v1/analyze-seo`, {
method: 'POST',
headers: {
'X-WP-Nonce': nonce,
'Content-Type': 'application/json',
},
credentials: 'same-origin',
body: JSON.stringify(args),
});
if (!response.ok) {
throw new Error(`API request failed: ${response.statusText}`);
}
const result = await response.json();
return {
content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],
};
// Add more cases as needed
default:
throw new Error(`Unknown tool: ${name}`);
}
});
⚠️ Security Responsibility: When you create MCP tools that interact with your WordPress backend, you become responsible for the security of those operations. Angie acts as a channel for user actions, so it's your responsibility to implement proper security measures.
add_action('rest_api_init', function () {
register_rest_route('my-plugin/v1', '/analyze-seo', [
'methods' => 'POST',
'callback' => 'my_analyze_seo_callback',
'permission_callback' => function () {
return current_user_can('edit_posts');
},
'args' => array(
'url' => array(
'validate_callback' => function($param, $request, $key) {
return filter_var($param, FILTER_VALIDATE_URL);
},
'required' => true,
),
),
]);
});
For remote servers, let your Angie users add them via Angie MCP Gateway settings.
Remote MCP servers can be configured through Angie's settings interface, allowing users to connect to external MCP services without requiring code changes.
Example:
server.setRequestHandler(CallToolRequestSchema, async (req) => {
try {
// Your tool implementation
const result = await performToolAction(req.params);
return {
content: [{ type: 'text', text: result }],
};
} catch (err) {
console.error('Tool error:', err);
throw new Error('User-friendly error message');
}
});
For more examples, see the demo plugin and MCP server in the example folder
To embed the Angie UI in your own site (sidebar or floating chat), use AngieMcpSdk.loadSidebarV2(). See the dedicated guide: loadSidebarV2. To customize the embedded chat UI (title, suggestions, feature toggles), see widgetConfig and the widgetConfig demo.
If you have questions or need help, open an issue or contact the Elementor team!
Angie includes a Dev Mode feature that displays tool execution progress and details directly in the chat interface, making it easier to debug your MCP server integrations and understand how Angie interacts with your tools.
To enable Dev Mode:
What Dev Mode shows: When enabled, Angie will display in the chat:
MIT
{ "mcpServers": { "elementor-angie-sdk": { "command": "npx", "args": [ "-y", "@elementor/[email protected]" ] } }}Tool
Belum ada daftar tool. Server remote mendapatkannya setelah pemeriksaan kesehatan pertama.
FAQ
Salin konfigurasi stdio untuk Cursor, Claude Desktop, Claude Code, atau VS Code di halaman ini. Konfigurasi ini memakai instalasi dari penerbit, bukan proxy PlugMCP.
Tidak ada variabel lingkungan wajib yang tercantum di catatan ini.
@elementor/angie Sdk berjalan secara lokal melalui stdio.
Terakhir diperiksa 2026-11-14. TypeScript SDK for Angie AI assistant