@assistant-ui/mcp-docs-server 0.2.2 → 0.3.0

package/.docs/raw/docs/copilots/motivation.mdx

@@ -1,202 +0,0 @@
----
-title: Intelligent Components
-description: Add intelligence to React components through readable interfaces and assistant tools.
-platforms: ["react"]
----
-
-React revolutionized web development with components that combine logic, structure, and style. Now, with assistant-ui, we're adding a fourth dimension: intelligence. Let's learn how to build smart components through a practical banking app example.
-
-## The Evolution of Components
-
-Traditional React components combine three elements:
-
-```tsx
-// Traditional React Component
-function TransactionHistory({ transactions }) {
-  // 1. Logic (JavaScript/TypeScript)
-  const handleRefund = (transactionId) => {
-    // Process refund...
-  };
-
-  // 2. Structure (JSX/TSX)
-  return (
-    // 3. Style (CSS via className)
-    <div className="transaction-list">
-      {transactions.map((transaction) => (
-        <div key={transaction.id} className="transaction-item">
-          <span>${transaction.amount}</span>
-          <span>{transaction.merchant}</span>
-          <button onClick={() => handleRefund(transaction.id)}>
-            Request Refund
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-## Adding Intelligence
-
-With assistant-ui, we can enhance this component with intelligence using four powerful APIs:
-
-### 1. Making Components Readable (makeAssistantVisible)
-
-First, let's make our buttons "readable" and interactive:
-
-```tsx
-import { makeAssistantVisible } from "@assistant-ui/react";
-
-// Make the refund button intelligent
-const SmartButton = makeAssistantVisible(
-  ({ onClick, children }) => <button onClick={onClick}>{children}</button>,
-  {
-    clickable: true, // Allow the assistant to click the button
-  },
-);
-
-function TransactionHistory({ transactions }) {
-  return (
-    <div className="transaction-list">
-      {transactions.map((transaction) => (
-        <div key={transaction.id} className="transaction-item">
-          <span>${transaction.amount}</span>
-          <span>{transaction.merchant}</span>
-          <SmartButton onClick={() => handleRefund(transaction.id)}>
-            Request Refund
-          </SmartButton>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-Now the assistant can:
-
-- Understand the transaction history structure
-- Interact with refund buttons
-- Help users manage their transactions
-
-### 2. Adding System Instructions (useAssistantInstructions)
-
-Next, let's give the assistant specific instructions about its role:
-
-```tsx
-import { useAssistantInstructions } from "@assistant-ui/react";
-
-function SmartTransactionHistory() {
-  useAssistantInstructions(`
-    You are a helpful banking assistant that:
-    1. Helps users understand their transactions
-    2. Explains refund policies
-    3. Identifies suspicious transactions
-    4. Guides users through the refund process
-  `);
-
-  return <TransactionHistory transactions={transactions} />;
-}
-```
-
-### 3. Creating Tools
-
-Let's add transaction-specific tools for the assistant:
-
-```tsx title="app/transaction-toolkit.tsx"
-"use generative";
-
-import { defineToolkit } from "@assistant-ui/react";
-import { z } from "zod";
-
-export default defineToolkit({
-  analyzeTransaction: {
-    description: "Analyze a transaction's risk and refund eligibility.",
-    parameters: z.object({
-      transactionId: z.string(),
-      merchantName: z.string(),
-    }),
-    execute: async ({ transactionId, merchantName }) => {
-      "use client";
-      // Analyze transaction patterns, merchant reputation, etc.
-      return {
-        isSuspicious: false,
-        merchantRating: 4.5,
-        similarTransactions: 3,
-        refundEligible: true,
-      };
-    },
-    renderText: { running: "Analyzing transaction…", complete: "Analysis ready" },
-  },
-});
-```
-
-```tsx title="app/SmartTransactionHistory.tsx"
-import { AuiConfig, AuiProvider, Tools, useAui } from "@assistant-ui/react";
-import toolkit from "./transaction-toolkit";
-
-function SmartTransactionHistory() {
-  // Previous instructions...
-  const aui = useAui();
-  const config = AuiConfig({ tools: Tools({ toolkit }) });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <TransactionHistory transactions={transactions} />
-    </AuiProvider>
-  );
-}
-```
-
-### 4. Adding Custom Context (Model Context)
-
-Finally, let's add dynamic context based on the user's transaction patterns:
-
-```tsx
-import { useAui } from "@assistant-ui/react";
-import { useEffect } from "react";
-
-function SmartTransactionHistory({ userProfile }) {
-  const aui = useAui();
-
-  useEffect(() => {
-    return aui.modelContext.register({
-      getModelContext: () => ({
-        system: `
-          User spending patterns:
-          - Average transaction: ${userProfile.avgTransaction}
-          - Common merchants: ${userProfile.frequentMerchants.join(", ")}
-          - Refund history: ${userProfile.refundCount} requests
-        `,
-      }),
-    });
-  }, [aui, userProfile]);
-
-  // Previous components...
-}
-```
-
-## The Result: An Intelligent Banking Experience
-
-This enhanced component now provides:
-
-- Natural language interaction with transaction history
-- Contextual help for understanding transactions
-- Automated transaction analysis
-- Smart refund assistance
-
-The assistant can now:
-
-1. Read and understand transaction details
-2. Follow banking-specific guidelines
-3. Use tools to analyze transactions
-4. Access user patterns for personalized help
-
-This creates a more intuitive and safer banking experience while maintaining the familiar React component model.
-
-## Next Steps
-
-Learn more about each API:
-
-- [makeAssistantVisible](make-assistant-visible) for component understanding
-- [Tools](/docs/tools/defining-tools) for transaction analysis
-- [useAssistantInstructions](use-assistant-instructions) for behavior guidance
-- [Model Context](model-context) for dynamic context management

package/.docs/raw/docs/copilots/use-assistant-instructions.mdx

@@ -1,64 +0,0 @@
----
-title: useAssistantInstructions
-description: React hook for setting system instructions to guide assistant behavior.
-platforms: ["react"]
----
-
-`useAssistantInstructions` is a React hook that allows you to set system instructions for your assistant-ui components.
-
-## Usage
-
-```tsx
-import { useAssistantInstructions } from "@assistant-ui/react";
-
-function MyComponent() {
-  // Simple string usage
-  useAssistantInstructions("You are a helpful form assistant...");
-
-  // With configuration object
-  useAssistantInstructions({
-    instruction: "You are a helpful form assistant...",
-    disabled: false, // Optional: disable the instructions
-  });
-
-  return <div>My Component</div>;
-}
-```
-
-## API Reference
-
-### Parameters
-
-The hook accepts either:
-
-- A string containing the system instructions
-- A configuration object with:
-  - `instruction`: The system instructions
-  - `disabled`: Optional boolean to disable the instructions
-
-### Behavior
-
-The hook will:
-
-1. Register the provided instructions as system instructions in the model context
-2. Automatically clean up when the component unmounts
-3. Update when the instructions change
-4. Do nothing if disabled is set to true
-
-## Example
-
-```tsx
-function SmartForm() {
-  useAssistantInstructions({
-    instruction: `
-      You are a form assistant that:
-      - Validates user input
-      - Provides helpful suggestions
-      - Explains any errors
-      - Guides users through complex fields
-    `,
-  });
-
-  return <form>{/* Your form fields here */}</form>;
-}
-```