Repolode
Submit
OvidijusParsiunas

OvidijusParsiunas/deep-chat

A customizable AI chat UI component you can drop into any website with one line of HTML, connecting to LLM APIs or your own backend.

View on GitHubWebsite
Stars
3,743
Forks
459
Open issues
44
Last commit
14 days ago

What is it?

Deep Chat is a front-end chat component that adds an AI chatbot interface to a web page. It can be installed via npm and used as a plain HTML element, or wrapped for React, Vue, Svelte, Angular, Solid and other frameworks.

The component can send requests to your own service, or connect directly from the browser to more than 20 AI APIs such as OpenAI and Claude. Direct connections are intended for prototyping because they expose the API key to the browser. For production, the project recommends routing requests through a proxy server, and it provides server templates for Express, NestJS, Flask, Spring, Go, SvelteKit and Next.js.

Beyond text, it supports file sending and receiving, webcam photo capture, microphone recording, speech-to-text and text-to-speech, and speech-to-speech via the OpenAI Realtime API. A browser-side web model option runs an LLM locally without a server. Messages can be rendered as Markdown, and styling, avatars, buttons and modals are customizable.

Key features

  • 01Drop-in chat element installable via npm or used with React, Vue, Svelte and other frameworks
  • 02Connects to custom APIs or directly to more than 20 AI providers
  • 03Supports file upload, webcam capture and microphone recording
  • 04Speech-to-text input and text-to-speech output
  • 05Markdown rendering and customizable message styling
  • 06Browser-side model hosting with no server required

Use cases

  • Adding an AI support chatbot to a company website
  • Prototyping a chat interface on top of an LLM API
  • Building a voice-enabled assistant in the browser
  • Running a demo chatbot with a local in-browser model

Quick start

  1. 1

    Install the package via npm

    npm install deep-chat
  2. 2

    If using React, install the React package instead

    npm install deep-chat-react
  3. 3

    Add the component to your markup

    <deep-chat></deep-chat>

Things to know

  • Direct connection exposes API keys in the browser and is meant only for prototyping or demos.
  • Connecting to a custom backend requires the service to match Deep Chat's request and response formats.

In collections

AI video & audio toolsAI chatbots & chat clientsStatic site generators & documentation tools

Topics

#chatbot#ui-component#llm#openai#web-components#markdown#speech-to-text#frontend-chat#ai#ai-chatbot

FAQ

What is deep-chat?
A customizable AI chat UI component you can drop into any website with one line of HTML, connecting to LLM APIs or your own backend. Deep Chat is a front-end chat component that adds an AI chatbot interface to a web page. It can be installed via npm and used as a plain HTML element, or wrapped for React, Vue, Svelte, Angular, Solid and other frameworks.
Is deep-chat free to use? What license does it have?
deep-chat is open source under the MIT license. Check the license terms before using it in commercial products.
Is deep-chat still maintained?
Actively maintained. The last commit to deep-chat was on Oct 24, 2026.
What can I use deep-chat for?
Adding an AI support chatbot to a company website Prototyping a chat interface on top of an LLM API Building a voice-enabled assistant in the browser Running a demo chatbot with a local in-browser model
How do I install deep-chat?
Install the package via npm: npm install deep-chat If using React, install the React package instead: npm install deep-chat-react Add the component to your markup: <deep-chat></deep-chat>
Where can I get deep-chat?
The source code and installation instructions are on GitHub: https://github.com/OvidijusParsiunas/deep-chat

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects