@leanmcp/ui 0.3.0 → 0.3.1

package/README.md

@@ -1,6 +1,42 @@
-# @leanmcp/ui
-
-**MCP-Native UI SDK for React** - Build rich, interactive MCP Apps with first-class tool integration.
+<p align="center">
+  <img
+    src="https://raw.githubusercontent.com/LeanMCP/leanmcp-sdk/refs/heads/main/assets/logo.svg"
+    alt="LeanMCP Logo"
+    width="400"
+  />
+</p>
+
+<p align="center">
+  <strong>@leanmcp/ui</strong><br/>
+  MCP-Native UI SDK for React — Build rich, interactive MCP Apps with first-class tool integration.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@leanmcp/ui">
+    <img src="https://img.shields.io/npm/v/@leanmcp/ui" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/@leanmcp/ui">
+    <img src="https://img.shields.io/npm/dm/@leanmcp/ui" alt="npm downloads" />
+  </a>
+  <a href="https://docs.leanmcp.com/sdk/ui">
+    <img src="https://img.shields.io/badge/Docs-leanmcp-0A66C2?" />
+  </a>
+  <a href="https://discord.com/invite/DsRcA3GwPy">
+    <img src="https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white" />
+  </a>
+  <a href="https://x.com/LeanMcp">
+    <img src="https://img.shields.io/badge/@LeanMCP-f5f5f5?logo=x&logoColor=000000" />
+  </a>
+</p>
+
+## Features
+
+- **MCP-Native Components** — ToolButton, ToolSelect, ToolForm, ToolDataGrid, and more
+- **First-Class Tool Integration** — Components that natively call MCP tools
+- **ChatGPT Apps Support** — Build apps that work inside ChatGPT with `@GPTApp`
+- **Streaming Support** — Handle partial/streaming tool responses
+- **Theming** — Automatic host theme adaptation (light/dark)
+- **Testing Utilities** — `MockAppProvider` for unit testing
 
 ## Installation
 
@@ -126,6 +162,42 @@ function MyApp() {
 />
 ```
 
+## Server-Side Integration
+
+Use `@UIApp` decorator to register your React component as an MCP resource.
+
+> **Note:** Use a relative path string for the `component` property, not an imported component. This avoids importing React components on the server side.
+
+```typescript
+// mcp/dashboard/index.ts
+import { UIApp } from '@leanmcp/core';
+
+export class DashboardService {
+  @UIApp({
+    component: './Dashboard',  // Path relative to this file
+    name: 'dashboard',
+    title: 'Analytics Dashboard'
+  })
+  dashboard() {}
+}
+```
+
+## ChatGPT Integration
+
+Use `@GPTApp` for ChatGPT-specific apps:
+
+```typescript
+import { GPTApp } from '@leanmcp/ui';
+
+export class SlackService {
+  @GPTApp({
+    component: './SlackApp',  // Path relative to this file
+    name: 'slack-composer'
+  })
+  slackComposer() {}
+}
+```
+
 ## Theming
 
 The SDK uses CSS variables compatible with MCP host theming. Import the styles:
@@ -155,6 +227,19 @@ test('renders tool result', () => {
 });
 ```
 
+## Documentation
+
+- [Full Documentation](https://docs.leanmcp.com/sdk/ui)
+- [Component Reference](https://docs.leanmcp.com/sdk/ui-components)
+- [Hooks Reference](https://docs.leanmcp.com/sdk/ui-hooks)
+- [ChatGPT Apps Guide](https://docs.leanmcp.com/sdk/ui-gpt-apps)
+
+## Related Packages
+
+- [@leanmcp/core](https://www.npmjs.com/package/@leanmcp/core) — Core MCP server functionality
+- [@leanmcp/cli](https://www.npmjs.com/package/@leanmcp/cli) — CLI for project scaffolding
+- [@leanmcp/auth](https://www.npmjs.com/package/@leanmcp/auth) — Authentication decorators
+
 ## License
 
 MIT

package/dist/index.js

@@ -1689,6 +1689,10 @@ function useResource(uri, options = {}) {
     fetchResource
   ]);
   React26.useEffect(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
     if (refreshInterval && refreshInterval > 0 && isConnected && !skip) {
       intervalRef.current = setInterval(() => {
         fetchResource().catch(() => {
@@ -2619,7 +2623,10 @@ function useToolSubscription(toolName, options = {}) {
     setIsPolling(false);
   }, []);
   const start = React26.useCallback(() => {
-    stop();
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
     setIsPolling(true);
     toolHook.call(args).catch(() => {
     });
@@ -2630,8 +2637,7 @@ function useToolSubscription(toolName, options = {}) {
   }, [
     toolHook.call,
     args,
-    interval,
-    stop
+    interval
   ]);
   const refresh = React26.useCallback(async () => {
     return toolHook.call(args);