Power your agent
Lệnh của chính nhà phát hành. Không phải endpoint của PlugMCP.
Host a copy with our keys and logs.
npx -y @elementor/[email protected]Claude Code không có liên kết cài đặt cho lệnh cục bộ. Sao chép lệnh bên dưới và chạy trong terminal.
claude mcp add elementor-angie-sdk -- npx -y @elementor/angie-sdk@1.10.1Chạy trong terminal.
{ "mcpServers": { "elementor-angie-sdk": { "command": "npx", "args": [ "-y", "@elementor/[email protected]" ] } }}claude_desktop_config.json
URL từ xa hay một lệnh trên máy của bạn? Hai cách cài đặt khác nhau thế nào
Chạy trên 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.
MởTừ nhà phát hành
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]" ] } }}Công cụ
Chưa có danh sách công cụ. Máy chủ từ xa sẽ có danh sách sau lần kiểm tra tình trạng đầu tiên.
Câu hỏi thường gặp
Sao chép cấu hình stdio cho Cursor, Claude Desktop, Claude Code hoặc VS Code trên trang này. Cấu hình dùng bản cài đặt của nhà phát hành, không phải proxy của PlugMCP.
Bản ghi này không liệt kê biến môi trường bắt buộc nào.
@elementor/angie Sdk chạy cục bộ qua stdio.
Kiểm tra lần cuối: 2026-11-15. TypeScript SDK for Angie AI assistant