diff --git a/editor/assets/default_file_content/animgraph b/editor/assets/default_file_content/animgraph
new file mode 100644
index 00000000000..77795dd2c77
--- /dev/null
+++ b/editor/assets/default_file_content/animgraph
@@ -0,0 +1,45 @@
+{
+  "__type__": "cc.animation.PoseGraph",
+  "_name": "",
+  "_objFlags": 0,
+  "_native": "",
+  "_layers": [
+    {
+      "weight": 1,
+      "mask": null,
+      "blending": 1,
+      "_graph": {
+        "_bindings": {},
+        "name": "Main Layer",
+        "_nodes": [
+          {
+            "_bindings": {},
+            "name": ""
+          },
+          {
+            "_bindings": {},
+            "name": ""
+          },
+          {
+            "_bindings": {},
+            "name": ""
+          }
+        ],
+        "_transitions": [],
+        "_entryNode": {
+          "_bindings": {},
+          "name": ""
+        },
+        "_existNode": {
+          "_bindings": {},
+          "name": ""
+        },
+        "_anyNode": {
+          "_bindings": {},
+          "name": ""
+        }
+      }
+    }
+  ],
+  "_variables": {}
+}
\ No newline at end of file
diff --git a/editor/assets/default_file_content/animgraph.meta b/editor/assets/default_file_content/animgraph.meta
new file mode 100644
index 00000000000..dce50cc080c
--- /dev/null
+++ b/editor/assets/default_file_content/animgraph.meta
@@ -0,0 +1,12 @@
+{
+  "ver": "1.0.0",
+  "importer": "*",
+  "imported": true,
+  "uuid": "e0a8e34d-9242-4f0f-833b-f57e1ffbf285",
+  "files": [
+    "",
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/editor/inspector/assets.js b/editor/inspector/assets.js
index 713fa9fc6de..7aea447edf2 100644
--- a/editor/inspector/assets.js
+++ b/editor/inspector/assets.js
@@ -1,6 +1,7 @@
 const { join } = require('path');
 
 module.exports = {
+    'animation-graph': join(__dirname, './assets/animation-graph.js'),
     'audio-clip': join(__dirname, './assets/audio-clip.js'),
     'auto-atlas': join(__dirname, './assets/texture/auto-atlas.js'), // reuse
     'dragonbones-atlas': join(__dirname, './assets/json.js'), // reuse
diff --git a/editor/inspector/assets/animation-graph.js b/editor/inspector/assets/animation-graph.js
new file mode 100644
index 00000000000..cd1b9a45430
--- /dev/null
+++ b/editor/inspector/assets/animation-graph.js
@@ -0,0 +1,51 @@
+exports.template = `
+<section class="asset-animation-graph">
+    <ui-button class="open">Open Animation Graph Editor Panel</ui-button>
+    <ui-label class="tip" value="Not support multiple selections"></ui-label>
+</section>
+`;
+
+exports.style = `
+.asset-animation-graph {
+   padding-top: 10px;
+   text-align: center;
+}
+
+.asset-animation-graph .tip {
+    color: var(--color-focus-contrast-weakest);
+}
+`;
+
+exports.$ = {
+    constainer: '.asset-animation-graph',
+    button: '.open',
+    tip: '.tip',
+};
+
+exports.ready = function() {
+    this.$.button.addEventListener('click', async () => {
+        await Editor.Message.request('scene', 'execute-scene-script', {
+            name: 'animation-graph',
+            method: 'edit',
+            args: [this.asset.uuid],
+        });
+
+        Editor.Panel.open('animation-graph');
+    });
+};
+
+exports.update = function(assetList, metaList) {
+    this.assetList = assetList;
+    this.metaList = metaList;
+    this.meta = this.metaList[0];
+    this.asset = this.assetList[0];
+
+    if (assetList.length !== 1) {
+        this.$.button.disabled = true;
+        this.$.tip.style.display = 'block';
+    } else {
+        this.$.button.disabled = false;
+        this.$.tip.style.display = 'none';
+    }
+};
+