Launching the Design System Concierge
Tags: designsystem, ai, gpt3, opensource
Published: 2023-05-01 22:16:28

## Introduction

We’re thrilled to share the **Design System Concierge** with you! You can reach him here as of today: [https://www.kickstartDS.com/concierge/](https://www.kickstartDS.com/concierge/)

Watch a small dramatization of what interacting with our Concierge looks like:
{% embed https://www.youtube.com/watch?v=9Vuu4XKguak %}

Support us on Product Hunt for our launch:
{% embed https://www.producthunt.com/posts/design-system-concierge %}

### Why build the Design System Concierge?

As **Design Systems** gain more and more traction these days, the amount of available content can be overwhelming, making it difficult to know where to start. Our **AI-powered** Design System Concierge can help by **providing expert guidance** and **pointing you towards the right resources**, whether it’s implementation guides, architecture documents, adoption strategies, or other content.

### Talking to the Design System Concierge

To get the best possible help from our Design System Concierge, we recommend **asking detailed questions** instead of engaging in a chat. The Concierge provides quick and transparent answers by **summarizing the most relevant content sources**. Every answer includes **underlying sources that you can easily check** and visit. Trust us to deliver accurate and reliable information for all your Design System-related queries.

**It’s important to note:** The final answer is generated by [Open AI GPT-3](https://openai.com/product), and even if we take great care to reduce wrong answers you should always dive deeper. **The answer given is not really meant as the end** of your interaction. You can, and should, **dive deeper** into the sections most relevant to your question… as the Concierge is great at giving directions, but **not really** an expert himself (just like in real life!).

## Why use it

### Using it is free

Asking questions to the Concierge is **completely free of charge** for you. We’ve developed, and are now hosting, it, because **we want to help lower barriers of entry** when it comes to Design Systems. After all our mission is to “Democratize Design Systems”.

Additionally it’s a great **opportunity for us to learn** what you, as a user, actually want to know more about when it comes to Design Systems… or features that you’d expect from a Design System. This in turn can **inform us on features** to develop for kickstartDS, **articles** to write, or **documentation** gaps to fill in.

### It’s specialized for Design Systems

Though the final answer is generated by Open AI GPT-3, **all input given to it as context is completely controlled by us**, and our integration. Only carefully selected sources (= domains with content relevant to Design Systems) are added to the Design System database, **backing the Design System Concierge**. This ensures answers will be **relevant to the topic**, and **hallucinations are minimized**. If there’s no relevant content in the database, no answer will be generated!

Additionally, by providing the exact sources the answer by the Concierge was based on, you should **always verify** it for yourself **by diving deeper**.

### It promotes great content & creators

Sometimes it’s **tough to just “google” your answer**, especially when faced with highly individual and specialized questions… the ones you’d typically have when starting out, or when facing new challenges. Good content gets drowned out by a sea of content farm spam. By **asking the Concierge** instead, you get a **highly curated** set of content **as the backbone**. Best case: you discover a new blog author, content creator, or a specific Design System example to follow, helping **inform your Design System journey**.

## How to use it

For a quick overview, have a look at the following, short animation:
{% embed https://www.youtube.com/watch?v=kg4kOh1fX5A %}

### 1. Ask a question

**Enter detailed, natural questions** instead of trying to engineer your way out of a thick jungle of content spam, only armed with the waning powers of [Google-Fu](https://en.wiktionary.org/wiki/Google-fu):
![Screenshot of question entry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5x2ccxq0yvjfh11zmn2.png)

### 2. Get initial answer

**Receive an initial answer** instantly by the Concierge. This should be taken as a first summarization by an enthusiastic, helpful assistant… **not** as **the final expert answer** to end all answers:
![Screenshot of initial answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iguxnfaw2r7ev7bubpr7.png)

### 3. Dive into sources

Even more useful then the initial answer are the **sources provided by the Concierge**. Those are the **sections of text** in our database that were found to be **most relevant** to your question. This should provide full transparency, and enables using the Concierge as a great guide-post to the real content:
![Screenshot of found sources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fojeyx6n1idhcob94uw.png)

## How it’s done

### Database of expert content

The Concierge is backed by a vast database of content curated, prepared and catalogued specifically by us:
![Overview of sources backing the Concierge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy6x96aqz9bs9x3s8jw0.png)

For a full list of sourced domains, [go to the Concierge](https://www.kickstartds.com/concierge/). All domains are listed in the section “Knowledge database” over there.

### Behind the scenes

The implementation is mainly following the [great blog post](https://supabase.com/blog/openai-embeddings-postgres-vector) ([and example code](https://github.com/supabase/supabase/pull/12056/commits/bd83e9ba2f7263440888228e3b29007604d94841)) provided by [Supabase](https://supabase.com/). Their post was also the main reason for me to use **Supabase with their PostgreSQL + Edge Function** for the main hosting in the end. It’s a super nicely packaged solution, was just **loving the DX**!

Going into all the nitty gritty details would go beyond the scope permitted by such a blog post as this one (Spoilers: it includes non-Open AI [SBert embeddings](https://sbert.net/), a [Fly.io](https://fly.io/) Python- / Flask-Webservice for runtime embedding of questions, spliced and transformed [Server Sent-Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) streams, [pgvector](https://github.com/pgvector/pgvector) for database support of embeddings, etc, etc). Feel free to [join us on Discord](https://discord.gg/mwKzD5gejY) to discuss further… and for all the quiet explorers among you, I’ve made a Miro **board outlining how everything works**, over here:
[https://miro.com/app/board/uXjVMdpB0ao=/](https://miro.com/app/board/uXjVMdpB0ao=/)

Alternatively, you can just go to the Github repository for the Concierge. All the code is public and Open Source here:
[https://github.com/kickstartDS/concierge](https://github.com/kickstartDS/concierge)

## Conclusion

We really hope the Design System Concierge can **help you along your personal journey** through the Design System space. We’re thrilled to see all the questions you’ll try on him, and what the overall reaction will be. We already have a truckload of ideas to explore further, if this resonates with the community!

If you want to **give feedback** to us, have ideas on what to improve or add, or just want to tell us what cool answers you’ve received… we’d love for you to **[join our small Discord community](https://discord.gg/mwKzD5gejY)**. Or maybe the Concierge was completely missing the mark for you? We’d especially like to hear about those cases, too!