npm install @leanmcp/ui

import '@leanmcp/ui/styles.css';

import { AppProvider, ToolButton } from '@leanmcp/ui';
import '@leanmcp/ui/styles.css';

function MyApp() {
  return (
    <AppProvider appInfo={{ name: 'MyApp', version: '1.0.0' }}>
      <ToolButton tool="refresh-data" resultDisplay="toast">
        Refresh Data
      </ToolButton>
    </AppProvider>
  );
}

import { GPTAppProvider, useGptTool } from '@leanmcp/ui';
import '@leanmcp/ui/styles.css';

function MyGPTApp() {
  return (
    <GPTAppProvider appName="MyApp">
      <DataDisplay />
    </GPTAppProvider>
  );
}

function DataDisplay() {
  const { call, result, loading } = useGptTool('get-data');
  
  return (
    <button onClick={() => call()} disabled={loading}>
      {loading ? 'Loading...' : 'Fetch Data'}
    </button>
  );
}

import { AppProvider, ToolDataGrid, RequireConnection } from '@leanmcp/ui';
import '@leanmcp/ui/styles.css';

function UsersApp() {
  return (
    <AppProvider appInfo={{ name: 'UsersApp', version: '1.0.0' }}>
      <RequireConnection>
        <ToolDataGrid
          dataTool="list-users"
          columns={[
            { key: 'name', header: 'Name', sortable: true },
            { key: 'email', header: 'Email' },
            { key: 'status', header: 'Status' }
          ]}
          transformData={(result) => ({
            rows: result.users,
            total: result.total
          })}
          rowActions={[
            { label: 'Edit', tool: 'edit-user' },
            { label: 'Delete', tool: 'delete-user', variant: 'destructive' }
          ]}
          pagination
        />
      </RequireConnection>
    </AppProvider>
  );
}

import { Tool } from '@leanmcp/core';
import { UIApp } from '@leanmcp/ui';

class WeatherService {
  @Tool({ description: 'Get weather for a city' })
  @UIApp({ component: './WeatherCard' })
  async getWeather(args: { city: string }) {
    return { city: args.city, temperature: 22, condition: 'Sunny' };
  }
}

import { MockAppProvider } from '@leanmcp/ui/testing';
import { render, screen } from '@testing-library/react';

test('WeatherCard displays temperature', () => {
  render(
    <MockAppProvider 
      toolResult={{ city: 'London', temperature: 20 }}
      isConnected={true}
    >
      <WeatherCard />
    </MockAppProvider>
  );
  expect(screen.getByText('20°C')).toBeInTheDocument();
});