langchain-ai/langgraphjs
1
0
Fork 0
mirror of https://github.com/langchain-ai/langgraphjs.git synced 2026-08-24 21:51:39 -04:00
Code Issues 108 Packages Projects Releases 20 Wiki Activity
Files
@langchain/langgraph-sdk@1.9.31
langgraphjs/examples/ai-elements
T
History
dependabot[bot] b5d71cb62c chore(deps): bump nanoid from 5.1.6 to 5.1.16 (#2678) 
Bumps [nanoid](https://github.com/ai/nanoid) from 5.1.6 to 5.1.16.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ai/nanoid/releases">nanoid's
releases</a>.</em></p>
<blockquote>
<h2>5.1.16</h2>
<ul>
<li>Fixed forever loop on negative size (by <a
href="https://github.com/spokodev"><code>@​spokodev</code></a>).</li>
</ul>
<h2>5.1.15</h2>
<ul>
<li>Fixed random pool corruption on big ID sizes.</li>
</ul>
<h2>5.1.14</h2>
<ul>
<li>Fixed npm package size regression.</li>
</ul>
<h2>5.1.13</h2>
<ul>
<li>Fixed npm package size regression.</li>
</ul>
<h2>5.1.12</h2>
<ul>
<li>Moved to npm Provenance and Staged Publishing.</li>
</ul>
<h2>5.1.11</h2>
<ul>
<li>Fixed breaking Nano ID by requesting big ID.</li>
</ul>
<h2>5.1.10</h2>
<ul>
<li>Fixed breaking nanoid by requesting big ID (by <a
href="https://github.com/alanzabihi"><code>@​alanzabihi</code></a>).</li>
</ul>
<h2>5.1.9</h2>
<ul>
<li>Fixed npm package size regression.</li>
</ul>
<h2>5.1.8</h2>
<ul>
<li>Made <code>cusatomAlphabet</code> 75% faster (by <a
href="https://github.com/saripovdenis"><code>@​saripovdenis</code></a>).</li>
</ul>
<h2>5.1.7</h2>
<ul>
<li>Added <code>--version</code> to CLI (by <a
href="https://github.com/mahmoodhamdi"><code>@​mahmoodhamdi</code></a>).</li>
<li>Updated <code>nanoid.js</code> for CDN (by <a
href="https://github.com/mahmoodhamdi"><code>@​mahmoodhamdi</code></a>).</li>
<li>Fixed docs (by <a
href="https://github.com/mahmoodhamdi"><code>@​mahmoodhamdi</code></a>).</li>
<li>Fixed <code>customRandom</code> types (by <a
href="https://github.com/oguimbal"><code>@​oguimbal</code></a>).</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ai/nanoid/blob/main/CHANGELOG.md">nanoid's
changelog</a>.</em></p>
<blockquote>
<h2>5.1.16</h2>
<ul>
<li>Fixed forever loop on negative size (by <a
href="https://github.com/spokodev"><code>@​spokodev</code></a>).</li>
</ul>
<h2>5.1.15</h2>
<ul>
<li>Fixed random pool corruption on big ID sizes.</li>
</ul>
<h2>5.1.14</h2>
<ul>
<li>Fixed npm package size regression.</li>
</ul>
<h2>5.1.13</h2>
<ul>
<li>Fixed npm package size regression.</li>
</ul>
<h2>5.1.12</h2>
<ul>
<li>Moved to npm Provenance and Staged Publishing.</li>
</ul>
<h2>5.1.11</h2>
<ul>
<li>Fixed breaking Nano ID by requesting big ID.</li>
</ul>
<h2>5.1.10</h2>
<ul>
<li>Fixed breaking Nano ID by requesting big ID (by <a
href="https://github.com/alanzabihi"><code>@​alanzabihi</code></a>).</li>
</ul>
<h2>5.1.9</h2>
<ul>
<li>Fixed npm package size regression.</li>
</ul>
<h2>5.1.8</h2>
<ul>
<li>Made <code>cusatomAlphabet</code> 75% faster (by <a
href="https://github.com/saripovdenis"><code>@​saripovdenis</code></a>).</li>
</ul>
<h2>5.1.7</h2>
<ul>
<li>Added <code>--version</code> to CLI (by <a
href="https://github.com/mahmoodhamdi"><code>@​mahmoodhamdi</code></a>).</li>
<li>Updated <code>nanoid.js</code> for CDN (by <a
href="https://github.com/mahmoodhamdi"><code>@​mahmoodhamdi</code></a>).</li>
<li>Fixed docs (by <a
href="https://github.com/mahmoodhamdi"><code>@​mahmoodhamdi</code></a>).</li>
<li>Fixed <code>customRandom</code> types (by <a
href="https://github.com/oguimbal"><code>@​oguimbal</code></a>).</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/ai/nanoid/commit/6ccc67bbaba71d3d77a21d9b636f4171a268ce49"><code>6ccc67b</code></a>
Release 5.1.16 version</li>
<li><a
href="https://github.com/ai/nanoid/commit/6de05d794f62eeac3f527c74c34c6af0c1d32e49"><code>6de05d7</code></a>
fix(non-secure): clamp negative size with a smaller guard (<a
href="https://redirect.github.com/ai/nanoid/issues/600">#600</a>)</li>
<li><a
href="https://github.com/ai/nanoid/commit/39259034f7c095cb36a97d6937e77905a659808a"><code>3925903</code></a>
Update dependencies</li>
<li><a
href="https://github.com/ai/nanoid/commit/0b695546fd83beaa943fbcaa90af92895dd0ae55"><code>0b69554</code></a>
Release 5.1.15 version</li>
<li><a
href="https://github.com/ai/nanoid/commit/333c5a030e2ee68ba08c43c5021d8dbf1724cef5"><code>333c5a0</code></a>
Backport changelog changes for 3.x</li>
<li><a
href="https://github.com/ai/nanoid/commit/266eb637236f654a6ec6ef58fd12213e1bafe35b"><code>266eb63</code></a>
Remove debug code</li>
<li><a
href="https://github.com/ai/nanoid/commit/a6a94d3f8dc71513864f2e9ae9c5a4130511b34c"><code>a6a94d3</code></a>
Do not allow to pollute pool</li>
<li><a
href="https://github.com/ai/nanoid/commit/93fe197416c337bb732e2665be2c60968379dc73"><code>93fe197</code></a>
Reduce ID size</li>
<li><a
href="https://github.com/ai/nanoid/commit/e4b7a9a7323006474ec939112aec68944b0da097"><code>e4b7a9a</code></a>
Release 5.1.14 version</li>
<li><a
href="https://github.com/ai/nanoid/commit/6bf3469b5b33137e385e07dc1c84779cf3e38956"><code>6bf3469</code></a>
Update release action</li>
<li>Additional commits viewable in <a
href="https://github.com/ai/nanoid/compare/5.1.6...5.1.16">compare
view</a></li>
</ul>
</details>
<details>
<summary>Maintainer changes</summary>
<p>This version was pushed to npm by <a
href="https://www.npmjs.com/~GitHub%20Actions">GitHub Actions</a>, a new
releaser for nanoid since your current version.</p>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=nanoid&package-manager=npm_and_yarn&previous-version=5.1.6&new-version=5.1.16)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/langchain-ai/langgraphjs/network/alerts).

</details>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: langsmith-fleet[bot] <langsmith-fleet[bot]@users.noreply.github.com>
2026-08-11 16:09:26 -07:00
..
src
feat(core): event based streaming (#2314)
2026-05-05 00:13:12 -07:00
.gitignore
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
agent.ts
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
CHANGELOG.md
chore: version packages (#2572)
2026-06-25 14:47:39 -07:00
components.json
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
index.html
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
langgraph.json
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
package.json
chore(deps): bump nanoid from 5.1.6 to 5.1.16 (#2678)
2026-08-11 16:09:26 -07:00
README.md
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
tsconfig.app.json
feat(core): event based streaming (#2314)
2026-05-05 00:13:12 -07:00
tsconfig.json
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
tsconfig.node.json
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
turbo.json
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00
vite.config.ts
docs: add integration examples for ai elements and assistant-ui (#2180)
2026-03-13 08:09:35 -07:00

README.md

AI Elements — Tool-Calling Agent Example

A self-contained chat interface built with AI Elements components and @langchain/react. It demonstrates how to build a production-quality agentic UI using AI Elements' composable component library.

What it shows

  • Tool call rendering — each tool invocation is displayed with Tool + ToolHeader + ToolContent + ToolInput + ToolOutput, updating live as the agent streams tool input and then the result.
  • Reasoning display — when the model emits reasoning tokens, a collapsible Reasoning block auto-opens during streaming and collapses when done.
  • Streaming messages — Message + MessageContent + MessageResponse renders streaming markdown via Streamdown with full GFM support.
  • Loading skeleton — a Shimmer placeholder appears between the user's message and the first assistant token.
  • Conversation scroll — Conversation + ConversationContent + ConversationScrollButton auto-scrolls and shows a jump-to-bottom button when you scroll up.
  • Message actions — MessageActions + MessageAction with a copy button appears below the last assistant message once streaming completes.
  • Prompt input — PromptInput + PromptInputBody + PromptInputTextarea + PromptInputFooter + PromptInputSubmit provides a full-featured input bar.
  • Suggestions — Suggestions + Suggestion shows preset prompts before the first message.

Agent

The backing LangGraph agent (packages/agents/src/agents/ai-elements.ts) is a createReactAgent with two simulated tools:

Tool Description
get_weather Returns deterministic simulated weather data for any city
web_search Returns three simulated search result objects for any query

No external API keys are required for the tools.

Setup

Create a .env file in this folder (optional — defaults are provided):

VITE_LANGGRAPH_API_URL=http://localhost:2024   # default when running locally
VITE_LANGGRAPH_ASSISTANT_ID=ai_elements         # matches langgraph.json

Run

Start the LangGraph agent server first:

bun run dev --filter=@langchain/playground-agents

Then start this preview app:

bun run dev --filter=@langchain/playground-preview-ai-elements

Open http://localhost:4600.

AI Elements components used

Component Source file
Conversation, ConversationContent, ConversationScrollButton src/components/ai-elements/conversation.tsx
Message, MessageContent, MessageResponse, MessageActions, MessageAction src/components/ai-elements/message.tsx
PromptInput, PromptInputBody, PromptInputTextarea, PromptInputFooter, PromptInputSubmit src/components/ai-elements/prompt-input.tsx
Tool, ToolHeader, ToolContent, ToolInput, ToolOutput src/components/ai-elements/tool.tsx
Reasoning, ReasoningTrigger, ReasoningContent src/components/ai-elements/reasoning.tsx
Suggestions, Suggestion src/components/ai-elements/suggestion.tsx
Shimmer src/components/ai-elements/shimmer.tsx

Components live in src/components/ai-elements/ and are owned by this package (shadcn/AI Elements registry style — copy-paste, not a node_modules import).

Vite path alias

AI Elements components use bare src/ imports (e.g. import { cn } from "src/lib/utils"). The vite.config.ts maps src → ./src to resolve these correctly in both dev and production builds.

Reference in New Issue View Git Blame Copy Permalink