diff --git a/build.config.ts b/build.config.ts
new file mode 100644
index 0000000..e1f6998
--- /dev/null
+++ b/build.config.ts
@@ -0,0 +1,24 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/module',
+    // Chunking
+    'src/types',
+  ],
+  externals: [
+    'nuxt',
+    'nuxt/schema',
+    'vite',
+    '@nuxt/kit',
+    '@nuxt/schema',
+    // Type only
+    'vue',
+    'vue-router',
+    'unstorage',
+    'nitropack',
+  ],
+  rollup: {
+    inlineDependencies: true,
+  },
+})
diff --git a/client/components/CreateResource.vue b/client/components/CreateResource.vue
new file mode 100644
index 0000000..c201865
--- /dev/null
+++ b/client/components/CreateResource.vue
@@ -0,0 +1,261 @@
+<script lang="ts" setup>
+interface ColumnInterface {
+  name: string
+  type: string
+  required: boolean
+  unique: boolean
+  default: any
+}
+
+const emit = defineEmits(['refresh'])
+const router = useRouter()
+
+const schema = ref(true)
+const bread = reactive({
+  browse: {
+    active: true,
+    type: 'index',
+  },
+  read: {
+    active: true,
+    type: 'show',
+    by: '_id',
+  },
+  edit: {
+    active: true,
+    type: 'put',
+    by: '_id',
+  },
+  add: {
+    active: true,
+    type: 'create',
+  },
+  delete: {
+    active: true,
+    type: 'delete',
+    by: '_id',
+  },
+})
+
+const hasBread = computed({
+  get() {
+    return bread.browse.active || bread.read.active || bread.edit.active || bread.add.active || bread.delete.active
+  },
+  set(value: boolean) {
+    bread.browse.active = value
+    bread.read.active = value
+    bread.edit.active = value
+    bread.add.active = value
+    bread.delete.active = value
+  },
+})
+
+const collection = ref('')
+const fields = ref<ColumnInterface[]>([
+  {
+    name: 'name',
+    type: 'string',
+    required: true,
+    unique: false,
+    default: '',
+  },
+  {
+    name: 'slug',
+    type: 'string',
+    required: true,
+    unique: true,
+    default: '',
+  },
+])
+
+const allFields = computed(() => {
+  return [{ name: '_id', type: 'ObjectId', required: true, unique: true, default: '' }, ...fields.value]
+})
+
+const fieldsLabels = ['name', 'type', 'required', 'unique', 'default']
+const mongoTypes = [
+  'string',
+  'number',
+  'boolean',
+  'date',
+  'object',
+  'array',
+  'ObjectId',
+]
+
+function addField(index: number) {
+  fields.value.splice(index + 1, 0, {
+    name: '',
+    type: 'string',
+    required: false,
+    unique: false,
+    default: '',
+  })
+}
+
+function removeField(index: number) {
+  fields.value.splice(index, 1)
+}
+
+const convertedBread = computed(() => {
+  const breads: any = []
+  // add active breads
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  for (const [key, value] of Object.entries(bread) as any) {
+    if (value.active) {
+      breads.push({
+        type: value.type,
+        by: value?.by,
+      })
+    }
+  }
+  return breads
+})
+
+const formattedFields = computed(() => {
+  return fields.value.map((field) => {
+    for (const [key, value] of Object.entries(field)) {
+      if (!value) {
+        // @ts-expect-error - no need for type checking
+        delete field[key]
+      }
+    }
+
+    return field
+  })
+})
+
+async function generate() {
+  await rpc.generateResource(
+    {
+      name: collection.value,
+      fields: schema.value ? formattedFields.value : undefined,
+    },
+    convertedBread.value,
+  ).then(() => {
+    emit('refresh')
+    router.push(`/?table=${collection.value}`)
+  })
+}
+
+// TODO: remove this
+const toggleSchema = computed({
+  get() {
+    if (hasBread.value)
+      return schema.value = true
+    return schema.value
+  },
+  set(value: boolean) {
+    schema.value = value
+    if (!schema.value)
+      return hasBread.value = false
+    hasBread.value = true
+  },
+})
+</script>
+
+<template>
+  <div relative h-full of-hidden>
+    <div sticky top-0 px8 py4 n-bg-base>
+      <div mb2 flex items-center>
+        <span text-2xl font-bold mt1>
+          <NCheckbox v-model="hasBread" n="green">
+            BREAD
+            |
+          </NCheckbox>
+        </span>
+        <span flex gap4 mt2 ml2>
+          <NCheckbox v-model="bread.browse.active" n="blue">
+            Browse
+          </NCheckbox>
+          <div flex gap2>
+            <NCheckbox v-model="bread.read.active" n="cyan">
+              Read
+            </NCheckbox>
+            <NSelect v-if="bread.read.active" v-model="bread.read.by">
+              <option v-for="field in allFields" :key="field.name" :value="field.name">
+                {{ field.name }}
+              </option>
+            </NSelect>
+          </div>
+          <div flex gap2>
+            <NCheckbox v-model="bread.edit.active" n="purple">
+              Edit
+            </NCheckbox>
+            <NSelect v-if="bread.edit.active" v-model="bread.edit.by">
+              <option v-for="field in allFields" :key="field.name" :value="field.name">
+                {{ field.name }}
+              </option>
+            </NSelect>
+          </div>
+          <NCheckbox v-model="bread.add.active" n="green">
+            Add
+          </NCheckbox>
+          <div flex gap2>
+            <NCheckbox v-model="bread.delete.active" n="red">
+              Delete
+            </NCheckbox>
+            <NSelect v-if="bread.delete.active" v-model="bread.delete.by">
+              <option v-for="field in allFields" :key="field.name" :value="field.name">
+                {{ field.name }}
+              </option>
+            </NSelect>
+          </div>
+        </span>
+      </div>
+      <div flex gap4>
+        <NTextInput v-model="collection" flex-auto placeholder="Collection name" />
+        <NCheckbox v-model="toggleSchema" n="green">
+          Generate Schema
+        </NCheckbox>
+      </div>
+    </div>
+    <div v-if="schema" px8 h-full of-auto>
+      <div grid="~ cols-1" gap-2 mt4 mb4>
+        <div grid="~ cols-6" text-center>
+          <div v-for="label in fieldsLabels" :key="label">
+            {{ label }}
+          </div>
+          <div>
+            Actions
+          </div>
+        </div>
+        <div v-for="(column, index) in fields" :key="index" grid="~ cols-6" items-center text-center gap4>
+          <div>
+            <NTextInput v-model="column.name" />
+          </div>
+          <div>
+            <NSelect v-model="column.type">
+              <option v-for="mongoType of mongoTypes" :key="mongoType" :value="mongoType">
+                {{ mongoType }}
+              </option>
+            </NSelect>
+          </div>
+          <div>
+            <NCheckbox v-model="column.required" n="green" />
+          </div>
+          <div>
+            <NCheckbox v-model="column.unique" n="cyan" />
+          </div>
+          <div>
+            <NTextInput v-if="column.type === 'string'" v-model="column.default" type="string" n="orange" />
+            <NTextInput v-else-if="column.type === 'number'" v-model="column.default" type="number" n="orange" />
+            <NCheckbox v-else-if="column.type === 'boolean'" v-model="column.default" n="orange" />
+            <NTextInput v-else-if="column.type === 'date'" v-model="column.default" type="date" n="orange" />
+            <NTextInput v-else-if="column.type === 'ObjectId'" placeholder="no-default" disabled n="orange" />
+            <NTextInput v-else v-model="column.default" n="orange" />
+          </div>
+          <div flex justify-center gap2>
+            <NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
+            <NIconButton icon="carbon-delete" n="red" @click="removeField(index)" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <NButton absolute right-8 bottom-8 px8 py2 icon="carbon-magic-wand-filled" n="green" @click="generate">
+      Create
+    </NButton>
+  </div>
+</template>
+
+<style></style>
diff --git a/client/components/DatabaseDetail.vue b/client/components/DatabaseDetail.vue
index aa161a8..5b5eb7b 100644
--- a/client/components/DatabaseDetail.vue
+++ b/client/components/DatabaseDetail.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable no-console -->
 <script lang="ts" setup>
 const props = defineProps({
   collection: {
@@ -10,9 +11,15 @@ const documents = computedAsync(async () => {
   return await rpc.listDocuments(props.collection)
 })
 
+const schema = computedAsync<any>(async () => {
+  return await rpc.resourceSchema(props.collection)
+})
+
 const fields = computed(() => {
   if (documents.value && documents.value.length > 0)
     return Object.keys(documents.value[0])
+  if (schema.value)
+    return Object.keys(schema.value)
   return []
 })
 
@@ -34,14 +41,21 @@ const filtered = computed(() => {
 })
 
 function addDocument() {
+  // TODO: validate & show errors
   if (editing.value)
     return
   editing.value = true
   selectedDocument.value = {}
-  for (const field of fields.value) {
-    if (field !== '_id')
+  if (schema.value) {
+    for (const field of Object.keys(schema.value))
       selectedDocument.value[field] = ''
   }
+  else {
+    for (const field of fields.value) {
+      if (field !== '_id')
+        selectedDocument.value[field] = ''
+    }
+  }
 
   const parent = dbContainer.value?.parentElement
   parent?.scrollTo(0, parent.scrollHeight)
@@ -78,10 +92,22 @@ async function deleteDocument(document: any) {
   rpc.deleteDocument(props.collection, document._id)
   documents.value = await rpc.listDocuments(props.collection)
 }
+
+const fieldRefs = ref<any>([])
+function handleClickOutside(event: any) {
+  if (editing.value && selectedDocument.value) {
+    const isClickOutside = fieldRefs.value.every((ref: any) => !ref.contains(event.target))
+    if (isClickOutside) {
+      editing.value = false
+      selectedDocument.value = null
+    }
+  }
+}
+// useEventListener('click', handleClickOutside)
 </script>
 
 <template>
-  <div ref="dbContainer">
+  <div ref="dbContainer" :class="{ 'h-full': !documents?.length }">
     <Navbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
       <template #actions>
         <NButton icon="carbon:add" n="green" @click="addDocument">
@@ -93,7 +119,7 @@ async function deleteDocument(document: any) {
         <span>{{ documents?.length }} documents in total</span>
       </div>
     </Navbar>
-    <table v-if="documents?.length" w-full mb10 :class="{ 'editing-mode': editing }">
+    <table v-if="documents?.length || selectedDocument" w-full mb10 :class="{ 'editing-mode': editing }">
       <thead>
         <tr>
           <th v-for="field of fields" :key="field" text-start>
@@ -105,8 +131,9 @@ async function deleteDocument(document: any) {
         </tr>
       </thead>
       <tbody>
+        <!-- hover-bg-green hover-bg-opacity-5 hover-text-green cursor-pointer -->
         <tr v-for="document in filtered" :key="document._id" :class="{ isEditing: editing && selectedDocument._id === document._id }">
-          <td v-for="field of fields" :key="field" hover-bg-green hover-bg-opacity-5 hover-text-green cursor-pointer @dblclick="editDocument(document)">
+          <td v-for="field of fields" :key="field" ref="fieldRefs" @dblclick="editDocument(document)">
             <template v-if="editing && selectedDocument._id === document._id">
               <input v-model="selectedDocument[field]" :disabled="field === '_id'">
             </template>
diff --git a/client/components/DrawerRight.vue b/client/components/DrawerRight.vue
new file mode 100644
index 0000000..e5d1231
--- /dev/null
+++ b/client/components/DrawerRight.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+  navbar?: HTMLElement
+  autoClose?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const el = ref<HTMLElement>()
+
+const { height: top } = useElementSize(() => props.navbar, undefined, { box: 'border-box' })
+
+onClickOutside(el, () => {
+  if (props.modelValue && props.autoClose)
+    emit('close')
+}, {})
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="duration-200 ease-in"
+    enter-from-class="transform translate-x-1/1"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-200 ease-out"
+    leave-from-class="opacity-100"
+    leave-to-class="transform translate-x-1/1"
+  >
+    <div
+      v-if="modelValue"
+      ref="el"
+      border="l base"
+      flex="~ col gap-1"
+      fixed bottom-0 right-0 z-10 z-20 of-auto text-sm backdrop-blur-lg
+      :style="{ top: `${top}px` }"
+      v-bind="$attrs"
+    >
+      <NIconButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" @click="$emit('close')" />
+      <div relative h-full w-full of-auto>
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>
diff --git a/client/pages/index.vue b/client/pages/index.vue
index df4ff79..94aa2bf 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 const route = useRoute()
+const router = useRouter()
 
 const selectedCollection = ref()
 // TODO: check connection
@@ -21,13 +22,26 @@ onMounted(() => {
   if (route.query.table)
     selectedCollection.value = route.query.table
 })
+
+async function dropCollection(table: any) {
+  await rpc.dropCollection(table.name)
+  collections.value = await rpc.listCollections()
+  if (selectedCollection.value === table.name) {
+    selectedCollection.value = undefined
+    router.push({ name: 'index' })
+  }
+}
+
+async function refresh() {
+  collections.value = await rpc.listCollections()
+}
 </script>
 
 <template>
   <PanelLeftRight :min-left="13" :max-left="20">
     <template #left>
-      <div py1 px4>
-        <Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt1>
+      <div px4>
+        <Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
           <div flex items-center gap2>
             <NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" />
             <NIconButton w-full mb1.5 icon="carbon-data-base" title="Connection Name" :class="connected ? 'text-green-5' : 'text-orange-5'" />
@@ -40,14 +54,27 @@ onMounted(() => {
               <NIcon icon="carbon-db2-database" />
               {{ table.name }}
             </span>
-            <!-- TODO: -->
-            <NIconButton icon="carbon-overflow-menu-horizontal" />
+            <div flex gap2>
+              <NIconButton block n="red" icon="carbon-delete" @click="dropCollection(table)" />
+              <!-- <NIconButton icon="carbon-overflow-menu-horizontal" /> -->
+            </div>
           </NuxtLink>
         </div>
       </div>
     </template>
     <template #right>
       <DatabaseDetail v-if="selectedCollection" :collection="selectedCollection" />
+      <div v-else class="n-panel-grids-center">
+        <div class="n-card n-card-base" px6 py2>
+          <span op75 flex items-center>
+            <NIcon icon="carbon:db2-buffer-pool" mr2 />
+            Select a collection to start
+          </span>
+        </div>
+      </div>
     </template>
   </PanelLeftRight>
+  <DrawerRight v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
+    <CreateResource @refresh="refresh" />
+  </DrawerRight>
 </template>
diff --git a/module.cjs b/module.cjs
new file mode 100644
index 0000000..e3ecaed
--- /dev/null
+++ b/module.cjs
@@ -0,0 +1,15 @@
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+module.exports = function (...args) {
+  const nuxt = this.nuxt || args[1]
+  let _a
+  let version = (nuxt == null ? void 0 : nuxt._version) || (nuxt == null ? void 0 : nuxt.version) || ((_a = nuxt == null ? void 0 : nuxt.constructor) == null ? void 0 : _a.version) || ''
+  version = version.replace(/^v/g, '')
+  // Nuxt DevTools is not compatible with Nuxt 2, disabled
+  if (version.startsWith('2.')) {
+    return
+  }
+  return import('./dist/module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./dist/module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)
diff --git a/package.json b/package.json
index 2dca8e5..875542d 100644
--- a/package.json
+++ b/package.json
@@ -11,24 +11,28 @@
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
-      "require": "./dist/module.cjs",
+      "require": "./module.cjs",
       "import": "./dist/module.mjs"
-    }
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.mjs"
+    },
+    "./*": "./*"
   },
-  "main": "./dist/module.cjs",
+  "main": "./module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build && npm run build:client",
+    "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
     "build:client": "nuxi generate client",
-    "dev:client": "nuxi dev client --port 3300",
-    "dev": "npm run play:dev",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare client",
-    "play:dev": "nuxi dev playground",
-    "play:prod": "npm run prepack && nuxi dev playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "build:module": "nuxt-build-module",
+    "dev": "nuxi dev playground",
+    "dev:prepare": "nuxi prepare client",
+    "dev:prod": "npm run build && pnpm dev",
+    "release": "npm run lint && npm run test && npm run build && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest watch"
diff --git a/playground/server/api/users.get.ts b/playground/server/api/users.get.ts
deleted file mode 100644
index a3fc245..0000000
--- a/playground/server/api/users.get.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { User } from '~/server/models/user.schema'
-
-export default defineEventHandler(() => {
-  return User.find()
-})
diff --git a/playground/server/models/user.schema.ts b/playground/server/models/user.schema.ts
deleted file mode 100644
index 83449d3..0000000
--- a/playground/server/models/user.schema.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { defineMongooseModel } from '#nuxt/mongoose'
-
-export const User = defineMongooseModel({
-  name: 'User',
-  schema: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-})
-
-// export const User = defineMongooseModel('User', {
-//   name: {
-//     type: String,
-//     required: true,
-//   },
-// })
diff --git a/src/module.ts b/src/module.ts
index 5530b12..2127b53 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,4 +1,4 @@
-import { addServerPlugin, addTemplate, createResolver, defineNuxtModule, logger } from '@nuxt/kit'
+import { addImportsDir, addServerPlugin, addTemplate, createResolver, defineNuxtModule, logger } from '@nuxt/kit'
 import { pathExists } from 'fs-extra'
 import { tinyws } from 'tinyws'
 import { defu } from 'defu'
@@ -22,6 +22,8 @@ export default defineNuxtModule<ModuleOptions>({
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
+    addImportsDir(resolve('./runtime/composables'))
+
     if (!options.uri)
       console.warn('Missing `MONGODB_URI` in `.env`')
 
diff --git a/src/runtime/composables/useMongoose.ts b/src/runtime/composables/useMongoose.ts
new file mode 100644
index 0000000..7878dcd
--- /dev/null
+++ b/src/runtime/composables/useMongoose.ts
@@ -0,0 +1,8 @@
+import type { mongo } from 'mongoose'
+import { connection } from 'mongoose'
+
+export function useMongoose(): { db: mongo.Db } {
+  return {
+    db: connection?.db,
+  }
+}
diff --git a/src/server-rpc/database.ts b/src/server-rpc/database.ts
index 121569a..3958b49 100644
--- a/src/server-rpc/database.ts
+++ b/src/server-rpc/database.ts
@@ -1,39 +1,38 @@
 import { logger } from '@nuxt/kit'
-import { ObjectId } from 'mongodb'
-import { connection as MongooseConnection, connect } from 'mongoose'
+import mongoose from 'mongoose'
 import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 
 export function setupDatabaseRPC({ nuxt }: NuxtDevtoolsServerContext): any {
   // TODO:
-  connect('mongodb://127.0.0.1:27017/arcane')
+  mongoose.connect('mongodb://127.0.0.1:27017/arcane')
 
   return {
     async createCollection(name: string) {
-      return await MongooseConnection.db.createCollection(name)
+      return await mongoose.connection.db.createCollection(name)
     },
     async listCollections() {
-      return await MongooseConnection.db.listCollections().toArray()
+      return await mongoose.connection.db.listCollections().toArray()
     },
     async getCollection(name: string) {
-      return MongooseConnection.db.collection(name)
+      return mongoose.connection.db.collection(name)
     },
     async dropCollection(name: string) {
-      return await MongooseConnection.db.collection(name).drop()
+      return await mongoose.connection.db.collection(name).drop()
     },
 
     async createDocument(collection: string, data: any) {
-      return await MongooseConnection.db.collection(collection).insertOne(data)
+      return await mongoose.connection.db.collection(collection).insertOne(data)
     },
     async listDocuments(collection: string) {
-      return await MongooseConnection.db.collection(collection).find().toArray()
+      return await mongoose.connection.db.collection(collection).find().toArray()
     },
     async getDocument(collection: string, document: {}) {
-      return await MongooseConnection.db.collection(collection).findOne({ document })
+      return await mongoose.connection.db.collection(collection).findOne({ document })
     },
     async updateDocument(collection: string, data: any) {
       const { _id, ...rest } = data
       try {
-        return await MongooseConnection.db.collection(collection).findOneAndUpdate({ _id: new ObjectId(_id) }, { $set: rest })
+        return await mongoose.connection.db.collection(collection).findOneAndUpdate({ _id: new mongoose.Types.ObjectId(_id) }, { $set: rest })
       }
       catch (error) {
         logger.log(error)
@@ -41,7 +40,7 @@ export function setupDatabaseRPC({ nuxt }: NuxtDevtoolsServerContext): any {
       }
     },
     async deleteDocument(collection: string, id: string) {
-      return await MongooseConnection.db.collection(collection).deleteOne({ _id: new ObjectId(id) })
+      return await mongoose.connection.db.collection(collection).deleteOne({ _id: new mongoose.Types.ObjectId(id) })
     },
   } satisfies Partial<ServerFunctions>
 }
diff --git a/src/server-rpc/index.ts b/src/server-rpc/index.ts
index 651b4bf..8fa84b1 100644
--- a/src/server-rpc/index.ts
+++ b/src/server-rpc/index.ts
@@ -8,6 +8,7 @@ import { parse, stringify } from 'flatted'
 import type { Nuxt } from 'nuxt/schema'
 import type { ClientFunctions, ModuleOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
 import { setupDatabaseRPC } from './database'
+import { setupResourceRPC } from './resource'
 
 export function setupRPC(nuxt: Nuxt, options: ModuleOptions): any {
   const serverFunctions = {} as ServerFunctions
@@ -63,6 +64,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions): any {
 
   Object.assign(serverFunctions, {
     ...setupDatabaseRPC(ctx),
+    ...setupResourceRPC(ctx),
   } satisfies Partial<ServerFunctions>)
 
   const wsClients = new Set<WebSocket>()
diff --git a/src/server-rpc/resource.ts b/src/server-rpc/resource.ts
new file mode 100644
index 0000000..defdf8c
--- /dev/null
+++ b/src/server-rpc/resource.ts
@@ -0,0 +1,77 @@
+import fs from 'fs-extra'
+import { resolve } from 'pathe'
+import mongoose from 'mongoose'
+import type { Collection, NuxtDevtoolsServerContext, Resource, ServerFunctions } from '../types'
+import { generateApiRoute, generateSchemaFile } from '../utils/schematics'
+import { capitalize, pluralize, singularize } from '../utils/formatting'
+
+export function setupResourceRPC({ nuxt }: NuxtDevtoolsServerContext): any {
+  return {
+    async generateResource(collection: Collection, resources: Resource[]) {
+      const singular = singularize(collection.name).toLowerCase()
+      const plural = pluralize(collection.name).toLowerCase()
+      const dbName = capitalize(singular)
+
+      if (collection.fields) {
+        if (!fs.existsSync(resolve(nuxt.options.serverDir, 'models', `${singular}.schema.ts`))) {
+          fs.ensureDirSync(resolve(nuxt.options.serverDir, 'models'))
+          fs.writeFileSync(
+            resolve(nuxt.options.serverDir, 'models', `${singular}.schema.ts`),
+            generateSchemaFile(dbName, collection.fields),
+          )
+        }
+
+        const model = { name: dbName, path: `${singular}.schema` }
+        fs.ensureDirSync(resolve(nuxt.options.serverDir, `api/${plural}`))
+
+        // create resources
+        // TODO: fix this
+        resources.forEach((route: any) => {
+          let fileName = ''
+          if (route.type === 'index')
+            fileName = 'index.get.ts'
+
+          if (route.type === 'create')
+            fileName = 'create.post.ts'
+
+          if (route.type === 'show')
+            fileName = `[_${route.by}].get.ts`.replace('_', '')
+
+          if (route.type === 'put')
+            fileName = `[_${route.by}].put.ts`.replace('_', '')
+
+          if (route.type === 'delete')
+            fileName = `[_${route.by}].delete.ts`.replace('_', '')
+
+          if (!fs.existsSync(resolve(nuxt.options.serverDir, `api/${plural}`, fileName))) {
+            const content = generateApiRoute(route.type, { model, by: route.by })
+            fs.writeFileSync(resolve(nuxt.options.serverDir, 'api', plural, fileName), content)
+          }
+        })
+      }
+
+      // create collection if not exists
+      if (!mongoose.connection.modelNames().includes(dbName))
+        await mongoose.connection.db.createCollection(plural)
+
+      // create rows and columns
+    },
+    async resourceSchema(collection: string) {
+      // get schema file if exists
+      const singular = singularize(collection).toLowerCase()
+
+      if (fs.existsSync(resolve(nuxt.options.serverDir, 'models', `${singular}.schema.ts`))) {
+        const schemaPath = resolve(nuxt.options.serverDir, 'models', `${singular}.schema.ts`)
+
+        const content = fs.readFileSync(schemaPath, 'utf-8').match(/schema: \{(.|\n)*\}/g)
+
+        if (content) {
+          const schemaString = content[0].replace('schema: ', '').slice(0, -3)
+          // eslint-disable-next-line no-eval
+          const schema = eval(`(${schemaString})`)
+          return schema
+        }
+      }
+    },
+  } satisfies Partial<ServerFunctions>
+}
diff --git a/src/types/rpc.ts b/src/types/rpc.ts
index efb9286..a90c32f 100644
--- a/src/types/rpc.ts
+++ b/src/types/rpc.ts
@@ -1,18 +1,32 @@
 export interface ServerFunctions {
-  // collections
+  // Database - collections
   createCollection(name: string): Promise<any>
   listCollections(): Promise<any>
   getCollection(name: string): Promise<any>
   dropCollection(name: string): Promise<any>
 
-  // documents
+  // Database - documents
   createDocument(collection: string, data: any): Promise<any>
   listDocuments(collection: string): Promise<any>
   getDocument(collection: string, id: string): Promise<any>
   updateDocument(collection: string, data: any): Promise<any>
   deleteDocument(collection: string, id: string): Promise<any>
+
+  // Resource - api-routes & models
+  generateResource(collection: Collection, resources: Resource[]): Promise<any>
+  resourceSchema(collection: string): Promise<any>
 }
 
 export interface ClientFunctions {
   refresh(type: string): void
 }
+
+export interface Collection {
+  name: string
+  fields?: {}[]
+}
+
+export interface Resource {
+  type: string
+  by?: string
+}
diff --git a/src/utils/formatting.ts b/src/utils/formatting.ts
new file mode 100644
index 0000000..4ee9177
--- /dev/null
+++ b/src/utils/formatting.ts
@@ -0,0 +1,22 @@
+import plrz from 'pluralize'
+
+export function normalizeToKebabOrSnakeCase(str: string) {
+  const STRING_DASHERIZE_REGEXP = /\s/g
+  const STRING_DECAMELIZE_REGEXP = /([a-z\d])([A-Z])/g
+  return str
+    .replace(STRING_DECAMELIZE_REGEXP, '$1-$2')
+    .toLowerCase()
+    .replace(STRING_DASHERIZE_REGEXP, '-')
+}
+
+export function pluralize(str: string) {
+  return plrz.plural(str)
+}
+
+export function singularize(str: string) {
+  return plrz.singular(str)
+}
+
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
diff --git a/src/utils/schematics.ts b/src/utils/schematics.ts
new file mode 100644
index 0000000..b70e25b
--- /dev/null
+++ b/src/utils/schematics.ts
@@ -0,0 +1,49 @@
+import { capitalize } from './formatting'
+
+export function generateSchemaFile(name: string, fields: any) {
+  name = capitalize(name)
+  // TODO: fix spacing
+  const outputObject = JSON.stringify(
+    fields.reduce((acc: any, curr: any) => {
+      const { name, ...rest } = curr
+      acc[name] = rest
+      return acc
+    }, {}),
+    null, 2)
+    .replace(/"([^"]+)":/g, '$1:')
+    .replace(/"(\w+)":/g, '$1:')
+    .replace(/\s*"\w+":/g, match => match.trim())
+    .replace(/"string"/g, '\'string\'')
+
+  return `import { defineMongooseModel } from '#nuxt/mongoose'
+
+export const ${name}Schema = defineMongooseModel({
+  name: '${name}',
+  schema: ${outputObject},
+})
+`
+}
+
+export function generateApiRoute(action: string, { model, by }: { model: { name: string; path: string }; by?: string }) {
+  const modelName = capitalize(model.name)
+  const schemaImport = `import { ${modelName}Schema } from '../../models/${model.path}'\n\n`
+  const operation = {
+    index: `return await ${modelName}Schema.find({})`,
+    create: `return await new ${modelName}Schema(body).save()`,
+    show: `return await ${modelName}Schema.findOne({ ${by}: event.context.params?.${by} })`,
+    put: `return await ${modelName}Schema.findOneAndUpdate({ ${by}: event.context.params?.${by} }, body, { new: true })`,
+    delete: `return await ${modelName}Schema.findOneAndDelete({ ${by}: event.context.params?.${by} })`,
+  }[action]
+
+  const main = `try {
+    ${operation}
+  }
+  catch (error) {
+    return error
+  }`
+
+  return `${schemaImport}export default defineEventHandler(async (event) => {
+  ${(action === 'create' || action === 'put') ? `const body = await readBody(event)\n  ${main}` : main}
+})
+`
+}