diff --git a/client/me/happychat/index.jsx b/client/me/happychat/index.jsx
index 700d13b8d1275..34099b6af7c3f 100644
--- a/client/me/happychat/index.jsx
+++ b/client/me/happychat/index.jsx
@@ -1,26 +1,33 @@
+/** @format */
+
 /**
- * /*
- * 	External Deps
- *
- * @format
+ * External dependencies
  */
-
-import React from 'react';
 import page from 'page';
 import { translate } from 'i18n-calypso';
 
-/*
-	Internal deps
-*/
+/**
+ * Internal dependencies
+ */
 import config from 'config';
 import controller from 'me/controller';
-import Happychat from './main';
 import { setDocumentHeadTitle } from 'state/document-head/actions';
 import { makeLayout, render as clientRender } from 'controller';
+import HappychatClient from 'happychat-client';
+import wpcom from 'lib/wp';
 
 const renderChat = ( context, next ) => {
 	context.store.dispatch( setDocumentHeadTitle( translate( 'Chat', { textOnly: true } ) ) );
-	context.primary = <Happychat />;
+	HappychatClient.open( {
+		nodeId: 'primary',
+		authentication: {
+			type: 'wpcom-proxy-iframe',
+			options: {
+				proxy: wpcom,
+			},
+		},
+		entry: 'chat',
+	} );
 	next();
 };
 
diff --git a/package.json b/package.json
index b51b8c16c3897..22f863ebe7010 100644
--- a/package.json
+++ b/package.json
@@ -259,6 +259,7 @@
     "eslint-plugin-react": "7.1.0",
     "eslint-plugin-wpcalypso": "3.4.1",
     "glob": "7.0.3",
+    "happychat-client": "0.0.1",
     "husky": "0.13.3",
     "ignore": "3.3.5",
     "jest": "22.0.3",
diff --git a/webpack.config.js b/webpack.config.js
index 2abb2ee8a6118..855116906a978 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -174,6 +174,10 @@ const webpackConfig = {
 			},
 			getAliasesForExtensions()
 		),
+		// This is needed because babel doesn't play well with symlinks, this allows node_modules to
+		// work as symlinks (`npm link`) needed when developing one of the dependencies.
+		// Reference https://github.com/babel/babel-loader/issues/149
+		symlinks: false,
 	},
 	node: false,
 	plugins: _.compact( [