webflow-mcp-bridge-app

Webflow Designer MCP Bridge App

A Designer Extension App built for Webflow, a bridge between Webflow and MCP server.

Project Structure

• public/: Static assets served directly.
• src/: Contains the main application code.
  • assets/: Static assets imported by the app (images, fonts, etc.).
  • components/: Reusable React components (likely including shadcn/ui components).
  • config/: Configuration files for the application.
  • hooks/: Custom React hooks.
  • lib/: Utility functions and potentially shared logic (e.g., cn for classnames).
  • services/: Modules for interacting with external APIs or services (e.g., WebSocket connections).
  • utils/: General utility functions.
  • App.css: Styles specific to the main App component.
  • App.tsx: Main application component.
  • index.css: Global styles for the application.
  • main.tsx: Application entry point.
  • vite-env.d.ts: TypeScript definitions for Vite environment variables.
• dist/: Build output directory used by Webflow.
• vite.config.ts: Vite build configuration.
• tailwind.config.js: Tailwind CSS configuration.
• tsconfig.json: TypeScript configuration.
• package.json: Project dependencies and scripts.
• webflow.json: Webflow Extension configuration.
• components.json: shadcn/ui configuration.

Getting Started

Prerequisites

• Node.js
• pnpm
• Webflow Account and Site (to test the extension)
• Webflow CLI (for serving and bundling)

Installation

1. Clone the repository.
2. Install dependencies:

   pnpm install
   

Development

Run the development server (usually on port 1337):

pnpm dev

Create a App on Webflow

Refer to the Webflow Developer Docs for instructions on creating a new Designer Extension app on Webflow.

Once you have created and configured your app in Webflow:

(Note: When developing locally with pnpm dev, you typically configure your Webflow app to use your local development server URL, e.g., http://localhost:1337. This is often simpler than using the webflow extension serve command.)

Building

To create a production build and bundle it for Webflow:

pnpm run build

This command will:

1. Generate the production-ready static files in the dist/ directory.
2. Create a bundle.zip file

The generated bundle.zip file can be uploaded to your Webflow App settings as the production version of your Designer Extension.