community-ff-mcp 0.4.0

package/README.md

@@ -0,0 +1,300 @@
+# community-ff-mcp
+
+MCP server for the FlutterFlow Project API. Enables AI-assisted FlutterFlow development through Claude and other MCP-compatible clients.
+
+## What This MCP Does Best
+
+This MCP excels at **reading, exploring, and understanding** your FlutterFlow projects. Here's what it's great at:
+
+- **Project exploration** — Browse your projects, pages, components, and file structure
+- **Understanding functionality** — Get clear summaries of what a page or component does, including its widget tree, actions, parameters, and state
+- **Tracing usage** — Find everywhere a component is used, or every navigation action that leads to a page
+- **Inspecting configuration** — View theme settings, API endpoints, data models, custom code, app state, integrations, and more
+- **Searching** — Search project files by keyword, prefix, or regex to find exactly what you need
+- **YAML reference** — Built-in documentation for FlutterFlow's YAML schema, so your AI assistant can understand and generate valid YAML
+- **Guided editing** — A workflow guide (`get_editing_guide`) that walks through the correct steps before making any YAML changes
+
+> **In short:** Think of it as giving your AI assistant full read access to your FlutterFlow project, plus careful write access when needed.
+
+## Quick Start
+
+### 1. Get Your FlutterFlow API Token
+
+You need a FlutterFlow API token to authenticate. Here's how to get one:
+
+1. Open [FlutterFlow](https://app.flutterflow.io/) and log in
+2. Click your **profile picture** (bottom-left corner)
+3. Go to **Account Settings**
+4. Scroll to the **API Token** section
+5. Click **Copy** to copy your token
+
+> **Note:** The API token requires a **paid FlutterFlow subscription** (Standard plan or above). Free-tier accounts do not have API access.
+
+### 2. Add to Your MCP Client
+
+Choose your AI client below and follow the setup instructions.
+
+<details>
+<summary><strong>Claude Code (CLI)</strong></summary>
+
+Run this command to add the MCP server:
+
+```bash
+claude mcp add flutterflow -e FLUTTERFLOW_API_TOKEN=your_token_here -- npx -y community-ff-mcp
+```
+
+Replace `your_token_here` with the token you copied in step 1.
+
+This adds the server to your project's `.claude/settings.json`. You can also manually edit the config:
+
+```json
+{
+  "mcpServers": {
+    "flutterflow": {
+      "command": "npx",
+      "args": ["-y", "community-ff-mcp"],
+      "env": {
+        "FLUTTERFLOW_API_TOKEN": "your_token_here"
+      }
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><strong>Claude Desktop</strong></summary>
+
+Open **Settings > Developer > Edit Config** and add:
+
+```json
+{
+  "mcpServers": {
+    "flutterflow": {
+      "command": "npx",
+      "args": ["-y", "community-ff-mcp"],
+      "env": {
+        "FLUTTERFLOW_API_TOKEN": "your_token_here"
+      }
+    }
+  }
+}
+```
+
+Replace `your_token_here` with your token. Restart Claude Desktop after saving.
+
+</details>
+
+<details>
+<summary><strong>Cursor</strong></summary>
+
+Open **Settings > MCP** and add a new server with this configuration:
+
+```json
+{
+  "mcpServers": {
+    "flutterflow": {
+      "command": "npx",
+      "args": ["-y", "community-ff-mcp"],
+      "env": {
+        "FLUTTERFLOW_API_TOKEN": "your_token_here"
+      }
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><strong>Windsurf / Other MCP Clients</strong></summary>
+
+Add the following to your MCP configuration file (check your client's docs for the exact location):
+
+```json
+{
+  "mcpServers": {
+    "flutterflow": {
+      "command": "npx",
+      "args": ["-y", "community-ff-mcp"],
+      "env": {
+        "FLUTTERFLOW_API_TOKEN": "your_token_here"
+      }
+    }
+  }
+}
+```
+
+</details>
+
+### 3. Start Building
+
+Ask your AI assistant to list your FlutterFlow projects, inspect pages, or explore your app — it handles the rest.
+
+**Example prompts to get started:**
+- *"List my FlutterFlow projects"*
+- *"Show me all the pages in project X"*
+- *"What does the HomePage do? Walk me through its widget tree"*
+- *"Where is the PaywallCard component used?"*
+- *"What API endpoints are configured?"*
+- *"Show me the theme colors"*
+
+## How It Works Under the Hood
+
+This MCP is designed to make AI agents as effective as possible when working with FlutterFlow. Here's what makes it work well:
+
+### Smart Local Caching
+
+Instead of hitting the FlutterFlow API for every question, the MCP downloads your entire project once (`sync_project`) and caches it locally. After that, most tools read from the cache — making them **instant and free of API rate limits**. If you've made changes in FlutterFlow, just re-sync to refresh the cache.
+
+### Built-in Documentation
+
+AI models don't natively understand FlutterFlow's internal structure. This MCP ships with **21 reference documents** covering every widget type, action, variable, theme setting, and editing pattern. The AI can look up exactly how a Button, Column, or Navigation action is structured — so it doesn't have to guess.
+
+### Guided Editing Workflow
+
+Before making any change, the AI can call `get_editing_guide` with a plain-English description of what it wants to do (e.g., *"change the button color on the login page"*). The MCP returns the exact steps, relevant documentation, and rules to follow — reducing the chance of mistakes.
+
+### 25 Purpose-Built Tools
+
+Rather than one generic "read project" tool, the MCP provides **25 specialized tools** — each designed for a specific task. Want to know where a component is used? There's a dedicated tool for that. Want to see all navigation actions pointing to a page? There's one for that too. This means the AI always picks the right tool for the job instead of downloading everything and searching through it.
+
+## Limitations and Cautions
+
+### Be Careful with Edits
+
+This MCP can make changes to your FlutterFlow project, but **edits should be treated with care**:
+
+- **Always review before pushing** — Ask your AI assistant to show you exactly what it plans to change before it pushes anything. Make sure you understand the change.
+- **There's no undo button for API changes** — Changes are applied immediately to your project. You can roll back using FlutterFlow's version history, but it's better to prevent a bad edit than to fix one.
+- **Start with read-only tasks** — Get comfortable asking questions about your project (page summaries, component usage, theme inspection) before asking the AI to modify anything.
+- **Smaller edits are safer** — Editing a single widget is safer than replacing an entire page. The AI knows to make targeted changes, but it's good to be aware.
+
+### What the FlutterFlow API Can't Do
+
+These are limitations in FlutterFlow's own API. They affect any tool that connects to FlutterFlow, not just this MCP.
+
+- **Custom code can be read but not edited** — The AI can read your custom actions, custom functions, and custom widgets, but it **cannot push code changes** back to FlutterFlow. The API doesn't support it properly — attempting to push code corrupts the FlutterFlow editor. Instead, the AI will show you the modified code and you copy-paste it into the FlutterFlow code editor.
+- **Unlocked `main.dart` can't be updated** — If you've unlocked `main.dart` for raw Dart editing, the AI can read it but can't push code changes. Startup/shutdown action lists can still be modified.
+- **Platform config files are indirect** — You can't directly edit `AndroidManifest.xml`, `Info.plist`, or `build.gradle`. Instead, you configure hooks and settings in FlutterFlow, which generates those files for you. The AI can read and modify those hooks.
+- **Editing platform config files requires extra care** — FlutterFlow groups all platform config files together internally. If the AI pushes a change to just one (e.g., Android Manifest), FlutterFlow may delete the others (e.g., ProGuard rules, Gradle config). The MCP handles this by always including all existing files in the same push, but it's something to be aware of.
+- **Disabling conditional actions works differently** — In the FlutterFlow editor, you can toggle a conditional action on/off with a switch. The API handles this slightly differently, so the AI uses a workaround that achieves the same result.
+- **Validation isn't perfect** — The validation step catches most errors, but occasionally something that passes validation can still fail when pushed. This is rare, but it's why reviewing changes before pushing is important.
+- **Project list may be incomplete** — The API may not return all projects you have access to, especially shared or team projects. If a project is missing, copy its ID directly from the FlutterFlow editor (click the project name in the top-left corner) and paste it into your AI prompt.
+
+### General Limitations
+
+- **No live sync** — The MCP works with a snapshot of your project. It doesn't watch for changes you make in the FlutterFlow editor in real time. If you've been editing in FlutterFlow, re-sync before asking the AI to make changes.
+- **Very large pages** — Some extremely large pages may fail to load. The AI can work around this by loading individual widgets instead of the whole page.
+- **Cache can go stale** — If you edit your project in FlutterFlow after syncing, the AI's local copy is outdated. Re-run the sync (the AI will tell you when it detects stale data).
+
+> For the full technical details on each API limitation, see [`docs/flutterflow-api-limitations.md`](docs/flutterflow-api-limitations.md).
+
+## Tools
+
+### Discovery and Exploration
+
+| Tool | Description |
+|------|-------------|
+| `list_projects` | List all FlutterFlow projects for your account |
+| `list_project_files` | List YAML file keys in a project (supports prefix filter) |
+| `list_pages` | List all pages with human-readable names, scaffold IDs, and folders |
+| `search_project_files` | Search file keys by keyword, prefix, or regex |
+| `sync_project` | Bulk download all project YAML to local cache for fast offline reads |
+
+### Reading and Understanding
+
+| Tool | Description |
+|------|-------------|
+| `get_page_by_name` | Fetch a page by its human-readable name |
+| `get_project_yaml` | Download specific YAML files by file key |
+| `get_page_summary` | Quick page overview from cache — widget tree, actions, params, state |
+| `get_component_summary` | Quick component overview from cache — widget tree, actions, params |
+| `find_component_usages` | Find all pages and components where a given component is used |
+| `find_page_navigations` | Find all actions that navigate to a given page |
+
+### Project Configuration
+
+| Tool | Description |
+|------|-------------|
+| `get_theme` | Theme colors, typography, breakpoints, and widget defaults |
+| `get_app_state` | App state variables, constants, and environment settings |
+| `get_api_endpoints` | API endpoint definitions — method, URL, variables, headers, response |
+| `get_data_models` | Data structs, enums, Firestore collections, and Supabase tables |
+| `get_custom_code` | Custom actions, functions, widgets, AI agents, and app-action components |
+| `get_general_settings` | App Details, App Assets, Nav Bar & App Bar settings |
+| `get_project_setup` | Firebase, Languages, Platforms, Permissions, Dependencies |
+| `get_app_settings` | Authentication, Push Notifications, Mobile/Web Deployment |
+| `get_in_app_purchases` | Stripe, Braintree, RevenueCat, Razorpay configuration |
+| `get_integrations` | Supabase, SQLite, GitHub, Algolia, Google Maps, AdMob, and more |
+
+### Editing
+
+| Tool | Description |
+|------|-------------|
+| `get_editing_guide` | Get the recommended workflow and docs for an editing task — **call this before modifying any YAML** |
+| `get_yaml_docs` | Search/retrieve FlutterFlow YAML reference docs by topic or file |
+| `validate_yaml` | Validate YAML content before pushing — **always call before `update_project_yaml`** |
+| `update_project_yaml` | Push YAML changes to a project |
+
+## Resources
+
+| Resource | URI | Description |
+|----------|-----|-------------|
+| Docs Index | `ff://docs` | List all available YAML reference documentation files |
+| Doc File | `ff://docs/{path}` | Read a specific YAML reference doc (e.g. `ff://docs/04-widgets/button`) |
+
+## Prompts
+
+| Prompt | Description |
+|--------|-------------|
+| `generate-page` | Generate a new page from a description |
+| `modify-component` | Modify an existing component |
+| `inspect-project` | Summarize project structure |
+| `flutterflow-dev-workflow` | Efficient workflow guide for AI-assisted FlutterFlow development |
+
+## Built-in YAML Reference
+
+This MCP ships with a comprehensive FlutterFlow YAML reference catalog that AI models can access at runtime:
+
+- **`get_yaml_docs` tool** — Search by topic (e.g. `get_yaml_docs(topic: "Button")`) or browse the full index
+- **`ff://docs` resources** — Direct access to all 21 reference docs covering widgets, actions, variables, theming, and editing workflows
+
+See [docs/ff-yaml/](docs/ff-yaml/) for the full catalog.
+
+## AI Agent Skill
+
+This MCP includes a [skills.sh](https://skills.sh)-compatible skill for AI agents. Install it to teach your AI assistant how to use FlutterFlow MCP effectively:
+
+```bash
+npx skills add mohn93/ff-mcp --skill community-ff-mcp
+```
+
+Compatible with Claude Code, Cursor, GitHub Copilot, Codex, Goose, Windsurf, and 12+ other AI agents. The skill provides tool orchestration workflows, critical YAML rules, and detailed reference documentation for widgets, actions, data binding, theming, and more.
+
+## Claude Code Skills
+
+You can also copy Claude Code-specific skills from [`skills/`](skills/) into your project's `.claude/skills/` directory:
+
+- **`ff-yaml-dev.md`** — Core workflow: reading, editing, and creating FlutterFlow pages/components
+- **`ff-widget-patterns.md`** — Quick reference for common widget YAML patterns and snippets
+
+## Development
+
+```bash
+git clone https://github.com/mohn93/ff-mcp.git
+cd ff-mcp
+npm install
+npm run build
+npm run dev          # watch mode
+```
+
+## Requirements
+
+- Node.js 18+
+- FlutterFlow API token (paid FlutterFlow subscription required)
+
+## License
+
+MIT

package/build/api/flutterflow.d.ts

@@ -0,0 +1,11 @@
+export declare class FlutterFlowClient {
+    private token;
+    constructor(token: string);
+    private request;
+    listProjects(projectType?: string, deserializeResponse?: boolean): Promise<unknown>;
+    listPartitionedFileNames(projectId: string): Promise<unknown>;
+    getProjectYamls(projectId: string, fileName?: string): Promise<unknown>;
+    validateProjectYaml(projectId: string, fileKey: string, fileContent: string): Promise<unknown>;
+    updateProjectByYaml(projectId: string, fileKeyToContent: Record<string, string>): Promise<unknown>;
+}
+export declare function createClient(): FlutterFlowClient;

package/build/api/flutterflow.js

@@ -0,0 +1,61 @@
+const FF_API_BASE = "https://api.flutterflow.io/v2";
+export class FlutterFlowClient {
+    token;
+    constructor(token) {
+        this.token = token;
+    }
+    async request(method, endpoint, body) {
+        const url = `${FF_API_BASE}${endpoint}`;
+        const headers = {
+            Authorization: `Bearer ${this.token}`,
+            "Content-Type": "application/json",
+        };
+        const res = await fetch(url, {
+            method,
+            headers,
+            body: body ? JSON.stringify(body) : undefined,
+        });
+        if (!res.ok) {
+            const errorText = await res.text();
+            throw new Error(`FlutterFlow API error ${res.status}: ${errorText}`);
+        }
+        return res.json();
+    }
+    async listProjects(projectType, deserializeResponse) {
+        return this.request("POST", "/l/listProjects", {
+            project_type: projectType,
+            deserialize_response: deserializeResponse ?? true,
+        });
+    }
+    async listPartitionedFileNames(projectId) {
+        return this.request("GET", `/listPartitionedFileNames?projectId=${encodeURIComponent(projectId)}`);
+    }
+    async getProjectYamls(projectId, fileName) {
+        let endpoint = `/projectYamls?projectId=${encodeURIComponent(projectId)}`;
+        if (fileName) {
+            endpoint += `&fileName=${encodeURIComponent(fileName)}`;
+        }
+        return this.request("GET", endpoint);
+    }
+    async validateProjectYaml(projectId, fileKey, fileContent) {
+        return this.request("POST", "/validateProjectYaml", {
+            projectId,
+            fileKey,
+            fileContent,
+        });
+    }
+    async updateProjectByYaml(projectId, fileKeyToContent) {
+        return this.request("POST", "/updateProjectByYaml", {
+            projectId,
+            fileKeyToContent,
+        });
+    }
+}
+export function createClient() {
+    const token = process.env.FLUTTERFLOW_API_TOKEN;
+    if (!token) {
+        throw new Error("FLUTTERFLOW_API_TOKEN environment variable is required. " +
+            "Get your token from FlutterFlow > Account Settings > API Token.");
+    }
+    return new FlutterFlowClient(token);
+}

package/build/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/build/index.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { createClient } from "./api/flutterflow.js";
+import { registerListProjectsTool } from "./tools/list-projects.js";
+import { registerListFilesTool } from "./tools/list-files.js";
+import { registerGetYamlTool } from "./tools/get-yaml.js";
+import { registerValidateYamlTool } from "./tools/validate-yaml.js";
+import { registerUpdateYamlTool } from "./tools/update-yaml.js";
+import { registerListPagesTool } from "./tools/list-pages.js";
+import { registerGetPageByNameTool } from "./tools/get-page-by-name.js";
+import { registerSyncProjectTool } from "./tools/sync-project.js";
+import { registerGetPageSummaryTool } from "./tools/get-page-summary.js";
+import { registerGetComponentSummaryTool } from "./tools/get-component-summary.js";
+import { registerFindComponentUsagesTool } from "./tools/find-component-usages.js";
+import { registerFindPageNavigationsTool } from "./tools/find-page-navigations.js";
+import { registerResources } from "./resources/projects.js";
+import { registerDocsResources } from "./resources/docs.js";
+import { registerGeneratePagePrompt } from "./prompts/generate-page.js";
+import { registerModifyComponentPrompt } from "./prompts/modify-component.js";
+import { registerInspectProjectPrompt } from "./prompts/inspect-project.js";
+import { registerDevWorkflowPrompt } from "./prompts/dev-workflow.js";
+import { registerGetYamlDocsTool } from "./tools/get-yaml-docs.js";
+import { registerGetAppStateTool } from "./tools/get-app-state.js";
+import { registerGetApiEndpointsTool } from "./tools/get-api-endpoints.js";
+import { registerGetDataModelsTool } from "./tools/get-data-models.js";
+import { registerGetCustomCodeTool } from "./tools/get-custom-code.js";
+import { registerGetThemeTool } from "./tools/get-theme.js";
+import { registerGetEditingGuideTool } from "./tools/get-editing-guide.js";
+import { registerSearchProjectFilesTool } from "./tools/search-project-files.js";
+import { registerGetGeneralSettingsTool } from "./tools/get-general-settings.js";
+import { registerGetProjectSetupTool } from "./tools/get-project-setup.js";
+import { registerGetAppSettingsTool } from "./tools/get-app-settings.js";
+import { registerGetInAppPurchasesTool } from "./tools/get-in-app-purchases.js";
+import { registerGetIntegrationsTool } from "./tools/get-integrations.js";
+const server = new McpServer({
+    name: "ff-mcp",
+    version: "0.1.0",
+});
+const client = createClient();
+// Register tools
+registerListProjectsTool(server, client);
+registerListFilesTool(server, client);
+registerGetYamlTool(server);
+registerValidateYamlTool(server, client);
+registerUpdateYamlTool(server, client);
+registerListPagesTool(server, client);
+registerGetPageByNameTool(server, client);
+registerSyncProjectTool(server, client);
+registerGetPageSummaryTool(server);
+registerGetComponentSummaryTool(server);
+registerFindComponentUsagesTool(server);
+registerFindPageNavigationsTool(server);
+registerGetYamlDocsTool(server);
+registerGetAppStateTool(server);
+registerGetApiEndpointsTool(server);
+registerGetDataModelsTool(server);
+registerGetCustomCodeTool(server);
+registerGetThemeTool(server);
+registerGetEditingGuideTool(server);
+registerSearchProjectFilesTool(server);
+registerGetGeneralSettingsTool(server);
+registerGetProjectSetupTool(server);
+registerGetAppSettingsTool(server);
+registerGetInAppPurchasesTool(server);
+registerGetIntegrationsTool(server);
+// Register resources
+registerResources(server, client);
+registerDocsResources(server);
+// Register prompts
+registerGeneratePagePrompt(server);
+registerModifyComponentPrompt(server);
+registerInspectProjectPrompt(server);
+registerDevWorkflowPrompt(server);
+// Start server
+const transport = new StdioServerTransport();
+await server.connect(transport);
+console.error("FlutterFlow MCP server running on stdio");

package/build/prompts/dev-workflow.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerDevWorkflowPrompt(server: McpServer): void;

package/build/prompts/dev-workflow.js

@@ -0,0 +1,68 @@
+import { z } from "zod";
+export function registerDevWorkflowPrompt(server) {
+    server.prompt("flutterflow-dev-workflow", "Efficient workflow guide for developing FlutterFlow apps through MCP tools. References the full YAML docs catalog via get_yaml_docs tool.", {
+        projectId: z
+            .string()
+            .optional()
+            .describe("Optional project ID to include in instructions"),
+    }, ({ projectId }) => ({
+        messages: [
+            {
+                role: "user",
+                content: {
+                    type: "text",
+                    text: `You are an expert FlutterFlow developer using MCP tools to read and modify FlutterFlow projects.
+
+## Documentation
+
+This MCP server includes a comprehensive FlutterFlow YAML reference catalog. Use the \`get_yaml_docs\` tool to look up any schema, pattern, or convention:
+
+- \`get_yaml_docs(topic: "Button")\` — Widget schemas (Button, Text, TextField, Container, etc.)
+- \`get_yaml_docs(topic: "actions")\` — Action chains, triggers, navigation
+- \`get_yaml_docs(topic: "variables")\` — Data binding, variable sources
+- \`get_yaml_docs(topic: "theming")\` — Colors, typography, dimensions
+- \`get_yaml_docs(topic: "editing")\` — Read/edit/add workflows and anti-patterns
+- \`get_yaml_docs()\` — Full index of all available docs
+
+Always consult the docs before writing YAML. They contain validated schemas, field references, enum values, and real examples from production projects.
+
+## Efficient Workflow
+
+${projectId ? `**Project ID:** \`${projectId}\`\n` : ""}
+### Reading / Inspecting
+\`\`\`
+list_projects → sync_project → get_page_summary / get_component_summary
+\`\`\`
+
+### Editing Existing Widgets
+\`\`\`
+list_pages → get_page_by_name → (node-level fetch) → validate_yaml → update_project_yaml
+\`\`\`
+
+### Adding New Widgets
+\`\`\`
+list_pages → get_page_by_name → update widget-tree-outline + push individual node files → validate_yaml → update_project_yaml
+\`\`\`
+
+## Critical YAML Rules
+
+1. **Always update both \`inputValue\` AND \`mostRecentInputValue\`** — they must stay in sync.
+   - **Exceptions:** \`fontWeightValue\` and \`fontSizeValue\` only accept \`inputValue\`.
+2. **Use node-level file keys** for targeted edits, not the full page YAML.
+3. **Always validate before pushing** — call \`validate_yaml\` first.
+4. **Adding widgets requires node-level files** — push the tree outline + individual nodes together.
+5. **Column has no \`mainAxisSize\`** — use \`minSizeValue: { inputValue: true }\` instead.
+6. **AppBar \`templateType\`** — only \`LARGE_HEADER\` is valid. Control height via \`toolbarHeight\`.
+7. **TextField keyboard types** — use \`EMAIL_ADDRESS\`, not \`EMAIL\`.
+
+## Anti-Patterns
+
+- Do NOT call \`list_project_files\` to find pages — use \`list_pages\` instead.
+- Do NOT fetch pages one-by-one — use \`get_page_by_name\`.
+- Do NOT edit full page YAML for a single widget — use node-level file keys.
+- Do NOT guess YAML field names — use \`get_yaml_docs\` to look them up.`,
+                },
+            },
+        ],
+    }));
+}

package/build/prompts/generate-page.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerGeneratePagePrompt(server: McpServer): void;

package/build/prompts/generate-page.js

@@ -0,0 +1,37 @@
+import { z } from "zod";
+export function registerGeneratePagePrompt(server) {
+    server.prompt("generate-page", "Generate a new FlutterFlow page from a natural language description", {
+        projectId: z.string().describe("The FlutterFlow project ID"),
+        description: z
+            .string()
+            .describe("Natural language description of the page to create"),
+    }, ({ projectId, description }) => ({
+        messages: [
+            {
+                role: "user",
+                content: {
+                    type: "text",
+                    text: `You are an expert FlutterFlow developer. Generate a new page for the FlutterFlow project.
+
+## Instructions
+
+1. First, use the list_project_files tool with projectId "${projectId}" to understand the existing project structure.
+2. Use \`get_editing_guide\` with a description of the page you want to create to get the correct YAML schemas, workflow steps, and critical rules.
+3. Then, use get_project_yaml to read a few existing pages to understand the YAML schema and conventions used in this project.
+4. Based on the following description, generate valid FlutterFlow YAML for a new page:
+
+**Page Description:** ${description}
+
+5. Use validate_yaml to check your generated YAML is valid.
+6. If validation passes, use update_project_yaml to push the new page to the project.
+7. If validation fails, fix the errors and try again.
+
+## Important
+- Follow the exact YAML structure you observed in existing pages.
+- Use consistent naming conventions matching the project.
+- YAML content must be single-line strings with escaped newlines (\\n).`,
+                },
+            },
+        ],
+    }));
+}

package/build/prompts/inspect-project.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerInspectProjectPrompt(server: McpServer): void;

package/build/prompts/inspect-project.js

@@ -0,0 +1,30 @@
+import { z } from "zod";
+export function registerInspectProjectPrompt(server) {
+    server.prompt("inspect-project", "Read and summarize a FlutterFlow project's structure, pages, and components", {
+        projectId: z.string().describe("The FlutterFlow project ID"),
+    }, ({ projectId }) => ({
+        messages: [
+            {
+                role: "user",
+                content: {
+                    type: "text",
+                    text: `You are an expert FlutterFlow developer. Inspect and summarize the FlutterFlow project.
+
+## Instructions
+
+1. Use list_project_files with projectId "${projectId}" to get all files.
+2. Use get_project_yaml to read key files like "app-details", "folders", and "authentication".
+3. Read a sample of page and component files to understand the app structure.
+4. Provide a clear summary including:
+   - App name and details
+   - Number of pages and their names
+   - Number of components and their names
+   - Data models / collections
+   - Authentication setup
+   - Any custom code files
+   - Overall architecture observations`,
+                },
+            },
+        ],
+    }));
+}

package/build/prompts/modify-component.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerModifyComponentPrompt(server: McpServer): void;

package/build/prompts/modify-component.js

@@ -0,0 +1,40 @@
+import { z } from "zod";
+export function registerModifyComponentPrompt(server) {
+    server.prompt("modify-component", "Read an existing FlutterFlow component and modify it based on instructions", {
+        projectId: z.string().describe("The FlutterFlow project ID"),
+        fileName: z
+            .string()
+            .describe("The YAML file name of the component to modify"),
+        changes: z
+            .string()
+            .describe("Description of changes to make to the component"),
+    }, ({ projectId, fileName, changes }) => ({
+        messages: [
+            {
+                role: "user",
+                content: {
+                    type: "text",
+                    text: `You are an expert FlutterFlow developer. Modify an existing component in the FlutterFlow project.
+
+## Instructions
+
+1. Use get_project_yaml with projectId "${projectId}" and fileName "${fileName}" to read the current component YAML.
+2. Use \`get_editing_guide\` with a description of the changes you want to make to get the correct YAML schemas and critical rules.
+3. Understand the current structure and widget tree.
+4. Apply the following changes:
+
+**Requested Changes:** ${changes}
+
+5. Use validate_yaml to verify your modified YAML is valid.
+6. If validation passes, use update_project_yaml to push the changes.
+7. If validation fails, fix the errors and try again.
+
+## Important
+- Preserve all existing structure you are not modifying.
+- YAML content must be single-line strings with escaped newlines (\\n).
+- Only change what was requested — do not refactor or reorganize.`,
+                },
+            },
+        ],
+    }));
+}

package/build/resources/docs.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerDocsResources(server: McpServer): void;