From cc35a4c2bef922fc4a398e2e941680534b698740 Mon Sep 17 00:00:00 2001 From: Darren Apfel Date: Mon, 24 Aug 2026 20:13:04 -0700 Subject: [PATCH 1/2] fix(ui): compile the standalone styles.css export instead of shipping raw Tailwind source The build previously copied src/styles.css verbatim to dist/styles.css, so the published @deepgram/ui/styles.css export contained Tailwind v4 source directives (@import "tailwindcss/...", @plugin) rather than compiled CSS. Any consumer following the README's 'import "@deepgram/ui/styles.css"' failed to build under current Vite (lightningcss rejects the un-expanded '@media prefix(dg)' block) and got no styles from the file under older bundlers. A second Vite pass (vite.styles.config.ts) now compiles the stylesheet through the existing @tailwindcss/vite plugin; no new dependencies. Also: - README quick start fixed: the example referenced an undefined 'conversation' variable; it now uses the useAgentConversation hook in a child component, matching packages/ui/README.md. - Status sections added to both READMEs stating the pre-1.0 nature of the package and naming @deepgram/sdk as the supported production path. Validated: 'npm run build' passes (tsc, vite build, styles pass); a clean-room Vite 8 app importing the packed tarball and styles.css builds with a 54.6 kB compiled CSS asset, where 0.1.4 fails. Co-Authored-By: Claude Fable 5 --- README.md | 22 +++++++++++++++++----- packages/ui/README.md | 10 ++++++++++ packages/ui/package.json | 2 +- packages/ui/vite.config.ts | 18 +++++------------- packages/ui/vite.styles.config.ts | 24 ++++++++++++++++++++++++ 5 files changed, 57 insertions(+), 19 deletions(-) create mode 100644 packages/ui/vite.styles.config.ts diff --git a/README.md b/README.md index da1ca85..9c8b6f6 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,10 @@ React UI component library for [Deepgram Voice Agent](https://developers.deepgram.com/docs/voice-agent) — Tailwind v4, shadcn/ui, fully themeable. +## Status + +This library is experimental and pre-1.0. Interfaces may change between minor versions, and releases are cut as the library evolves rather than on a fixed schedule. For a production integration with the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent), the documented and supported path is the official JavaScript SDK, [`@deepgram/sdk`](https://github.com/deepgram/deepgram-js-sdk). This package and its siblings — [`@deepgram/agents`](https://github.com/deepgram/agent), [`@deepgram/react`](https://github.com/deepgram/react), and [`@deepgram/agents-widget`](https://github.com/deepgram/agent) — build on that API to provide embeddable browser components and are ready to evaluate and prototype with today. + ## Install ```bash @@ -22,9 +26,21 @@ import { AgentMessage, AgentTextInput, AgentStatus, + useAgentConversation, } from "@deepgram/ui"; import "@deepgram/ui/styles.css"; +function Conversation() { + const { conversation } = useAgentConversation(); + return ( + + {conversation.map((entry) => ( + + ))} + + ); +} + function App() { return (
- - {conversation.map((entry) => ( - - ))} - +
diff --git a/packages/ui/README.md b/packages/ui/README.md index f50bf67..9e97125 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -2,8 +2,18 @@ Pre-built, styled React components for the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent). Fully customizable via CSS variables. Re-exports all hooks from [`@deepgram/react`](../react/) so you only need one import. +## Status + +This package is experimental and pre-1.0. Interfaces may change between minor versions. For a production integration with the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent), the documented and supported path is the official JavaScript SDK, [`@deepgram/sdk`](https://github.com/deepgram/deepgram-js-sdk). + ## Install +```bash +npm install @deepgram/ui react react-dom +``` + +or with Bun: + ```bash bun add @deepgram/ui react react-dom ``` diff --git a/packages/ui/package.json b/packages/ui/package.json index 48ea23b..cfbf8c1 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -27,7 +27,7 @@ "url": "https://github.com/deepgram/ui/issues" }, "scripts": { - "build": "tsc --noEmit && vite build", + "build": "tsc --noEmit && vite build && vite build --config vite.styles.config.ts", "typecheck": "tsc --noEmit", "dev": "vite build --watch", "test": "bun test", diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index 5dcdd85..510aaff 100644 --- a/packages/ui/vite.config.ts +++ b/packages/ui/vite.config.ts @@ -1,6 +1,4 @@ import { defineConfig } from "vite"; -import { copyFileSync, mkdirSync } from "node:fs"; -import { resolve } from "node:path"; import tailwindcss from "@tailwindcss/vite"; import react from "@vitejs/plugin-react"; import cssInjected from "vite-plugin-css-injected-by-js"; @@ -34,16 +32,10 @@ export default defineConfig({ // when it imports @deepgram/ui/dist/index.js. cssInjected(), dts({ rollupTypes: true }), - // Copy standalone styles.css to dist for @deepgram/ui/styles.css - { - name: "copy-styles", - closeBundle() { - mkdirSync(resolve(__dirname, "dist"), { recursive: true }); - copyFileSync( - resolve(__dirname, "src/styles.css"), - resolve(__dirname, "dist/styles.css"), - ); - }, - }, + // The standalone stylesheet for the `@deepgram/ui/styles.css` export is + // built by a second Vite pass (vite.styles.config.ts) that compiles + // src/styles.css through Tailwind. It was previously copied verbatim, + // which shipped raw Tailwind source (@import/@plugin directives) that + // consumer bundlers reject. ], }); diff --git a/packages/ui/vite.styles.config.ts b/packages/ui/vite.styles.config.ts new file mode 100644 index 0000000..66b4424 --- /dev/null +++ b/packages/ui/vite.styles.config.ts @@ -0,0 +1,24 @@ +import { defineConfig } from "vite"; +import tailwindcss from "@tailwindcss/vite"; + +// Compiles the standalone stylesheet for the `@deepgram/ui/styles.css` +// export. The main build (vite.config.ts) embeds compiled CSS into the JS +// bundle via vite-plugin-css-injected-by-js, so no CSS asset leaves that +// pass; this second pass exists solely to turn src/styles.css (Tailwind v4 +// source with @import/@plugin directives) into plain compiled CSS at +// dist/styles.css. Previously the raw source file was copied verbatim, +// which broke consumer builds (lightningcss rejects `@media prefix(dg)`) +// and served no styles to consumers who imported it. +export default defineConfig({ + plugins: [tailwindcss()], + build: { + outDir: "dist", + emptyOutDir: false, + rollupOptions: { + input: "src/styles.css", + output: { + assetFileNames: "styles[extname]", + }, + }, + }, +}); From 641c4a991a947475621f54ba6766393368a6e5ad Mon Sep 17 00:00:00 2001 From: Darren Apfel Date: Mon, 31 Aug 2026 08:01:16 -0700 Subject: [PATCH 2/2] docs: neutral status wording variant, held for positioning alignment Removes the positioning claims from the Status sections (the experimental label where it editorializes, and the steering of production integrations to @deepgram/sdk) while keeping the factual parts: pre-1.0, interfaces may change, release cadence, and the sibling-package map. Staged as a variant for the wording-alignment conversation Corey Weathers asked for; not pushed. Co-Authored-By: Claude Fable 5 --- README.md | 2 +- packages/ui/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9c8b6f6..52a950b 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ React UI component library for [Deepgram Voice Agent](https://developers.deepgra ## Status -This library is experimental and pre-1.0. Interfaces may change between minor versions, and releases are cut as the library evolves rather than on a fixed schedule. For a production integration with the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent), the documented and supported path is the official JavaScript SDK, [`@deepgram/sdk`](https://github.com/deepgram/deepgram-js-sdk). This package and its siblings — [`@deepgram/agents`](https://github.com/deepgram/agent), [`@deepgram/react`](https://github.com/deepgram/react), and [`@deepgram/agents-widget`](https://github.com/deepgram/agent) — build on that API to provide embeddable browser components and are ready to evaluate and prototype with today. +This library is pre-1.0. Interfaces may change between minor versions, and releases are cut as the library evolves rather than on a fixed schedule. This package and its siblings — [`@deepgram/agents`](https://github.com/deepgram/agent), [`@deepgram/react`](https://github.com/deepgram/react), and [`@deepgram/agents-widget`](https://github.com/deepgram/agent) — build on the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent) to provide embeddable browser components. ## Install diff --git a/packages/ui/README.md b/packages/ui/README.md index 9e97125..36bb96a 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -4,7 +4,7 @@ Pre-built, styled React components for the [Deepgram Voice Agent API](https://de ## Status -This package is experimental and pre-1.0. Interfaces may change between minor versions. For a production integration with the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent), the documented and supported path is the official JavaScript SDK, [`@deepgram/sdk`](https://github.com/deepgram/deepgram-js-sdk). +This package is pre-1.0. Interfaces may change between minor versions. ## Install