Deep Chat

Active
GitHub TypeScript MIT

Description

Deep Chat is a fully customizable AI chat component that drops into any website with a single line of code, with native support for 20+ models, file uploads, voice, and Markdown rendering.

Key Features

  • One-line embed - <deep-chat></deep-chat> works in any framework with no setup
  • 20+ direct AI API integrations - OpenAI, Claude, Gemini, and Open WebUI supported in the browser
  • Multimodal input - text, files, webcam photos, microphone audio, and Speech-to-Speech
  • Markdown and custom elements - structured text, code blocks, and MathJax/Katex support
  • OpenAI Realtime API - low-latency Speech-to-Speech conversations out of the box
  • Focus mode and browser storage - session recovery for input text and scroll position

Use Cases

💡 Dropping a ChatGPT-style widget into a marketing site with one line of HTML
💡 Building a multimodal assistant that takes photos via webcam and answers by voice
💡 Connecting directly to OpenAI / Claude / Gemini APIs without writing backend glue
💡 Embedding AI chat in a React, Vue, Angular, Svelte, or vanilla JS app
💡 Streaming Markdown and code blocks into a developer documentation portal

Tags

chat-ui web-component react multimodal voice

Categories

💬 Chat UI

Quick Start

npm install deep-chat
# Or for React:
npm install deep-chat-react

# Add to your markup:
<deep-chat directConnection='{"openAI": {"key": "YOUR_KEY"}}'></deep-chat>

# Or with React:
import { Chat } from "deep-chat-react";
export default function App() {
  return (
    <Chat
      directConnection={{ openAI: { key: "YOUR_KEY" } }}
      textInput={{ placeholder: { text: "Ask me anything..." } }}
    />
  );
}
Visit GitHub Visit Website View Docs

Related Projects