diff --git a/web/stories/Chat.stories.mdx b/web/stories/Chat.stories.mdx
new file mode 100644
index 000000000..89e213d31
--- /dev/null
+++ b/web/stories/Chat.stories.mdx
@@ -0,0 +1,76 @@
+import { Meta } from '@storybook/addon-docs';
+import { Typography } from 'antd';
+import UserChatMessage from '../components/chat/ChatUserMessage';
+import { ChatMessage } from '../interfaces/chat-message.model';
+
+<Meta title="Owncast/Documentation/Chat" />
+
+<Typography.Title style={{color: 'var(--primary-color)'}}>Owncast Chat</Typography.Title>
+
+The Owncast chat is a websocket service that is authenticated with an access token.
+
+The chat user interface has a handful of different states.
+
+# App states
+
+## Offline (stream is not live)
+
+- The entire chat UI is hidden.
+
+## Online (stream is live)
+
+- The chat interface is visible.
+
+### Online + chat is disconnected
+
+- Show a loading state within the chat component.
+- Disable the text input box.
+
+## Banned from chat
+
+- The entire chat UI is hidden.
+
+
+## Stream ended
+
+- Chat is visible for the next 5 minutes to allow viewers to say goodbye.
+- Also allows for chat to stay active in case the streamer wants to quickly
+restart their stream or there's a network blip.
+
+## Chat Disconnected
+
+If chat server is not available (websocket disconnects/not available for some reason)
+then the chat input box should become disabled and placeholder should say chat is not availble.
+
+# Message types
+
+## User chat message
+
+The message that is displayed when a chat user sends a message.
+
+## System message
+
+A message sent from the server. Is commonly used for
+
+- Welcome message.
+- An external script or integration sending a message on behalf of the server.
+
+## Action message
+
+A message saying an action has taken place. Is commonly used for
+
+- User joined.
+- User was banned.
+- User changed name.
+- Stream is starting.
+- Stream is ending.
+- An external script or integration sending an action.
+
+## Federated action message
+
+A message stating that somebody on the Fediverse performed an action.
+It is used for:
+
+- User "liked" that the steam went live.
+- User followed the instance.
+- User shared the instance to their followers.
\ No newline at end of file