init

Dockerfile

@@ -1,57 +1,14 @@
 FROM python:3.10-slim
 
-
-# Install Node to run Motion Canvas
-WORKDIR /tmp/node
-RUN apt-get update && apt-get install -y nodejs npm
-
-
-# without v prefix!
-ARG MC_VERSION="3.17.2" 
-ENV NODE_ENV=$MC_VERSION
-
-WORKDIR /motion-canvas
-
-RUN yes '' | npm init -y @motion-canvas@$MC_VERSION
-
-WORKDIR /motion-canvas/my-animation
-ENV MC_PROJECT_DIR=/motion-canvas/my-animation
-
-# copy the vite.config.ts file to the project to get deterministic output filenames under dist/project.js
-COPY docker/vite.config.ts ./vite.config.ts
-
-# if we build here, we have to clean up the project every time before building a new one...
-RUN npm install
-RUN npm run build
-
-# clone examples
-#ENV MC_EXAMPLE_PROJECTS_DIR=/motion-canvas/examples
-#RUN git clone https://github.com/motion-canvas/examples /motion-canvas/example-projects
-
-ENV MC_DIR=/motion-canvas/motion-canvas
-ENV MC_DOCS_DIR=/motion-canvas/motion-canvas/packages/docs
-RUN git clone https://github.com/motion-canvas/motion-canvas /motion-canvas/motion-canvas
-
-ENV MC_EXAMPLE_SCENES_DIR=/motion-canvas/motion-canvas/packages/examples/src/scenes
-
-# docs/docs and docs/api should be interesting resources
-
-RUN git clone https://github.com/motion-canvas/motion-canvas.github.io /motion-canvas/docs
-
-
 # Install Gradio and copy local files
 WORKDIR /app
-RUN pip install --no-cache-dir gradio[mcp] gradio_motioncanvasplayer
+RUN pip install --no-cache-dir gradio[mcp] gradio_motioncanvasplayer modal
 COPY . .
 
 RUN mkdir -p /app/public
-ENV MC_EXAMPLES_MD_FILE=/app/public/examples.md
-RUN python extract_examples.py $MC_EXAMPLES_MD_FILE
-
 
 RUN useradd -m -u 1000 user
 
-RUN chown -R user:user /motion-canvas
 RUN chown -R user:user /app
 USER user
 

README.md

@@ -1,22 +1,22 @@
 ---
-title: Motion Canvas MCP Server 
+title: Motion Canvas Agent
 emoji: 📹
 colorFrom: red
 colorTo: gray
 sdk: docker
 app_port: 7860
 pinned: true
-short_description: Gradio MCP Server to build Motion Canvas projects
+short_description: Agent to create Motion Canvas animations
 tags:
-    - mcp-server-track
+    - agent-demo-track
 ---
 
 ## Run
 
 
 ```bash
-docker build -t mc-gradio .
-docker run -p 7860:7860 mc-gradio
+docker build -t mc_agent .
+docker run -p 7860:7860 mc_agent
 ```
 
-The Motion Canvas Gradio MCP server will be available under *http://localhost:7860*
+The Gradio Interface will be available under *http://localhost:7860*

app.py

@@ -6,152 +6,43 @@ import uuid
 import subprocess
 from threading import Timer
 from functools import partial
+import time
 
 from gradio_motioncanvasplayer import MotionCanvasPlayer
 
+# Just some example project that servers as a placholder in the beginning
 example_project_path = "https://prathje-gradio-motioncanvasplayer.hf.space/gradio_api/file=/home/user/app/public/project-3.17.2.js"
 
-loading_project_path = ""
-failed_project_path = ""
+def slow_echo(message, history):
+    for i in range(len(message)):
+        time.sleep(0.3)
+        yield "You typed: " + message[: i+1]
 
-BUILD_TIMEOUT = 60
-
-gr.set_static_paths(paths=[os.path.join(os.path.dirname(__file__), "public")])
-
-def get_local_path(project_id):
-    return os.path.join(os.path.dirname(__file__), "public", "project-" + project_id + ".js")
-
-def get_public_path(project_id):
-    return "/gradio_api/file=" + get_local_path(project_id)
-
-
-def build_project(code):
-    # TODO: as soon as gradio supports states, we should keep the project_id for some time...
-    # TODO: In the best case, we start a separate container for each project!
-    yield loading_project_path, "Preparing project...", 
-
-    # generate a random uuid for the project
-    project_id = str(uuid.uuid4())
-
-    tmp_dir = os.path.join("/tmp/", project_id)
-
-    shutil.copytree(os.environ['MC_PROJECT_DIR'], tmp_dir, dirs_exist_ok=False, symlinks=True)
-    acc_logs = ""
-    
-    try:
-        yield loading_project_path, "Building project...", 
-
-        # write code to scene.ts
-        with open(os.path.join(tmp_dir, "src", "scenes",  "example.tsx"), "w") as f:
-            f.write(code)
-
-        process = subprocess.Popen(
-            "npm run build",
-            stdout=subprocess.PIPE,
-            stderr=subprocess.PIPE,
-            text=True,
-            shell=True,
-            cwd=tmp_dir
-        )
-
-        timer = Timer(BUILD_TIMEOUT, process.kill)
-        timer.start()
-        
-        while True:
-            line = process.stdout.readline()
-            if line:
-                acc_logs += line.rstrip() + "\n"
-                yield loading_project_path, acc_logs
-            elif process.poll() is not None:
-                break
-        timer.cancel()
-        
-        # Check for errors
-        stderr_output = process.stderr.read()
-        if stderr_output:
-            acc_logs += "\n" + stderr_output
-            
-        # check if the build was successful
-        if process.returncode != 0:
-            yield failed_project_path, acc_logs
-        else:
-            # copy dist/project.js to get_local_path(id)
-            shutil.copy(os.path.join(tmp_dir, "dist", "project.js"), get_local_path(project_id))
-            yield get_public_path(project_id), acc_logs       
-
-    except Exception as e:
-        yield failed_project_path, acc_logs + "\n" + "Error building project: " + str(e)
-        
-    finally:
-         # cleanup tmp dir
-        shutil.rmtree(tmp_dir)
-
-def load_example_code(example_name):
-    return open(os.path.join(os.path.dirname(__file__), "examples", example_name + ".tsx")).read()
-
-def build_example(example_name):
-    iterator = build_project(load_example_code(example_name))
-    last = next(iterator)
-    for last in iterator:
-        continue
-
-    path = last[0]
-    assert path, "Failed to build example: " + last[1]
-    return path
-
-print("Building examples...")
-EXAMPLES = [
-    {
-        "name": "Gradio + Motion Canvas",
-        "code": load_example_code("gradio-motion-canvas-example"),
-        "project_path": build_example("gradio-motion-canvas-example")
-    },
-    {
-        "name": "Logo",
-        "code": load_example_code("logo"),
-        "project_path": build_example("logo")
-    },
-    {
-        "name": "Latex", 
-        "code": load_example_code("latex"),
-        "project_path": build_example("latex")
-    },
-    {
-        "name": "Code",
-        "code": load_example_code("code"),
-        "project_path": build_example("code")
-    },
-
-]
-print("Examples built!")
+gr.ChatInterface(
+    fn=slow_echo, 
+    type="messages"
+).launch()
 
 def load_example(example):
     return example['project_path'], example['code'], ""
 
-with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
-    gr.Markdown("# Motion Canvas MCP Server")
-    gr.Markdown("Leverage the power of Motion Canvas to create your own animations using TypeScript.")
+with gr.Blocks(theme=gr.themes.Monochrome()) as app:
+    gr.Markdown("# Motion Canvas Agent")
+    gr.Markdown("Leverage the power of AI and Motion Canvas to create animations using TypeScript.")
     with gr.Row():
         with gr.Column():
-            gr.Markdown("## TypeScript Input for Your Scene")
-            code = gr.Code(value=EXAMPLES[0]['code'], language="typescript")
-            submit = gr.Button("Build", variant="primary")
+            gr.Markdown("## Chat")
+            chat = gr.ChatInterface(fn=slow_echo, type="messages")
+
+        
+            gr.Markdown("### TypeScript Code for Your Scene")
+            code = gr.Code(value="", language="typescript")
             logs = gr.Textbox(value="", label="Build Logs", interactive=False)
+
         with gr.Column():
             gr.Markdown("## Preview")
-            player = MotionCanvasPlayer(EXAMPLES[0]['project_path'], auto=True, quality=0.5, width=1920, height=1080, variables="{}")
-
-            for ex in EXAMPLES:
-                btn = gr.Button("Load Example: " + ex["name"], variant="secondary")
-                btn.click(partial(load_example, ex), outputs=[player, code, logs], api_name=False)
-            
-            with gr.Accordion("Show Example Scenes"):
-                example_md_content = open(os.path.join(os.path.dirname(__file__), "public", "examples.md")).read()
-                example_md = gr.Markdown(example_md_content, render=True)
-                load_example_md_btn = gr.Button("Load Example", variant="secondary", render=False)
-                load_example_md_btn.click(lambda: example_md_content, outputs=[example_md], api_name="examples")
-
-    submit.click(build_project, inputs=[code], outputs=[player, logs], api_name="build")
+            player = MotionCanvasPlayer(example_project_path, auto=True, quality=0.5, width=1920, height=1080, variables="{}")
 
 if __name__ == "__main__":
-    demo.launch(mcp_server=True, strict_cors=False)
+    # Todo: In the future we could allow to use this as an MCP server, but right now, we need the preview to be available.
+    app.launch(mcp_server=False, strict_cors=False)

extract_examples.py

@@ -1,23 +0,0 @@
-import os
-import glob
-from pathlib import Path
-
-assert os.environ['MC_EXAMPLE_SCENES_DIR']
-assert os.environ['MC_EXAMPLES_MD_FILE']
-
-with open(os.environ['MC_EXAMPLES_MD_FILE'], "w") as f:
-
-    f.write(f"# Examples for Motion Canvas Scenes in TypeScript\n")
-
-    for filepath in glob.iglob(os.environ['MC_EXAMPLE_SCENES_DIR'] + '/**/*.tsx', recursive=True):
-        name = Path(filepath).stem
-
-        f.write(f"\n\n## {name}\n")
-        
-        # read the file
-        with open(filepath, 'r') as scene_file:
-            content = scene_file.read()
-
-        f.write(f"```tsx\n")    
-        f.write(content)
-        f.write(f"```\n")

gradio_mcp_server.py

@@ -0,0 +1,113 @@
+from mcp.server.fastmcp import FastMCP
+import json
+import sys
+import io
+import time
+from gradio_client import Client
+
+sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8', errors='replace')
+sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8', errors='replace')
+
+mcp = FastMCP("Gradio MCP Server")
+
+clients = {}
+
+BUILD_SERVER_SPACE_ID = "https://agents-mcp-hackathon-gradio-motioncanvas-mcp-server.hf.space/"
+DOCS_SERVER_SPACE_ID = "https://agents-mcp-hackathon-gradio-motioncanvas-docs-mcp-server.hf.space/"
+
+def get_client(space_id: str) -> Client:
+    """Get or create a Gradio client for the specified space."""
+    if space_id not in clients:
+        clients[space_id] = Client(space_id)
+    return clients[space_id]
+
+@mcp.tool()
+async def build_project(code: str) -> str:
+    """Build a Motion Canvas project using the Gradio Motion MCP server.
+    
+    Args:
+        code: TypeScript code for the scene to build
+    """
+
+    try:
+        result = get_client(BUILD_SERVER_SPACE_ID).predict(
+            code,
+            api_name="/build"
+        )
+        
+        if isinstance(result, list) and len(result) >= 2:
+            project_path = result[0]
+            logs = result[1]
+
+            if project_path:
+                return json.dumps({
+                    "type": "mc_project",
+                    "project_path": project_path,
+                    "message": f"Built project at {project_path}",
+                    "logs": result[1]
+                })
+            else:
+                return json.dumps({
+                    "type": "error",
+                    "message": f"Error building project:\n" + logs
+                })
+        else:
+            return json.dumps({
+                "type": "error",
+                "message": f"Error building project"
+            })
+
+    except Exception as e:
+        return json.dumps({
+            "type": "error",
+            "message": f"Error building project: {str(e)}"
+        })
+
+@mcp.tool()
+async def build_project(code: str) -> str:
+    """Build a Motion Canvas project using the Gradio Motion MCP server.
+    
+    Args:
+        code: TypeScript code for the scene to build
+    """
+    client = Client("https://agents-mcp-hackathon-gradio-motioncanvas-mcp-server.hf.space/")
+
+
+
+
+    try:
+        result = client.predict(
+            code,
+            api_name="/build"
+        )
+        
+        if isinstance(result, list) and len(result) >= 2:
+            project_path = result[0]
+            logs = result[1]
+
+            if project_path:
+                return json.dumps({
+                    "type": "mc_project",
+                    "project_path": project_path,
+                    "message": f"Built project at {project_path}",
+                    "logs": result[1]
+                })
+            else:
+                return json.dumps({
+                    "type": "error",
+                    "message": f"Error building project:\n" + logs
+                })
+        else:
+            return json.dumps({
+                "type": "error",
+                "message": f"Error building project"
+            })
+
+    except Exception as e:
+        return json.dumps({
+            "type": "error",
+            "message": f"Error building project: {str(e)}"
+        })
+
+if __name__ == "__main__":
+    mcp.run(transport='stdio')