ChatSpark

Inspiration

This idea was born out of a need to solve a problem we had experienced first-hand: trouble getting the conversation started and keeping it going when networking through LinkedIn + spending a wastefully long time trying to write up the perfect introduction or response.

What it does

ChatSpark is like your own personal networking coach that lives in your Chrome extension area and chimes in when you want it to with suggestions on what you should say next or how you should approach anyone on LinkedIn. The extension can be said to provide three primary functions: Profile Summary (LinkedIn profiles are automatically parsed and summarized), Introduction Message (ChatSpark uses the profile summary to generate a personalized introduction message) and Conversational Assistance (given your goal/intention, ChatSpark suggests what you should say next in your LinkedIn DMs to achieve that goal).

How we built it

ChatSpark's development was mainly divided into three parts:

Establishing Concept, Flow, and Design: We listed out what we wanted the final product to look like, what features and options it should have, and what platforms and technologies it would utilize.
Development and Design: We started designing and developing different parts of the application in parallel: the Python code to call and prompt Cohere, the HTML/CSS/JS for the Chrome extension, and the UI/UX design of the popup.
Debugging and Touchups: With the core functionality implemented, we tested and debugged the extension as well as implementing the designed UI/UX.

Challenges we ran into

Initially we had some trouble defining the scope of the extension and the information that it would be able to parse and analyze from LinkedIn
We ran into a persistent CORS issue when trying to communicate with the Google Cloud functions
Took some time to figure out how to implement "navigation" and multiple views in the extremely limited environment that is a Chrome extension

Accomplishments that we're proud of

Completing the project
Quickly overcame the learning curve for developing Chrome extensions with even a little bit of complexity
Python calls to the Cohere API with carefully crafted prompts as well housing those inside Google Cloud functions effectively

What we learned

How Chrome extensions really work
How to implement and call Google Cloud HTTP functions
How to call and prompt the different Cohere API endpoints (+ Prompt engineering)
New Figma hacks and techniques for design

What's next for ChatSpark

Integrating the extension even more closely with LinkedIn (embedding generated output directly into input field instead of having to copy, extracting and reading richer information from profiles, etc.)
Beta testing with public users to get feedback and find bugs

Built With

chrome
cohere
css
google-cloud
google-cloud-function
html
javascript
python

Submitted to

Hack the North 2023

Created by

I worked on setting up the chrome extension to parse the data on the screen and communicate with the cloud functions, as well as some tuning and tweaking of the Cohere API calls in those functions.

Bassam Ahmed
I tried out different cohere API parameters to bring good results and made sure the workflow is smooth, efficient and enjoyable.

Son Pham
I worked on the backend and collaborated with Son. I developed Python code running on Google Cloud Function.

Lanh Hoang
I was in charge of the UX/UI of our project. With tools such as FigJam and Figma, I was able to list content architecture, use cases, and mock-up user flows. I also assisted in styling the front-end with CSS and HTML.

Jennifer Huynh