@assistant-ui/mcp-docs-server 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,14 +4,12 @@ title: makeAssistantToolUI
4
4
 
5
5
  import { ParametersTable } from "@/components/docs";
6
6
 
7
- # `makeAssistantToolUI`
8
-
9
7
  The `makeAssistantToolUI` utility is used to register a tool UI component with the Assistant.
10
8
 
11
9
  ## Usage
12
10
 
13
11
  ```tsx
14
- import { makeAssistantToolUI } from "assistant-ui/react";
12
+ import { makeAssistantToolUI } from "@assistant-ui/react";
15
13
 
16
14
  const MyToolUI = makeAssistantToolUI({
17
15
  toolName: "myTool",
@@ -23,9 +21,7 @@ const MyToolUI = makeAssistantToolUI({
23
21
 
24
22
  ## API
25
23
 
26
- ### `makeAssistantToolUI(tool)`
27
-
28
- #### Parameters
24
+ ### Parameters
29
25
 
30
26
  <ParametersTable
31
27
  type="AssistantToolUIProps<TArgs, TResult>"
@@ -37,29 +33,87 @@ const MyToolUI = makeAssistantToolUI({
37
33
  },
38
34
  {
39
35
  name: "render",
40
- type: "function",
41
- description: "A function that renders the tool UI. It receives an object with the following properties: `args` (any): The arguments passed to the tool. `result` (any): The result of the tool execution. `status` (\"requires_action\" | \"in_progress\" | \"complete\" | \"error\"): The status of the tool execution.",
36
+ type: "ComponentType<ToolCallContentPartProps<TArgs, TResult>>",
37
+ description: "A React component that renders the tool UI. Receives the following props:",
38
+ required: true,
39
+ children: [
40
+ {
41
+ type: "ToolCallContentPartProps<TArgs, TResult>",
42
+ parameters: [
43
+ {
44
+ name: "type",
45
+ type: "\"tool-call\"",
46
+ description: "The content part type",
47
+ },
48
+ {
49
+ name: "toolCallId",
50
+ type: "string",
51
+ description: "Unique identifier for this tool call",
52
+ },
53
+ {
54
+ name: "toolName",
55
+ type: "string",
56
+ description: "The name of the tool being called",
57
+ },
58
+ {
59
+ name: "args",
60
+ type: "TArgs",
61
+ description: "The arguments passed to the tool",
62
+ },
63
+ {
64
+ name: "argsText",
65
+ type: "string",
66
+ description: "String representation of the arguments",
67
+ },
68
+ {
69
+ name: "result",
70
+ type: "TResult | undefined",
71
+ description: "The result of the tool execution (if complete)",
72
+ },
73
+ {
74
+ name: "isError",
75
+ type: "boolean | undefined",
76
+ description: "Whether the result is an error",
77
+ },
78
+ {
79
+ name: "status",
80
+ type: "ToolCallContentPartStatus",
81
+ description: "The execution status object with a type property: \"running\", \"complete\", \"incomplete\", or \"requires_action\"",
82
+ },
83
+ {
84
+ name: "addResult",
85
+ type: "(result: TResult | ToolResponse<TResult>) => void",
86
+ description: "Function to add a result (useful for human-in-the-loop tools)",
87
+ },
88
+ {
89
+ name: "artifact",
90
+ type: "unknown",
91
+ description: "Optional artifact data associated with the tool call",
92
+ },
93
+ ],
94
+ },
95
+ ],
42
96
  },
43
97
  ]}
44
98
  />
45
99
 
46
- #### Returns
100
+ ### Returns
47
101
 
48
102
  A React functional component that should be included in your component tree. This component doesn't render anything itself, but it registers the tool UI with the Assistant.
49
103
 
50
104
  ## Example
51
105
 
52
106
  ```tsx
53
- import { makeAssistantToolUI } from "assistant-ui/react";
54
- import { AssistantRuntimeProvider } from "assistant-ui/react";
107
+ import { makeAssistantToolUI } from "@assistant-ui/react";
108
+ import { AssistantRuntimeProvider } from "@assistant-ui/react";
55
109
 
56
110
  const GetWeatherUI = makeAssistantToolUI({
57
111
  toolName: "get_weather",
58
112
  render: ({ args, result, status }) => {
59
- if (status === "requires_action") return <p>Getting weather for {args.location}...</p>;
60
- if (status === "in_progress") return <p>Loading...</p>;
61
- if (status === "error") return <p>Error getting weather.</p>;
62
- if (status === "complete") return <p>The weather is {result.weather}.</p>;
113
+ if (status.type === "requires_action") return <p>Getting weather for {args.location}...</p>;
114
+ if (status.type === "running") return <p>Loading...</p>;
115
+ if (status.type === "incomplete" && status.reason === "error") return <p>Error getting weather.</p>;
116
+ if (status.type === "complete") return <p>The weather is {result.weather}.</p>;
63
117
  return null;
64
118
  },
65
119
  });
@@ -2,6 +2,8 @@
2
2
  title: makeAssistantTool
3
3
  ---
4
4
 
5
+ import { ParametersTable } from "@/components/docs";
6
+
5
7
  `makeAssistantTool` creates a React component that provides a tool to the assistant. This is useful for defining reusable tools that can be composed into your application.
6
8
 
7
9
  ## Usage
@@ -23,7 +25,10 @@ const submitForm = tool({
23
25
  });
24
26
 
25
27
  // Create a tool component
26
- const SubmitFormTool = makeAssistantTool(submitForm);
28
+ const SubmitFormTool = makeAssistantTool({
29
+ ...submitForm,
30
+ toolName: "submitForm"
31
+ });
27
32
 
28
33
  // Use in your component
29
34
  function Form() {
@@ -40,9 +45,96 @@ function Form() {
40
45
 
41
46
  ### Parameters
42
47
 
43
- - `tool`: A tool definition created using the `tool()` helper function
44
- - `parameters`: Zod schema defining the tool's parameters
45
- - `execute`: Function that implements the tool's behavior
48
+ <ParametersTable
49
+ type="AssistantToolProps<TArgs, TResult>"
50
+ parameters={[
51
+ {
52
+ name: "toolName",
53
+ type: "string",
54
+ description: "The unique identifier for the tool",
55
+ required: true,
56
+ },
57
+ {
58
+ name: "parameters",
59
+ type: "StandardSchemaV1<TArgs> | JSONSchema7",
60
+ description: "Schema defining the tool's parameters (typically a Zod schema)",
61
+ required: true,
62
+ },
63
+ {
64
+ name: "execute",
65
+ type: "(args: TArgs, context: ToolExecutionContext) => TResult | Promise<TResult>",
66
+ description: "Function that implements the tool's behavior (required for frontend tools)",
67
+ required: true,
68
+ },
69
+ {
70
+ name: "description",
71
+ type: "string",
72
+ description: "Optional description of the tool's purpose",
73
+ },
74
+ {
75
+ name: "render",
76
+ type: "ComponentType<ToolCallContentPartProps<TArgs, TResult>>",
77
+ description: "Optional custom UI component for rendering the tool execution. Receives the following props:",
78
+ children: [
79
+ {
80
+ type: "ToolCallContentPartProps<TArgs, TResult>",
81
+ parameters: [
82
+ {
83
+ name: "type",
84
+ type: "\"tool-call\"",
85
+ description: "The content part type",
86
+ },
87
+ {
88
+ name: "toolCallId",
89
+ type: "string",
90
+ description: "Unique identifier for this tool call",
91
+ },
92
+ {
93
+ name: "toolName",
94
+ type: "string",
95
+ description: "The name of the tool being called",
96
+ },
97
+ {
98
+ name: "args",
99
+ type: "TArgs",
100
+ description: "The arguments passed to the tool",
101
+ },
102
+ {
103
+ name: "argsText",
104
+ type: "string",
105
+ description: "String representation of the arguments",
106
+ },
107
+ {
108
+ name: "result",
109
+ type: "TResult | undefined",
110
+ description: "The result of the tool execution (if complete)",
111
+ },
112
+ {
113
+ name: "isError",
114
+ type: "boolean | undefined",
115
+ description: "Whether the result is an error",
116
+ },
117
+ {
118
+ name: "status",
119
+ type: "ToolCallContentPartStatus",
120
+ description: "The execution status object with a type property: \"running\", \"complete\", \"incomplete\", or \"requires_action\"",
121
+ },
122
+ {
123
+ name: "addResult",
124
+ type: "(result: TResult | ToolResponse<TResult>) => void",
125
+ description: "Function to add a result (useful for human-in-the-loop tools)",
126
+ },
127
+ {
128
+ name: "artifact",
129
+ type: "unknown",
130
+ description: "Optional artifact data associated with the tool call",
131
+ },
132
+ ],
133
+ },
134
+ ],
135
+ },
136
+ ]}
137
+ />
46
138
 
47
139
  ### Returns
48
140
 
@@ -76,14 +168,20 @@ const sendEmail = tool({
76
168
  body: z.string(),
77
169
  }),
78
170
  execute: async (params) => {
79
- // Implementation
171
+ // Tool logic
80
172
  return { sent: true };
81
173
  },
82
174
  });
83
175
 
84
176
  // Create tool components
85
- const EmailValidator = makeAssistantTool(validateEmail);
86
- const EmailSender = makeAssistantTool(sendEmail);
177
+ const EmailValidator = makeAssistantTool({
178
+ ...validateEmail,
179
+ toolName: "validateEmail"
180
+ });
181
+ const EmailSender = makeAssistantTool({
182
+ ...sendEmail,
183
+ toolName: "sendEmail"
184
+ });
87
185
 
88
186
  // Use together
89
187
  function EmailForm() {
@@ -54,7 +54,10 @@ const submitForm = tool({
54
54
  },
55
55
  });
56
56
 
57
- const SubmitFormTool = makeAssistantTool(submitForm);
57
+ const SubmitFormTool = makeAssistantTool({
58
+ ...submitForm,
59
+ toolName: "submitForm"
60
+ });
58
61
 
59
62
  // Use in your component
60
63
  function Form() {
@@ -122,7 +122,10 @@ const analyzeTransaction = tool({
122
122
  });
123
123
 
124
124
  // Create a tool component
125
- const TransactionAnalyzer = makeAssistantTool(analyzeTransaction);
125
+ const TransactionAnalyzer = makeAssistantTool({
126
+ ...analyzeTransaction,
127
+ toolName: "analyzeTransaction",
128
+ });
126
129
 
127
130
  function SmartTransactionHistory() {
128
131
  // Previous instructions...
@@ -47,7 +47,10 @@ const weatherTool = tool({
47
47
  });
48
48
 
49
49
  // Register the tool
50
- const WeatherTool = makeAssistantTool(weatherTool);
50
+ const WeatherTool = makeAssistantTool({
51
+ ...weatherTool,
52
+ toolName: "getWeather"
53
+ });
51
54
 
52
55
  // Create the UI
53
56
  const WeatherToolUI = makeAssistantToolUI<
@@ -52,7 +52,10 @@ const weatherTool = tool({
52
52
  });
53
53
 
54
54
  // Create the component
55
- const WeatherTool = makeAssistantTool(weatherTool);
55
+ const WeatherTool = makeAssistantTool({
56
+ ...weatherTool,
57
+ toolName: "getWeather"
58
+ });
56
59
 
57
60
  // Place the tool component inside AssistantRuntimeProvider
58
61
  function App() {
@@ -214,7 +217,10 @@ const screenshotTool = tool({
214
217
  }
215
218
  });
216
219
 
217
- const ScreenshotTool = makeAssistantTool(screenshotTool);
220
+ const ScreenshotTool = makeAssistantTool({
221
+ ...screenshotTool,
222
+ toolName: "screenshot"
223
+ });
218
224
  ```
219
225
 
220
226
  ### Backend Tools
@@ -267,7 +273,10 @@ const calculateTool = tool({
267
273
  }
268
274
  });
269
275
 
270
- const CalculateTool = makeAssistantTool(calculateTool);
276
+ const CalculateTool = makeAssistantTool({
277
+ ...calculateTool,
278
+ toolName: "calculate"
279
+ });
271
280
 
272
281
  // Backend: Use frontendTools to receive client tools
273
282
  import { frontendTools } from "@assistant-ui/react-ai-sdk";
@@ -329,7 +338,10 @@ const refundTool = tool({
329
338
  }
330
339
  });
331
340
 
332
- const RefundTool = makeAssistantTool(refundTool);
341
+ const RefundTool = makeAssistantTool({
342
+ ...refundTool,
343
+ toolName: "requestRefund"
344
+ });
333
345
  ```
334
346
 
335
347
  ### MCP (Model Context Protocol) Tools
@@ -393,7 +405,10 @@ const travelPlannerTool = tool({
393
405
  }
394
406
  });
395
407
 
396
- const TravelPlannerTool = makeAssistantTool(travelPlannerTool);
408
+ const TravelPlannerTool = makeAssistantTool({
409
+ ...travelPlannerTool,
410
+ toolName: "planTrip"
411
+ });
397
412
  ```
398
413
 
399
414
  ### Conditional Tool Availability
@@ -461,7 +476,10 @@ const resilientTool = tool({
461
476
  }
462
477
  });
463
478
 
464
- const ResilientTool = makeAssistantTool(resilientTool);
479
+ const ResilientTool = makeAssistantTool({
480
+ ...resilientTool,
481
+ toolName: "fetchWithRetries"
482
+ });
465
483
  ```
466
484
 
467
485
  ## Best Practices
@@ -7,9 +7,7 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
7
7
 
8
8
  `@assistant-ui/mcp-docs-server` provides direct access to assistant-ui's documentation and examples in Cursor, Windsurf, VSCode, Zed, Claude Code, or any other IDE or tool that supports MCP.
9
9
 
10
- It has access to comprehensive documentation and complete code examples which your IDE can read to help you build conversational UI components with assistant-ui.
11
-
12
- The MCP server tools have been designed to allow an agent to query the specific information it needs to complete an assistant-ui related task - for example: implementing chat components, integrating with different runtimes, or understanding component architecture.
10
+ The MCP server tools have been designed to allow an agent to query the specific information it needs to complete an assistant-ui related task - for example: implementing chat components, integrating with different runtimes, understanding component architecture, and troubleshooting issues.
13
11
 
14
12
  ## How it works
15
13
 
@@ -841,9 +841,9 @@ function MyCustomRuntimeProvider({ children }) {
841
841
  </Callout>
842
842
 
843
843
  <Callout type="warning">
844
- **`useThreadRuntime` vs `useLocalThreadRuntime`:** - `useThreadRuntime` -
845
- Access the current thread's runtime from within components -
846
- `useLocalThreadRuntime` - Create a new single-thread runtime instance
844
+ **`useThreadRuntime` vs `useLocalThreadRuntime`:**
845
+ - `useThreadRuntime` - Access the current thread's runtime from within components
846
+ - `useLocalThreadRuntime` - Create a new single-thread runtime instance
847
847
  </Callout>
848
848
 
849
849
  ## Integration Examples
@@ -1,4 +1,4 @@
1
- import { logger, IS_PREPARE_MODE, MDX_EXTENSION, DOCS_PATH, MAX_FILE_SIZE, CODE_EXAMPLES_PATH, MD_EXTENSION } from './chunk-C7O7EFKU.js';
1
+ import { logger, IS_PREPARE_MODE, MDX_EXTENSION, DOCS_PATH, MAX_FILE_SIZE, CODE_EXAMPLES_PATH, MD_EXTENSION } from './chunk-M2RKUM66.js';
2
2
  import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
3
3
  import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
4
4
  import { z } from 'zod';
@@ -31,7 +31,7 @@ var logger = {
31
31
  console.error(`[ERROR] ${message}`, ...args);
32
32
  },
33
33
  warn: (message, ...args) => {
34
- console.error(`[WARN] ${message}`, ...args);
34
+ console.warn(`[WARN] ${message}`, ...args);
35
35
  }
36
36
  };
37
37
 
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export { runServer, server } from './chunk-CZCDQ3YH.js';
1
+ export { runServer, server } from './chunk-JS4PWCVA.js';
@@ -1,4 +1,4 @@
1
- import { ROOT_DIR, logger, EXAMPLES_PATH } from '../chunk-C7O7EFKU.js';
1
+ import { ROOT_DIR, logger, EXAMPLES_PATH } from '../chunk-M2RKUM66.js';
2
2
  import { rm, mkdir, readdir, readFile, writeFile, copyFile } from 'fs/promises';
3
3
  import { join, extname, relative } from 'path';
4
4
 
package/dist/stdio.js CHANGED
@@ -1,5 +1,5 @@
1
1
  #!/usr/bin/env node
2
- import { runServer } from './chunk-CZCDQ3YH.js';
2
+ import { runServer } from './chunk-JS4PWCVA.js';
3
3
 
4
4
  // src/stdio.ts
5
5
  void runServer().catch((error) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@assistant-ui/mcp-docs-server",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "MCP server for assistant-ui documentation and examples",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",