diff --git a/packages/client/dashboard/src/api/composite.ts b/packages/client/dashboard/src/api/composite.ts
index cf3e6c1..77027bd 100644
--- a/packages/client/dashboard/src/api/composite.ts
+++ b/packages/client/dashboard/src/api/composite.ts
@@ -102,7 +102,7 @@ export function getComposites({
   pageSize?: number
   pageNumber?: number
   network?: Network
-  published?:boolean
+  published?: boolean
 }): AxiosPromise<ApiResp<DappCompositeDto[]>> {
   let host = APP_API_URL
 
diff --git a/packages/client/dashboard/src/api/model.ts b/packages/client/dashboard/src/api/model.ts
index 6153df3..ed162f2 100644
--- a/packages/client/dashboard/src/api/model.ts
+++ b/packages/client/dashboard/src/api/model.ts
@@ -230,6 +230,25 @@ export function startIndexModel({
   })
 }
 
+export function startIndexModels({
+  modelIds,
+  network,
+  didSession,
+}:{
+  didSession: string,
+  modelIds: string[],
+  network: Network }) {
+  if (!modelIds || modelIds.length===0) return Promise.reject()
+  const resp = Promise.all(modelIds.map((modelId: string) => {
+    return startIndexModel({
+      modelId,
+      network,
+      didSession
+    })
+  }))
+  return resp
+}
+
 export function getStreamsCountWithModels({
   network,
   modelStreamIds,
diff --git a/packages/client/dashboard/src/components/model/CompositeEditor.tsx b/packages/client/dashboard/src/components/model/CompositeEditor.tsx
index 3cf9344..77c68ca 100644
--- a/packages/client/dashboard/src/components/model/CompositeEditor.tsx
+++ b/packages/client/dashboard/src/components/model/CompositeEditor.tsx
@@ -1,38 +1,45 @@
-import { Composite } from '@composedb/devtools'
+import { RuntimeCompositeDefinition } from '@composedb/types'
 import { GraphQLEditor, PassedSchema } from 'graphql-editor'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import styled from 'styled-components'
+import { useCeramicNodeCtx } from '../../context/CeramicNodeCtx'
+import { getRuntimeDefinitionFromEncodedComposite } from '../../utils/composeDBUtils'
 import { schemas } from '../../utils/composedb-types/schemas'
 import CodeDownload from './CodeDownload'
 
-export default function CompositeEditor({
+export default function CompositeEditor ({
   schema,
-  encodedDefinition,
+  encodedDefinition
 }: {
   schema?: string
   encodedDefinition: string
 }) {
+  const { currCeramicNode } = useCeramicNodeCtx()
   const [gqlSchema, setGqlSchema] = useState<PassedSchema>({
     code: schema || '',
-    libraries: schemas.library,
+    libraries: schemas.library
   })
 
-  const runtimeDefinition = useMemo(() => {
-    if (!encodedDefinition) {
-      return null
-    }
-    try {
-      const composite = Composite.from(JSON.parse(encodedDefinition))
-      return composite.toRuntime()
-    } catch (error) {
-      return null
-    }
-  }, [encodedDefinition])
+  const [runtimeDefinition, setRuntimeDefinition] = useState<RuntimeCompositeDefinition|null>(null)
+
+  useEffect(() => {
+    if (!encodedDefinition) return
+    if (!currCeramicNode?.serviceUrl) return
+    getRuntimeDefinitionFromEncodedComposite(
+      encodedDefinition,
+      currCeramicNode?.serviceUrl
+    ).then(
+      (result)=>{
+        setRuntimeDefinition(result)
+      }
+    )
+  }, [currCeramicNode?.serviceUrl, encodedDefinition])
+
 
   useEffect(() => {
     setGqlSchema({
       code: schema || '',
-      libraries: schemas.library,
+      libraries: schemas.library
     })
   }, [schema])
 
@@ -40,7 +47,7 @@ export default function CompositeEditor({
     <Box>
       <EditorBox>
         <GraphQLEditor
-          setSchema={(props) => {
+          setSchema={props => {
             setGqlSchema(props)
           }}
           schema={gqlSchema}
@@ -49,19 +56,19 @@ export default function CompositeEditor({
       <ResultBox>
         {encodedDefinition && (
           <CodeDownload
-            title="Composite"
-            downloadContent={encodedDefinition}
-            downloadFileName="composite.json"
-            content={encodedDefinition}
+            title='Composite Encoded Definition'
+            downloadContent={JSON.stringify(encodedDefinition)}
+            downloadFileName='composite.json'
+            content={JSON.stringify(encodedDefinition,null,2)}
           />
         )}
         {runtimeDefinition && (
           <CodeDownload
-            title="Runtime Definition"
+            title='Composite Runtime Definition'
             downloadContent={`// This is an auto-generated file, do not edit manually
-export const definition = ${runtimeDefinition}`}
-            downloadFileName="runtime-composite.js"
-            content={JSON.stringify(runtimeDefinition)}
+export const definition = ${JSON.stringify(runtimeDefinition)}`}
+            downloadFileName='runtime-composite.js'
+            content={JSON.stringify(runtimeDefinition,null,2)}
           />
         )}
       </ResultBox>
@@ -106,8 +113,8 @@ const EditorBox = styled.div`
 `
 
 const ResultBox = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
+  flex-direction: column;
   gap: 20px;
   margin-top: 20px;
   > div {
diff --git a/packages/client/dashboard/src/components/model/CreateCompositeModal.tsx b/packages/client/dashboard/src/components/model/CreateCompositeModal.tsx
index 2b3e974..cb03568 100644
--- a/packages/client/dashboard/src/components/model/CreateCompositeModal.tsx
+++ b/packages/client/dashboard/src/components/model/CreateCompositeModal.tsx
@@ -5,11 +5,11 @@ import { useCallback, useState } from 'react'
 import styled from 'styled-components'
 import { createDappComposites } from '../../api/composite'
 import useSelectedDapp from '../../hooks/useSelectedDapp'
-import { ModelStream } from '../../types.d'
 import { schemas } from '../../utils/composedb-types/schemas'
 import CloseIcon from '../icons/CloseIcon'
-import { createCompositeFromBrowser } from '../../utils/createCompositeFromBrowser'
+import { createCompositeFromBrowser } from '../../utils/composeDBUtils'
 import { useCeramicNodeCtx } from '../../context/CeramicNodeCtx'
+import { startIndexModels } from '../../api/model'
 
 export default function CreateCompositeModal ({
   closeModal,
@@ -65,6 +65,13 @@ export default function CreateCompositeModal ({
       if (resp.data.code !== 0) {
         throw new Error(resp.data.msg)
       }
+      const modelIds = composite.modelIDs
+      await startIndexModels({
+        modelIds,
+        network: selectedDapp.network,
+        didSession: session.serialize()
+      }).catch(console.error)
+
       if (loadDappComposites) await loadDappComposites()
       closeModal()
     } catch (error) {
diff --git a/packages/client/dashboard/src/components/model/CreateNewModel.tsx b/packages/client/dashboard/src/components/model/CreateNewModel.tsx
index 5c8f2ca..0a534fa 100644
--- a/packages/client/dashboard/src/components/model/CreateNewModel.tsx
+++ b/packages/client/dashboard/src/components/model/CreateNewModel.tsx
@@ -8,7 +8,7 @@ import { useAppCtx } from '../../context/AppCtx'
 import { useCeramicNodeCtx } from '../../context/CeramicNodeCtx'
 import useSelectedDapp from '../../hooks/useSelectedDapp'
 import { schemas } from '../../utils/composedb-types/schemas'
-import { createCompositeFromBrowser } from '../../utils/createCompositeFromBrowser'
+import { createCompositeFromBrowser } from '../../utils/composeDBUtils'
 import CloseIcon from '../icons/CloseIcon'
 import { createDappModels } from '../../api/model'
 
diff --git a/packages/client/dashboard/src/container/DappModelEditor.tsx b/packages/client/dashboard/src/container/DappModelEditor.tsx
index 96ddb89..36e3795 100644
--- a/packages/client/dashboard/src/container/DappModelEditor.tsx
+++ b/packages/client/dashboard/src/container/DappModelEditor.tsx
@@ -40,7 +40,7 @@ export default function DappModelEditor () {
         </div>
         <CompositeEditor
           schema={selectComposite.graphql}
-          encodedDefinition={selectComposite.composite}
+          encodedDefinition={JSON.parse(selectComposite.composite)}
         />
       </Box>
     )
diff --git a/packages/client/dashboard/src/container/ExploreComposite.tsx b/packages/client/dashboard/src/container/ExploreComposite.tsx
index 277fb21..768100b 100644
--- a/packages/client/dashboard/src/container/ExploreComposite.tsx
+++ b/packages/client/dashboard/src/container/ExploreComposite.tsx
@@ -29,6 +29,7 @@ import { bindingDappComposites, getComposites } from '../api/composite'
 import { Dapps } from './ExploreModel'
 import CreateCompositeModal from '../components/model/CreateCompositeModal'
 import LayoutIcon from '../components/icons/LayoutIcon'
+import { startIndexModels } from '../api/model'
 
 export default function ExploreComposite () {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -274,7 +275,23 @@ function Actions ({
         compositeId: composite.id,
         dapp: selectedDapp,
         did: session.serialize()
-      }).catch(console.error)
+      })
+      .then(
+        () => {
+          const models = JSON.parse(composite.composite).models
+          console.log(Object.keys(models))
+          const modelIds = Object.keys(models)
+          startIndexModels({
+            modelIds,
+            network: selectedDapp.network,
+            didSession: session.serialize()
+          }).catch(console.error)
+        },
+        err => {
+          console.error(err)
+        }
+      )
+      .catch(console.error)
     }
     try {
       setAdding(true)
diff --git a/packages/client/dashboard/src/utils/createCompositeFromBrowser.ts b/packages/client/dashboard/src/utils/composeDBUtils.ts
similarity index 84%
rename from packages/client/dashboard/src/utils/createCompositeFromBrowser.ts
rename to packages/client/dashboard/src/utils/composeDBUtils.ts
index 42497db..29b49e2 100644
--- a/packages/client/dashboard/src/utils/createCompositeFromBrowser.ts
+++ b/packages/client/dashboard/src/utils/composeDBUtils.ts
@@ -108,4 +108,29 @@ export async function createCompositeFromBrowser(
   }
 
   return { composite: myComposite, runtimeDefinition: myRuntimeDefinition }
+}
+
+
+export async function getRuntimeDefinitionFromEncodedComposite(
+  encodedDefinition: string,
+  myCeramicNode: string = '',
+) {
+  if (!encodedDefinition) {
+    return null
+  }
+  try {
+    const ceramic = new CeramicClient(myCeramicNode)
+    const composite = await Composite.fromJSON(
+      {
+        definition: JSON.parse(JSON.stringify(encodedDefinition)),
+        ceramic,
+      })
+    // console.log('encoded definition: ', encodedDefinition)
+    // console.log('composite: ', composite)
+    // console.log('runtime definition:', composite.toRuntime())
+    return composite.toRuntime()
+  } catch (error) {
+    console.log('get runtime error', error)
+    return null
+  }
 }
\ No newline at end of file