diff --git a/src/partials/mcp-add-ides-tools.md b/src/partials/mcp-add-ides-tools.md index a52adc883c..777109ae66 100644 --- a/src/partials/mcp-add-ides-tools.md +++ b/src/partials/mcp-add-ides-tools.md @@ -9,6 +9,9 @@ You can add the MCP server to various AI tools and code editors: {% cards_item href="/docs/tooling/mcp/claude-code" title="Claude Code" image="/images/docs/mcp/logos/claude.svg" %} {% /cards_item %} +{% cards_item href="/docs/tooling/mcp/zenflow" title="Zenflow" image="/images/docs/mcp/logos/zenflow.svg" %} +{% /cards_item %} + {% cards_item href="/docs/tooling/mcp/cursor" title="Cursor" image="/images/docs/mcp/logos/cursor-ai.svg" %} {% /cards_item %} @@ -36,6 +39,9 @@ You can add the MCP server to various AI tools and code editors: {% cards_item href="/docs/tooling/mcp/claude-code" title="Claude Code" image="/images/docs/mcp/logos/dark/claude.svg" %} {% /cards_item %} +{% cards_item href="/docs/tooling/mcp/zenflow" title="Zenflow" image="/images/docs/mcp/logos/dark/zenflow.svg" %} +{% /cards_item %} + {% cards_item href="/docs/tooling/mcp/cursor" title="Cursor" image="/images/docs/mcp/logos/dark/cursor-ai.svg" %} {% /cards_item %} diff --git a/src/routes/docs/tooling/mcp/+layout.svelte b/src/routes/docs/tooling/mcp/+layout.svelte index fa0bcb3aac..807e7e3938 100644 --- a/src/routes/docs/tooling/mcp/+layout.svelte +++ b/src/routes/docs/tooling/mcp/+layout.svelte @@ -43,6 +43,10 @@ label: 'Claude Code', href: '/docs/tooling/mcp/claude-code' }, + { + label: 'Zenflow', + href: '/docs/tooling/mcp/zenflow' + }, { label: 'Cursor', href: '/docs/tooling/mcp/cursor' diff --git a/src/routes/docs/tooling/mcp/zenflow/+page.markdoc b/src/routes/docs/tooling/mcp/zenflow/+page.markdoc new file mode 100644 index 0000000000..094a86b66f --- /dev/null +++ b/src/routes/docs/tooling/mcp/zenflow/+page.markdoc @@ -0,0 +1,128 @@ +--- +layout: article +title: Appwrite MCP and Zenflow +description: Learn how to add the Appwrite MCP servers to agents in Zenflow to interact with both the Appwrite API and documentation. +--- + +Learn how you can add the Appwrite MCP servers to agents in Zenflow to interact with both the Appwrite API and documentation. + +Before you begin, ensure you have the following **prerequisites** installed on your system: +{% tabs %} +{% tabsitem #api-server-prerequisites title="API server" %} + +[uv](https://docs.astral.sh/uv/getting-started/installation/) must be installed on your system. + +{% /tabsitem %} + +{% tabsitem #docs-server-prerequisites title="Docs server" %} + +[Node.js](https://nodejs.org/en/download) and npm must be installed on your system. + +{% /tabsitem %} +{% /tabs %} + +{% section #step-1 step=1 title="Add MCP servers" %} + +To add the Appwrite MCP server, open Zenflow and go to the **Settings** > **MCP servers**. From there, select your agent you want to configure MCP for, and then add your custom MCP server. + +{% tabs %} +{% tabsitem #api-only title="API server" %} + +Update the +```json +{ + "mcpServers": {} +} +``` +to include the API server: + +```json +{ + "mcpServers": { + "appwrite-api": { + "command": "uvx", + "args": [ + "mcp-server-appwrite", + "--sites" + ], + "env": { + "APPWRITE_PROJECT_ID": "your-project-id", + "APPWRITE_API_KEY": "your-api-key", + "APPWRITE_ENDPOINT": "https://.cloud.appwrite.io/v1" + } + } + } +} +``` + +**Configuration:** +- Replace `your-project-id` with your actual Appwrite project ID +- Replace `your-api-key` with your Appwrite API key +- Replace `` with your Appwrite Cloud region (e.g., `nyc`, `fra`) + +{% /tabsitem %} + +{% tabsitem #docs-only title="Docs server" %} + +Update the +```json +{ + "mcpServers": {} +} +``` +to include the docs server: + +```json +{ + "mcpServers": { + "appwrite-docs": { + "url": "https://mcp-for-docs.appwrite.io", + "type": "http" + } + } +} +``` + +{% /tabsitem %} +{% /tabs %} + +Click **Save**. Once you save the configuration, Zenflow will connect with the MCP server(s) and load all available tools. + +{% /section %} + +{% section #step-2 step=2 title="Test the integration" %} + +Open **Zenflow Chat** of your existing task to test your MCP integrations. If you don't have an existing task, you can create one by clicking **New Task**, selecting a task type, and writing a task description. Click **Create and Run**. +If you are new to Zenflow, learn more about [how to set up Zenflow](https://docs.zencoder.ai/user-guides/guides/set-up-your-zenflow#step-6:-create-your-first-task). + +You can try out the following example prompts based on the MCP server you have configured: + +{% tabs %} +{% tabsitem #test-api title="API server" %} + +**Example prompts:** +- `Create a new user in my Appwrite project` +- `List all databases in my project` +- `Show me the collections in my database` +- `Create a new document in my collection` +- `Delete a specific user by ID` + +{% /tabsitem %} + +{% tabsitem #test-docs title="Docs server" %} + +**Example prompts:** +- `How do I set up real-time subscriptions in Appwrite?` +- `Show me how to authenticate users with OAuth` +- `What are the best practices for database queries?` +- `How do I implement file uploads with Appwrite Storage?` +- `Show me an example of using Appwrite Functions` + +{% /tabsitem %} + +{% /tabs %} + +![Search for portfolio site in Appwrite project](/images/docs/mcp/zenflow/zenflow-chat.png) + + +{% /section %} \ No newline at end of file diff --git a/static/images/docs/mcp/logos/dark/zenflow.svg b/static/images/docs/mcp/logos/dark/zenflow.svg new file mode 100644 index 0000000000..446ad29b2d --- /dev/null +++ b/static/images/docs/mcp/logos/dark/zenflow.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/docs/mcp/logos/zenflow.svg b/static/images/docs/mcp/logos/zenflow.svg new file mode 100644 index 0000000000..7ada0cdfe6 --- /dev/null +++ b/static/images/docs/mcp/logos/zenflow.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/docs/mcp/zenflow/zenflow-chat.png b/static/images/docs/mcp/zenflow/zenflow-chat.png new file mode 100644 index 0000000000..ffe1320bfb Binary files /dev/null and b/static/images/docs/mcp/zenflow/zenflow-chat.png differ