diff --git a/client/package.json b/client/package.json
index 1bd2179..6d241ef 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,7 +16,8 @@
     "serve": "vue-cli-service serve --mode development",
     "build": "vue-cli-service build",
     "build:emoji": "ts-node --files --project tools/tsconfig.json tools/emoji.ts",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name neko-lib 'src/lib.ts'"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/client/src/lib.ts b/client/src/lib.ts
new file mode 100644
index 0000000..ee5d248
--- /dev/null
+++ b/client/src/lib.ts
@@ -0,0 +1,57 @@
+// accessor
+import { accessor as neko } from './store'
+
+// Plugins
+import Logger from './plugins/log'
+import Client from './plugins/neko'
+import Axios from './plugins/axios'
+import Swal from './plugins/swal'
+import Anime from './plugins/anime'
+
+// Components
+import Connect from '~/components/connect.vue'
+import Video from '~/components/video.vue'
+import Menu from '~/components/menu.vue'
+import Side from '~/components/side.vue'
+import Controls from '~/components/controls.vue'
+import Members from '~/components/members.vue'
+import Emotes from '~/components/emotes.vue'
+import About from '~/components/about.vue'
+import Header from '~/components/header.vue'
+
+const exportMixin = {
+  computed: {
+    $accessor() {
+      return neko
+    },
+    $client () {
+      return window.$client
+    }
+  },
+}
+
+function extend (component: any) {
+  return component
+    .use(Logger)
+    .use(Axios)
+    .use(Swal)
+    .use(Anime)
+    .use(Client)
+    .extend(exportMixin)
+}
+
+
+export const components = {
+  'neko-connect': extend(Connect),
+  'neko-video': extend(Video),
+  'neko-menu': extend(Menu),
+  'neko-side': extend(Side),
+  'neko-controls': extend(Controls),
+  'neko-members': extend(Members),
+  'neko-emotes': extend(Emotes),
+  'neko-about': extend(About),
+  'neko-header': extend(Header),
+}
+
+neko.initialise()
+export default neko
\ No newline at end of file
diff --git a/client/src/neko/index.ts b/client/src/neko/index.ts
index 611e8fd..73885a6 100644
--- a/client/src/neko/index.ts
+++ b/client/src/neko/index.ts
@@ -28,10 +28,16 @@ interface NekoEvents extends BaseEvents {}
 export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   private $vue!: Vue
   private $accessor!: typeof accessor
+  private url!: string
 
   init(vue: Vue) {
+    this.initWithSettings(vue, '')
+  }
+
+  initWithSettings(vue: Vue, url: string) {
     this.$vue = vue
     this.$accessor = vue.$accessor
+    this.url = url
   }
 
   private cleanup() {
@@ -43,12 +49,12 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   }
 
   login(password: string, displayname: string) {
-    const url =
+    const url = 
       process.env.NODE_ENV === 'development'
         ? `ws://${location.host.split(':')[0]}:${process.env.VUE_APP_SERVER_PORT}/`
         : `${/https/gi.test(location.protocol) ? 'wss' : 'ws'}://${location.host}/`
 
-    this.connect(url, password, displayname)
+    this.connect(this.url || url, password, displayname)
   }
 
   logout() {