diff --git a/README.md b/README.md index d60df345d..1425b060b 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,18 @@
- Threadplane — Production-ready chat, threads, and generative UI for AI agents. + The AI agent UI framework for Angular.
-
-
+
+
@@ -33,106 +33,144 @@
---
-Threadplane is a production-ready agent UI framework for Angular. `@threadplane/chat` provides chat surfaces (headless primitives, opinionated compositions, interrupts, generative UI). `@threadplane/langgraph` adapts a LangGraph Platform endpoint into Angular Signals via `provideAgent()` + `injectAgent()`. `@threadplane/ag-ui` bridges any AG-UI-compatible backend into the same chat surface. `@threadplane/render` renders JSON specs to Angular components inside your design system.
+**Threadplane is the open-source Angular AI agent UI framework.** Chat, durable
+threads, human approvals, tool progress, subagents, and generative UI — built on
+Angular Signals and dependency injection, for Angular 20–22. Your backend stays
+where it is: Threadplane adapts a LangGraph or AG-UI agent into a runtime-neutral
+`Agent` contract that the UI consumes, and renders generated UI with the design
+system components you already own.
-`injectAgent()` is the Angular equivalent of LangGraph's React `useStream()` hook, projected through a runtime-neutral `Agent` contract that `@threadplane/chat` consumes. Configure it once with `provideAgent({...})`, inject it into any Angular 20–22 component, and get signal-driven access to messages, status, tool calls, interrupts, subagents, history, and thread management — no subscriptions, no `async` pipe, no zone.js required.
+`MIT · Angular 20–22 · no account, no cloud`
---
## Install
```bash
-npm install @threadplane/langgraph @threadplane/chat
+npm install @threadplane/chat @threadplane/langgraph @langchain/core @langchain/langgraph-sdk marked
```
-**Peer dependencies:** `@angular/core ^20.0.0 || ^21.0.0 || ^22.0.0`, `@langchain/core ^1.1.33`, `@langchain/langgraph-sdk ^1.7.4`, `rxjs ~7.8.0`
+Talking to an AG-UI endpoint instead:
+
+```bash
+npm install @threadplane/chat @threadplane/ag-ui @ag-ui/client @ag-ui/core marked
+```
+
+**Peer dependencies:**
+
+```
+@angular/core ^20.0.0 || ^21.0.0 || ^22.0.0 # every Angular package here
+marked ^15.0.0 || ^16.0.0 # @threadplane/chat
+rxjs ~7.8.0 # @threadplane/chat and both adapters
+@langchain/core ^1.1.33 # @threadplane/langgraph
+@langchain/langgraph-sdk ^1.7.4 # @threadplane/langgraph
+@ag-ui/client * # @threadplane/ag-ui
+@ag-ui/core * # @threadplane/ag-ui
+```
+
+Each package README lists that package's full peer set.
---
-## 30-Second Example
+## First success: a chat surface with no backend
+
+Start with the fake agent. It streams a canned reply in the browser, so the UI
+can be built and tested before a server, a graph, or an API key exists.
```typescript
-// app.config.ts — wire the adapter once
-import { provideAgent } from '@threadplane/langgraph';
+// app.config.ts — no server, no LLM, deterministic output
+import { ApplicationConfig } from '@angular/core';
+import { provideFakeAgent } from '@threadplane/langgraph';
export const appConfig: ApplicationConfig = {
providers: [
- provideAgent({
- apiUrl: 'https://your-langgraph-platform.com',
- assistantId: 'my-agent',
- }),
+ provideFakeAgent({ tokens: ['Hello', ' from', ' Threadplane'] }),
],
};
+```
-// support-chat.component.ts
+```typescript
+// support-agent.component.ts
import { Component } from '@angular/core';
-import { ChatComponent as ThreadplaneChatComponent } from '@threadplane/chat';
import { injectAgent } from '@threadplane/langgraph';
+import { ChatComponent } from '@threadplane/chat';
@Component({
- selector: 'app-support-chat',
- imports: [ThreadplaneChatComponent],
- template: `
-