AgentKit enables developers to compose simple single-agent systems or entire
_systems of agents_ in which multiple agents can work together.
**[Agents](/concepts/agents)** are combined into
@@ -66,12 +56,10 @@ All the above sounds familiar? Check our **[Getting started section](#getting-st
collaborate on tasks.
+
-
-
diff --git a/docs/src/content/docs/integrations/browserbase.mdx b/docs/src/content/docs/integrations/browserbase.mdx
new file mode 100644
index 00000000..e2287f39
--- /dev/null
+++ b/docs/src/content/docs/integrations/browserbase.mdx
@@ -0,0 +1,302 @@
+---
+title: Using AgentKit with Browserbase
+description: "Develop AI Agents that can browse the web"
+---
+
+import { Steps, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components';
+
+[Browserbase](https://www.browserbase.com/) provides managed [headless browsers](https://docs.browserbase.com/introduction/what-is-headless-browser) to
+enable Agents to browse the web autonomously.
+
+There are two ways to use Browserbase with AgentKit:
+
+- **Create your own Browserbase tools**: useful if you want to build simple actions on webpages with manual browser control.
+- **Use Browserbase's [Stagehand](https://www.stagehand.dev/) library as tools**: a better approach for autonomous browsing and resilient scraping.
+
+## Building AgentKit tools using Browserbase
+
+Creating AgentKit [tools](/concepts/tools) using the Browserbase TypeScript SDK is straightforward.
+
+
+
+1. **Install AgentKit**
+
+ Within an existing project, install AgentKit, Browserbase and Playwright core:
+
+
+
+ ```shell
+ npm install @inngest/agent-kit inngest @browserbasehq/sdk playwright-core
+ ```
+
+
+ ```shell
+ pnpm install @inngest/agent-kit inngest @browserbasehq/sdk playwright-core
+ ```
+
+
+ ```shell
+ yarn add @inngest/agent-kit inngest @browserbasehq/sdk playwright-core
+ ```
+
+
+
+
+ Don't have an existing project?
+
+ To create a new project, create a new directory then initialize using your package manager:
+
+
+
+ ```shell
+ mkdir my-agent-kit-project && npm init
+ ```
+
+
+ ```shell
+ mkdir my-agent-kit-project && pnpm init
+ ```
+
+
+ ```shell
+ mkdir my-agent-kit-project && yarn init
+ ```
+
+
+
+
+
+2. **Setup an AgentKit Network with an Agent**
+
+ Create a Agent and its associated Network, for example a Reddit Search Agent:
+
+ ```typescript
+ import {
+ anthropic,
+ createAgent,
+ createNetwork,
+ } from "@inngest/agent-kit";
+
+ const searchAgent = createAgent({
+ name: "reddit_searcher",
+ description: "An agent that searches Reddit for relevant information",
+ system:
+ "You are a helpful assistant that searches Reddit for relevant information.",
+ });
+
+ // Create the network
+ const redditSearchNetwork = createNetwork({
+ name: "reddit_search_network",
+ description: "A network that searches Reddit using Browserbase",
+ agents: [searchAgent],
+ maxIter: 2,
+ defaultModel: anthropic({
+ model: "claude-3-5-sonnet-latest",
+ max_tokens: 4096,
+ });
+
+ ```
+
+3. **Create a Browserbase tool**
+
+ Let's configure the Browserbase SDK and create a tool that can search Reddit:
+
+ ```typescript {5, 8-9, 11-13}
+ import {
+ anthropic,
+ createAgent,
+ createNetwork,
+ createTool,
+ } from "@inngest/agent-kit";
+ import { z } from "zod";
+ import { chromium } from "playwright-core";
+ import Browserbase from "@browserbasehq/sdk";
+
+ const bb = new Browserbase({
+ apiKey: process.env.BROWSERBASE_API_KEY as string,
+ });
+
+ // Create a tool to search Reddit using Browserbase
+ const searchReddit = createTool({
+ name: "search_reddit",
+ description: "Search Reddit posts and comments",
+ parameters: z.object({
+ query: z.string().describe("The search query for Reddit"),
+ }),
+ handler: async ({ query }, { step }) => {
+ return await step?.run("search-on-reddit", async () => {
+ // Create a new session
+ const session = await bb.sessions.create({
+ projectId: process.env.BROWSERBASE_PROJECT_ID as string,
+ });
+
+ // Connect to the session
+ const browser = await chromium.connectOverCDP(session.connectUrl);
+ try {
+ const page = await browser.newPage();
+
+ // Construct the search URL
+ const searchUrl = `https://search-new.pullpush.io/?type=submission&q=${query}`;
+
+ console.log(searchUrl);
+
+ await page.goto(searchUrl);
+
+ // Wait for results to load
+ await page.waitForSelector("div.results", { timeout: 10000 });
+
+ // Extract search results
+ const results = await page.evaluate(() => {
+ const posts = document.querySelectorAll("div.results div:has(h1)");
+ return Array.from(posts).map((post) => ({
+ title: post.querySelector("h1")?.textContent?.trim(),
+ content: post.querySelector("div")?.textContent?.trim(),
+ }));
+ });
+
+ console.log("results", JSON.stringify(results, null, 2));
+
+ return results.slice(0, 5); // Return top 5 results
+ } finally {
+ await browser.close();
+ }
+ });
+ },
+ });
+ ```
+
+ :::note
+ Configure your `BROWSERBASE_API_KEY` and `BROWSERBASE_PROJECT_ID` in the
+ `.env` file. You can find your API key and project ID from the [Browserbase
+ dashboard](https://docs.browserbase.com/introduction/getting-started#creating-your-account).
+ :::
+
+ :::tip
+ We recommend building tools using Browserbase using Inngest's `step.run()` function. This ensures that the tool will only run once across multiple runs.
+
+ More information about using `step.run()` can be found in the [Multi steps tools](/advanced-patterns/multi-steps-tools) page.
+ :::
+
+
+
+### Example: Reddit Search Agent using Browserbase
+
+You will find a complete example of a Reddit search agent using Browserbase in the Reddit Search Agent using Browserbase example:
+
+
+
+## Enable autonomous browsing with Stagehand
+
+Building AgentKit tools using [Stagehand](https://www.stagehand.dev/) gives more autonomy to your agents.
+
+Stagehand comes with 4 primary API that can be directly used as tools:
+
+- `goto()`: navigate to a specific URL
+- `observe()`: observe the current page
+- `extract()`: extract data from the current page
+- `act()`: take action on the current page
+
+These methods can be easily directly be used as tools in AgentKit, enabling agents to browse the web autonomously.
+
+Below is an example of a simple search agent that uses Stagehand to search the web:
+
+```ts {22, 46-49, 66, 83}
+import { createAgent, createTool } from "@inngest/agent-kit";
+import { z } from "zod";
+import { getStagehand, stringToZodSchema } from "./utils.js";
+
+const webSearchAgent = createAgent({
+ name: "web_search_agent",
+ description: "I am a web search agent.",
+ system: `You are a web search agent.
+ `,
+ tools: [
+ createTool({
+ name: "navigate",
+ description: "Navigate to a given URL",
+ parameters: z.object({
+ url: z.string().describe("the URL to navigate to"),
+ }),
+ handler: async ({ url }, { step, network }) => {
+ return await step?.run("navigate", async () => {
+ const stagehand = await getStagehand(
+ network?.state.kv.get("browserbaseSessionID")!
+ );
+ await stagehand.page.goto(url);
+ return `Navigated to ${url}.`;
+ });
+ },
+ }),
+ createTool({
+ name: "extract",
+ description: "Extract data from the page",
+ parameters: z.object({
+ instruction: z
+ .string()
+ .describe("Instructions for what data to extract from the page"),
+ schema: z
+ .string()
+ .describe(
+ "A string representing the properties and types of data to extract, for example: '{ name: string, age: number }'"
+ ),
+ }),
+ handler: async ({ instruction, schema }, { step, network }) => {
+ return await step?.run("extract", async () => {
+ const stagehand = await getStagehand(
+ network?.state.kv.get("browserbaseSessionID")!
+ );
+ const zodSchema = stringToZodSchema(schema);
+ return await stagehand.page.extract({
+ instruction,
+ schema: zodSchema,
+ });
+ });
+ },
+ }),
+ createTool({
+ name: "act",
+ description: "Perform an action on the page",
+ parameters: z.object({
+ action: z
+ .string()
+ .describe("The action to perform (e.g. 'click the login button')"),
+ }),
+ handler: async ({ action }, { step, network }) => {
+ return await step?.run("act", async () => {
+ const stagehand = await getStagehand(
+ network?.state.kv.get("browserbaseSessionID")!
+ );
+ return await stagehand.page.act({ action });
+ });
+ },
+ }),
+ createTool({
+ name: "observe",
+ description: "Observe the page",
+ parameters: z.object({
+ instruction: z
+ .string()
+ .describe("Specific instruction for what to observe on the page"),
+ }),
+ handler: async ({ instruction }, { step, network }) => {
+ return await step?.run("observe", async () => {
+ const stagehand = await getStagehand(
+ network?.state.kv.get("browserbaseSessionID")!
+ );
+ return await stagehand.page.observe({ instruction });
+ });
+ },
+ }),
+ ],
+});
+```
+
+:::note
+These 4 AgentKit tools using Stagehand enables the Web Search Agent to browse the web autonomously.
+
+The `getStagehand()` helper function is used to retrieve the persisted instance created for the network execution (_see full code below_).
+:::
+
+You will find the complete example on GitHub:
+
+
diff --git a/docs/src/content/docs/integrations/daytona.mdx b/docs/src/content/docs/integrations/daytona.mdx
new file mode 100644
index 00000000..b8e75cf7
--- /dev/null
+++ b/docs/src/content/docs/integrations/daytona.mdx
@@ -0,0 +1,276 @@
+---
+title: Using AgentKit with Daytona
+description: "Build Coding Agents with Daytona's secure and elastic infrastructure for executing AI-generated code"
+---
+
+import { Steps, Tabs, TabItem, LinkCard, CardGrid } from '@astrojs/starlight/components';
+
+[Daytona](https://www.daytona.io/) provides secure, high-performance infrastructure for running AI-generated code. It's designed for any use case requiring secure sandbox environments and lightning-fast execution: running code, spinning up applications, data analysis, automated testing, CI/CD pipelines and more.
+
+Daytona is the perfect foundation for building autonomous Coding Agents that can scaffold projects, execute scripts, and deliver production-ready solutions.
+
+
+## Setup
+
+
+
+1. **Install AgentKit and Daytona**
+
+ Within an existing project, Install AgentKit and Daytona:
+
+
+
+ ```shell
+ npm install @inngest/agent-kit inngest @daytonaio/sdk
+ ```
+
+
+ ```shell
+ pnpm install @inngest/agent-kit inngest @daytonaio/sdk
+ ```
+
+
+ ```shell
+ yarn add @inngest/agent-kit inngest @daytonaio/sdk
+ ```
+
+
+
+
+ Don't have an existing project?
+
+ To create a new project, create a new directory then initialize using your package manager:
+
+
+
+ ```shell
+ mkdir my-agent-kit-project && npm init
+ ```
+
+
+ ```shell
+ mkdir my-agent-kit-project && pnpm init
+ ```
+
+
+ ```shell
+ mkdir my-agent-kit-project && yarn init
+ ```
+
+
+
+
+
+2. **Setup the Coding Agent**
+
+ Create a Coding Agent with a system prompt that defines its behavior and select a model with appropriate parameters. In this example, we use Anthropic's Claude model:
+
+ ```typescript
+ import {
+ createAgent,
+ anthropic,
+ } from "@inngest/agent-kit";
+
+ const codingAgent = createAgent({
+ name: "Coding Agent",
+ description:
+ "An autonomous coding agent for building software in a Daytona sandbox",
+ system: `You are a coding agent designed to help the user achieve software development tasks. You have access to a Daytona sandbox environment.
+
+ Capabilities:
+ - You can execute code snippets or scripts.
+ - You can run shell commands to install dependencies, manipulate files, and set up environments.
+ - You can create, upload, and organize files and directories to build basic applications and project structures.
+
+ Workspace Instructions:
+ - You do not need to define, set up, or specify the workspace directory. Assume you are already inside a default workspace directory that is ready for app creation.
+ - All file and folder operations (create, upload, organize) should use paths relative to this default workspace.
+ - Do not attempt to create or configure the workspace itself; focus only on the requested development tasks.
+
+ Guidelines:
+ - Always analyze the user's request and plan your steps before taking action.
+ - Prefer automation and scripting over manual or interactive steps.
+ - When installing packages or running commands that may prompt for input, use flags (e.g., '-y') to avoid blocking.
+ - If you are developing an app that is served with a development server (e.g. Next.js, React):
+ 1. Return the port information in the form: DEV_SERVER_PORT=$PORT (replace $PORT with the actual port number).
+ 2. Start the development server.
+ 3. After starting the dev server, always check its health in the next iteration. Only mark the task as complete if the health check passes: there must be no stderr output, no errors thrown, and the stdout content must not indicate a problem (such as error messages, stack traces, or failed startup). If any of these are present, diagnose and fix the issue before completing the task.
+ - When you have completed the requested task, set the "TASK_COMPLETED" string in your output to signal that the app is finished.
+ `,
+ model: anthropic({
+ model: "claude-3-5-haiku-20241022",
+ defaultParameters: {
+ max_tokens: 1024,
+ },
+ }),
+ });
+ ```
+
+3. **Create the Daytona Tools**
+
+ To fulfill the objectives specified in its system prompt, the Coding Agent needs access to sandbox environments; this is where Daytona steps in.
+
+ The Daytona sandbox environment is exposed to the Coding Agent via tools. Our goal is to define a set of tools that enable the Coding Agent to achieve virtually any coding task.
+
+ In this example, we'll show implementations of `codeRunTool` and `readFileTool`. Note that the code also uses `getSandbox` and `logDebug` utility functions for sandbox management and logging. You can find complete implementations of all coding agent tools and utility functions in the [Daytona Coding Agent example](https://github.com/inngest/agent-kit/tree/main/examples/daytona-coding-agent#readme).
+
+ ```typescript {4, 6-8, 42 - 101}
+ import {
+ createAgent,
+ anthropic,
+ createTool,
+ } from "@inngest/agent-kit";
+ import { z } from "zod";
+ import { CodeRunParams, DaytonaError } from "@daytonaio/sdk";
+ import { getSandbox, logDebug } from "./utils.js";
+
+ const codingAgent = createAgent({
+ name: "Coding Agent",
+ description:
+ "An autonomous coding agent for building software in a Daytona sandbox",
+ system: `You are a coding agent designed to help the user achieve software development tasks. You have access to a Daytona sandbox environment.
+
+ Capabilities:
+ - You can execute code snippets or scripts.
+ - You can run shell commands to install dependencies, manipulate files, and set up environments.
+ - You can create, upload, and organize files and directories to build basic applications and project structures.
+
+ Workspace Instructions:
+ - You do not need to define, set up, or specify the workspace directory. Assume you are already inside a default workspace directory that is ready for app creation.
+ - All file and folder operations (create, upload, organize) should use paths relative to this default workspace.
+ - Do not attempt to create or configure the workspace itself; focus only on the requested development tasks.
+
+ Guidelines:
+ - Always analyze the user's request and plan your steps before taking action.
+ - Prefer automation and scripting over manual or interactive steps.
+ - When installing packages or running commands that may prompt for input, use flags (e.g., '-y') to avoid blocking.
+ - If you are developing an app that is served with a development server (e.g. Next.js, React):
+ 1. Return the port information in the form: DEV_SERVER_PORT=$PORT (replace $PORT with the actual port number).
+ 2. Start the development server.
+ 3. After starting the dev server, always check its health in the next iteration. Only mark the task as complete if the health check passes: there must be no stderr output, no errors thrown, and the stdout content must not indicate a problem (such as error messages, stack traces, or failed startup). If any of these are present, diagnose and fix the issue before completing the task.
+ - When you have completed the requested task, set the "TASK_COMPLETED" string in your output to signal that the app is finished.
+ `,
+ model: anthropic({
+ model: "claude-3-5-haiku-20241022",
+ defaultParameters: {
+ max_tokens: 1024,
+ },
+ }),
+ tools: [
+ createTool({
+ name: "codeRunTool",
+ description: `Executes code in the Daytona sandbox. Use this tool to run code snippets, scripts, or application entry points.
+ Parameters:
+ - code: Code to execute.
+ - argv: Command line arguments to pass to the code.
+ - env: Environment variables for the code execution, as key-value pairs.`,
+ parameters: z.object({
+ code: z.string(),
+ argv: z.array(z.string()).nullable(),
+ env: z.record(z.string(), z.string()).nullable(),
+ }),
+ handler: async ({ code, argv, env }, { network }) => {
+ try {
+ const sandbox = await getSandbox(network);
+ const codeRunParams = new CodeRunParams();
+ codeRunParams.argv = argv ?? [];
+ codeRunParams.env = env ?? {};
+ console.log(`[TOOL: codeRunTool]\nParams: ${codeRunParams}\n${code}`);
+ const response = await sandbox.process.codeRun(code, codeRunParams);
+ const responseMessage = `Code run result: ${response.result}${
+ response.artifacts?.stdout
+ ? `\nStdout: ${response.artifacts.stdout}`
+ : ""
+ }`;
+ logDebug(responseMessage);
+ return responseMessage;
+ } catch (error) {
+ console.error("Error executing code:", error);
+ if (error instanceof DaytonaError)
+ return `Code execution Daytona error: ${error.message}`;
+ else return "Error executing code";
+ }
+ },
+ }),
+ createTool({
+ name: "readFileTool",
+ description: `Reads the contents of a file from the Daytona sandbox. Use this tool to retrieve source code, configuration files, or other assets for analysis or processing.`,
+ parameters: z.object({
+ filePath: z.string(),
+ }),
+ handler: async ({ filePath }, { network }) => {
+ try {
+ const sandbox = await getSandbox(network);
+ console.log(`[TOOL: readFileTool]\nFile path: ${filePath}`);
+ const fileBuffer = await sandbox.fs.downloadFile(filePath);
+ const fileContent = fileBuffer.toString("utf-8");
+ const readFileMessage = `Successfully read file: ${filePath}\nContent:\n${fileContent}`;
+ logDebug(readFileMessage);
+ return fileContent;
+ } catch (error) {
+ console.error("Error reading file:", error);
+ if (error instanceof DaytonaError)
+ return `File reading Daytona error: ${error.message}`;
+ else return "Error reading file";
+ }
+ },
+ }),
+ ],
+ });
+ ```
+
+4. **Create agent network**
+
+ Create a network with a code-based router that determines when the agent has completed its task and checks if a development server was started to set the data needed for preview generation.
+
+ ```typescript
+ import {
+ createNetwork,
+ } from "@inngest/agent-kit";
+ import { extractTextMessageContent, logDebug } from "./utils.js";
+
+ const network = createNetwork({
+ name: "coding-agent-network",
+ agents: [codingAgent], // Using codingAgent from previous step
+ maxIter: 30,
+ defaultRouter: ({ network, callCount }) => {
+ const previousIterationMessageContent = extractTextMessageContent(
+ network.state.results.at(-1)
+ );
+ if (previousIterationMessageContent)
+ logDebug(`Iteration message:\n${previousIterationMessageContent}\n`);
+ console.log(`\n ===== Iteration #${callCount + 1} =====\n`);
+ if (callCount > 0) {
+ if (previousIterationMessageContent.includes("TASK_COMPLETED")) {
+ const isDevServerAppMessage = network.state.results.map((result) => extractTextMessageContent(result)).find((messageContent) =>
+ messageContent.includes("DEV_SERVER_PORT")
+ );
+ if (isDevServerAppMessage) {
+ const portMatch = isDevServerAppMessage.match(
+ /DEV_SERVER_PORT=([0-9]+)/
+ );
+ const port =
+ portMatch && portMatch[1]
+ ? parseInt(portMatch[1], 10)
+ : undefined;
+ if (port) network.state.data.devServerPort = port;
+ }
+ return;
+ }
+ }
+ return codingAgent;
+ },
+ });
+ ```
+
+
+
+:::tip
+For a more comprehensive guide on using this coding agent, check out the [Daytona documentation](https://www.daytona.io/docs/en/inngest-agentkit-coding-agent/)
+:::
+
+## Examples
+
+
+
+
diff --git a/docs/integrations/e2b.mdx b/docs/src/content/docs/integrations/e2b.mdx
similarity index 53%
rename from docs/integrations/e2b.mdx
rename to docs/src/content/docs/integrations/e2b.mdx
index cb2aa53d..7c09a967 100644
--- a/docs/integrations/e2b.mdx
+++ b/docs/src/content/docs/integrations/e2b.mdx
@@ -1,9 +1,10 @@
---
title: Using AgentKit with E2B
description: "Develop Coding Agents using E2B Sandboxes as tools"
-sidebarTitle: "E2B - Sandboxes for AI Agents"
---
+import { Steps, Tabs, TabItem, LinkCard, CardGrid } from '@astrojs/starlight/components';
+
[E2B](https://e2b.dev) is an open-source runtime for executing AI-generated code in secure cloud sandboxes. Made for agentic & AI use cases.
E2B is a perfect fit to build Coding Agents that can write code, fix bugs, and more.
@@ -11,50 +12,56 @@ E2B is a perfect fit to build Coding Agents that can write code, fix bugs, and m
## Setup
-
- Within an existing project, Install AgentKit and E2B from npm:
-
-
-
- ```shell npm
- npm install @inngest/agent-kit inngest @e2b/code-interpreter
- ```
-
- ```shell pnpm
- pnpm install @inngest/agent-kit inngest @e2b/code-interpreter
- ```
-
- ```shell yarn
- yarn add @inngest/agent-kit inngest @e2b/code-interpreter
- ```
-
-
-
-
-
-
- To create a new project, create a new directory then initialize using your package manager:
-
-
- ```shell npm
- mkdir my-agent-kit-project && npm init
- ```
-
- ```shell pnpm
- mkdir my-agent-kit-project && pnpm init
- ```
+1. **Install AgentKit and E2B**
- ```shell yarn
- mkdir my-agent-kit-project && yarn init
- ```
-
-
-
+ Within an existing project, Install AgentKit and E2B from npm:
-
+
+
+ ```shell
+ npm install @inngest/agent-kit inngest @e2b/code-interpreter
+ ```
+
+
+ ```shell
+ pnpm install @inngest/agent-kit inngest @e2b/code-interpreter
+ ```
+
+
+ ```shell
+ yarn add @inngest/agent-kit inngest @e2b/code-interpreter
+ ```
+
+
+
+
+ Don't have an existing project?
+
+ To create a new project, create a new directory then initialize using your package manager:
+
+
+
+ ```shell
+ mkdir my-agent-kit-project && npm init
+ ```
+
+
+ ```shell
+ mkdir my-agent-kit-project && pnpm init
+ ```
+
+
+ ```shell
+ mkdir my-agent-kit-project && yarn init
+ ```
+
+
+
+
+
+2. **Setup your Coding Agent**
-
Create a Agent and its associated Network:
```typescript
@@ -92,9 +99,8 @@ E2B is a perfect fit to build Coding Agents that can write code, fix bugs, and m
```
-
+3. **Create the E2B Tools**
-
To operate, our Coding Agent will need to create files and run commands.
Below is an example of how to create the `createOrUpdateFiles` and `terminal` E2B tools:
@@ -194,50 +200,18 @@ E2B is a perfect fit to build Coding Agents that can write code, fix bugs, and m
You will find the complete example in the [E2B Coding Agent example](https://github.com/inngest/agent-kit/tree/main/examples/e2b-coding-agent#readme).
-
- **Designing useful tools**
-
- As covered in Anthropic's ["Tips for Building AI Agents"](https://www.youtube.com/watch?v=LP5OCa20Zpg),
- the best Agents Tools are the ones that you will need to accomplish the task by yourself.
+ :::tip[Designing useful tools]
+ As covered in Anthropic's ["Tips for Building AI Agents"](https://www.youtube.com/watch?v=LP5OCa20Zpg),
+ the best Agents Tools are the ones that you will need to accomplish the task by yourself.
- Do not map tools directly to the underlying API, but rather design tools that are useful for the Agent to accomplish the task.
-
-
-
-
+ Do not map tools directly to the underlying API, but rather design tools that are useful for the Agent to accomplish the task.
+ :::
## Examples
-
-
-
- This examples shows how to use E2B sandboxes to build a coding agent that can write code and run commands to generate complete project, complete refactoring and fix bugs.
-
-
-
- Agents
- Tools
- Network
- Integrations
-
- Code-based Router
-
-
-
-
- Let's reinvent the CSV upload UX with an AgentKit network leveraging E2B sandboxes.
-
-
-
- Agents
- Tools
- Network
- Integrations
-
- Code-based Router
-
-
-
-
+
+
+
+
diff --git a/docs/src/content/docs/integrations/smithery.mdx b/docs/src/content/docs/integrations/smithery.mdx
new file mode 100644
index 00000000..d1e046d5
--- /dev/null
+++ b/docs/src/content/docs/integrations/smithery.mdx
@@ -0,0 +1,194 @@
+---
+title: Smithery - MCP Registry
+description: "Provide your Agents with hundred of prebuilt tools to interact with"
+---
+
+import { Steps, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components';
+
+[Smithery](https://smithery.ai/) is an MCP ([Model Context Protocol](https://modelcontextprotocol.io/introduction)) servers registry, listing more than 2,000 MCP servers across multiple use cases:
+
+- Code related tasks (ex: GitHub, [E2B](/integrations/e2b))
+- Web Search Integration (ex: Brave, [Browserbase](/integrations/browserbase))
+- Database Integration (ex: Neon, Supabase)
+- Financial Market Data
+- Data & App Analysis
+- And more...
+
+## Adding a Smithery MCP Server to your Agent
+
+
+
+1. **Install AgentKit**
+
+ Within an existing project, install AgentKit along with the Smithery SDK:
+
+
+
+ ```shell
+ npm install @inngest/agent-kit inngest @smithery/sdk
+ ```
+
+
+ ```shell
+ pnpm install @inngest/agent-kit inngest @smithery/sdk
+ ```
+
+
+ ```shell
+ yarn add @inngest/agent-kit inngest @smithery/sdk
+ ```
+
+
+
+
+ Don't have an existing project?
+
+ To create a new project, create a new directory then initialize using your package manager:
+
+
+
+ ```shell
+ mkdir my-agent-kit-project && npm init
+ ```
+
+
+ ```shell
+ mkdir my-agent-kit-project && pnpm init
+ ```
+
+
+ ```shell
+ mkdir my-agent-kit-project && yarn init
+ ```
+
+
+
+
+
+2. **Setup an AgentKit Network with an Agent**
+
+ Create an Agent and its associated Network, for example a Neon Assistant Agent:
+
+ ```typescript
+ import { z } from "zod";
+ import {
+ anthropic,
+ createAgent,
+ createNetwork,
+ createTool,
+ } from "@inngest/agent-kit";
+
+ const neonAgent = createAgent({
+ name: "neon-agent",
+ system: `You are a helpful assistant that help manage a Neon account.
+ IMPORTANT: Call the 'done' tool when the question is answered.
+ `,
+ tools: [
+ createTool({
+ name: "done",
+ description: "Call this tool when you are finished with the task.",
+ parameters: z.object({
+ answer: z.string().describe("Answer to the user's question."),
+ }),
+ handler: async ({ answer }, { network }) => {
+ network?.state.kv.set("answer", answer);
+ },
+ }),
+ ],
+ });
+
+ const neonAgentNetwork = createNetwork({
+ name: "neon-agent",
+ agents: [neonAgent],
+ defaultModel: anthropic({
+ model: "claude-3-5-sonnet-20240620",
+ defaultParameters: {
+ max_tokens: 1000,
+ },
+ }),
+ router: ({ network }) => {
+ if (!network?.state.kv.get("answer")) {
+ return neonAgent;
+ }
+ return;
+ },
+ });
+ ```
+
+3. **Add the Neon MCP Smithery Server to your Agent**
+
+ Add the [Neon MCP Smithery Server](https://smithery.ai/server/neon/) to your Agent by using `createSmitheryUrl()` from the `@smithery/sdk/config.js` module
+ and providing it to the Agent via the `mcpServers` option:
+
+ ```typescript {7, 10-12, 31-39}
+ import {
+ anthropic,
+ createAgent,
+ createNetwork,
+ createTool,
+ } from "@inngest/agent-kit";
+ import { createSmitheryUrl } from "@smithery/sdk/config.js";
+ import { z } from "zod";
+
+ const smitheryUrl = createSmitheryUrl("https://server.smithery.ai/neon/ws", {
+ neonApiKey: process.env.NEON_API_KEY,
+ });
+
+ const neonAgent = createAgent({
+ name: "neon-agent",
+ system: `You are a helpful assistant that help manage a Neon account.
+ IMPORTANT: Call the 'done' tool when the question is answered.
+ `,
+ tools: [
+ createTool({
+ name: "done",
+ description: "Call this tool when you are finished with the task.",
+ parameters: z.object({
+ answer: z.string().describe("Answer to the user's question."),
+ }),
+ handler: async ({ answer }, { network }) => {
+ network?.state.kv.set("answer", answer);
+ },
+ }),
+ ],
+ mcpServers: [
+ {
+ name: "neon",
+ transport: {
+ type: "ws",
+ url: smitheryUrl.toString(),
+ },
+ },
+ ],
+ });
+
+ const neonAgentNetwork = createNetwork({
+ name: "neon-agent",
+ agents: [neonAgent],
+ defaultModel: anthropic({
+ model: "claude-3-5-sonnet-20240620",
+ defaultParameters: {
+ max_tokens: 1000,
+ },
+ }),
+ router: ({ network }) => {
+ if (!network?.state.kv.get("answer")) {
+ return neonAgent;
+ }
+ return;
+ },
+ });
+ ```
+
+ :::caution
+ Integrating Smithery with AgentKit requires using the `createSmitheryUrl()` function to create a valid URL for the MCP server.
+
+ Most Smithery servers instruct to use the `createTransport()` function which is not supported by AgentKit.
+ To use the `createSmitheryUrl()` function, simply append `/ws` to the end of the Smithery server URL provided by Smithery.
+ :::
+
+
+
+You will find the complete example on GitHub:
+
+
diff --git a/docs/reference/create-agent.mdx b/docs/src/content/docs/reference/create-agent.mdx
similarity index 93%
rename from docs/reference/create-agent.mdx
rename to docs/src/content/docs/reference/create-agent.mdx
index 45dff2a9..e474a826 100644
--- a/docs/reference/create-agent.mdx
+++ b/docs/src/content/docs/reference/create-agent.mdx
@@ -3,6 +3,9 @@ title: createAgent
description: 'Define an agent'
---
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import ParamField from '../../../components/ParamField.astro';
+
Agents are defined using the `createAgent` function.
```ts
@@ -79,9 +82,10 @@ Called after tool calling has completed. The `onFinish` hook can be used to:
-
+
+
-```ts onStart
+```ts
const agent = createAgent({
name: 'Code writer',
lifecycles: {
@@ -100,10 +104,14 @@ const agent = createAgent({
});
```
-```ts onResponse
+
+
+
+```ts
function onResponse() {}
```
-
+
+
{/* TODO - Add docs for run, withModel, etc. */}
diff --git a/docs/reference/create-network.mdx b/docs/src/content/docs/reference/create-network.mdx
similarity index 93%
rename from docs/reference/create-network.mdx
rename to docs/src/content/docs/reference/create-network.mdx
index c622e5f7..c5f0eafc 100644
--- a/docs/reference/create-network.mdx
+++ b/docs/src/content/docs/reference/create-network.mdx
@@ -3,6 +3,8 @@ title: createNetwork
description: 'Define a network'
---
+import ParamField from '../../../components/ParamField.astro';
+
Networks are defined using the `createNetwork` function.
```ts
diff --git a/docs/reference/create-tool.mdx b/docs/src/content/docs/reference/create-tool.mdx
similarity index 93%
rename from docs/reference/create-tool.mdx
rename to docs/src/content/docs/reference/create-tool.mdx
index 61967bcf..571cf491 100644
--- a/docs/reference/create-tool.mdx
+++ b/docs/src/content/docs/reference/create-tool.mdx
@@ -3,6 +3,9 @@ title: createTool
description: 'Provide tools to an agent'
---
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import ParamField from '../../../components/ParamField.astro';
+
Tools are defined using the `createTool` function.
```ts
@@ -104,9 +107,10 @@ const tool = createTool({
- Perform cleanup operations
-
+
+
-```ts onStart
+```ts
const tool = createTool({
name: 'write-file',
lifecycle: {
@@ -118,7 +122,10 @@ const tool = createTool({
});
```
-```ts onFinish
+
+
+
+```ts
const tool = createTool({
name: 'write-file',
lifecycle: {
@@ -130,4 +137,5 @@ const tool = createTool({
});
```
-
+
+
diff --git a/docs/src/content/docs/reference/introduction.mdx b/docs/src/content/docs/reference/introduction.mdx
new file mode 100644
index 00000000..061970b3
--- /dev/null
+++ b/docs/src/content/docs/reference/introduction.mdx
@@ -0,0 +1,15 @@
+---
+title: 'Introduction'
+description: 'SDK Reference'
+---
+
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+
+## Overview
+
+The Inngest Agent Kit is a TypeScript library is divided into two main parts:
+
+
+
+
+
diff --git a/docs/reference/model-anthropic.mdx b/docs/src/content/docs/reference/model-anthropic.mdx
similarity index 94%
rename from docs/reference/model-anthropic.mdx
rename to docs/src/content/docs/reference/model-anthropic.mdx
index da36e3e6..1e9dabf8 100644
--- a/docs/reference/model-anthropic.mdx
+++ b/docs/src/content/docs/reference/model-anthropic.mdx
@@ -3,6 +3,8 @@ title: Anthropic Model
description: "Configure Anthropic as your model provider"
---
+import ParamField from '../../../components/ParamField.astro';
+
The `anthropic` function configures Anthropic's Claude as your model provider.
```ts
@@ -35,7 +37,9 @@ const agent = createAgent({
});
```
-
**Note: `defaultParameters.max_tokens` is required.**
+:::caution
+**Note: `defaultParameters.max_tokens` is required.**
+:::
### Options
diff --git a/docs/reference/model-gemini.mdx b/docs/src/content/docs/reference/model-gemini.mdx
similarity index 96%
rename from docs/reference/model-gemini.mdx
rename to docs/src/content/docs/reference/model-gemini.mdx
index 221ec472..ed273ac4 100644
--- a/docs/reference/model-gemini.mdx
+++ b/docs/src/content/docs/reference/model-gemini.mdx
@@ -3,6 +3,8 @@ title: Gemini Model
description: "Configure Google Gemini as your model provider"
---
+import ParamField from '../../../components/ParamField.astro';
+
The `gemini` function configures Google's Gemini as your model provider.
```ts
diff --git a/docs/reference/model-grok.mdx b/docs/src/content/docs/reference/model-grok.mdx
similarity index 96%
rename from docs/reference/model-grok.mdx
rename to docs/src/content/docs/reference/model-grok.mdx
index 53f93ef6..7db38e09 100644
--- a/docs/reference/model-grok.mdx
+++ b/docs/src/content/docs/reference/model-grok.mdx
@@ -3,6 +3,8 @@ title: Grok Model
description: "Configure Grok as your model provider"
---
+import ParamField from '../../../components/ParamField.astro';
+
The `grok` function configures Grok as your model provider.
```ts
@@ -73,4 +75,4 @@ For the latest list of available models, see [xAI's Grok model overview](https:/
## Limitations
-Grok models do not currently support strict function parameters.
\ No newline at end of file
+Grok models do not currently support strict function parameters.
diff --git a/docs/reference/model-openai.mdx b/docs/src/content/docs/reference/model-openai.mdx
similarity index 96%
rename from docs/reference/model-openai.mdx
rename to docs/src/content/docs/reference/model-openai.mdx
index b240b1fb..a5636636 100644
--- a/docs/reference/model-openai.mdx
+++ b/docs/src/content/docs/reference/model-openai.mdx
@@ -3,6 +3,8 @@ title: OpenAI Model
description: "Configure OpenAI as your model provider"
---
+import ParamField from '../../../components/ParamField.astro';
+
The `openai` function configures OpenAI as your model provider.
```ts
diff --git a/docs/reference/network-router.mdx b/docs/src/content/docs/reference/network-router.mdx
similarity index 86%
rename from docs/reference/network-router.mdx
rename to docs/src/content/docs/reference/network-router.mdx
index 1b5a64c0..6bded0fd 100644
--- a/docs/reference/network-router.mdx
+++ b/docs/src/content/docs/reference/network-router.mdx
@@ -1,9 +1,10 @@
---
title: Network Router
-sidebarTitle: Router
description: Controlling the flow of execution between agents in a Network.
---
+import ParamField from '../../../components/ParamField.astro';
+
The `defaultRouter` option in `createNetwork` defines how agents are coordinated within a Network. It can be either a [Function Router](#function-router) or a [Routing Agent](#routing-agent).
## Function Router
@@ -118,22 +119,20 @@ const network = createNetwork({
-
-
- Called after each inference to determine the next agent(s) to call.
-
- **Arguments:**
- ```ts
- {
- result: InferenceResult; // The result from the routing agent's inference
- agent: RoutingAgent; // The routing agent instance
- network: Network; // The network instance
- }
- ```
-
- **Returns:** `string[]` - Array of agent names to call next, or `undefined` to stop execution
-
-
+
+ Called after each inference to determine the next agent(s) to call.
+
+ **Arguments:**
+ ```ts
+ {
+ result: InferenceResult; // The result from the routing agent's inference
+ agent: RoutingAgent; // The routing agent instance
+ network: Network; // The network instance
+ }
+ ```
+
+ **Returns:** `string[]` - Array of agent names to call next, or `undefined` to stop execution
+
diff --git a/docs/reference/react-hooks/agent-provider.mdx b/docs/src/content/docs/reference/react-hooks/agent-provider.mdx
similarity index 95%
rename from docs/reference/react-hooks/agent-provider.mdx
rename to docs/src/content/docs/reference/react-hooks/agent-provider.mdx
index 1876cf8b..096640fa 100644
--- a/docs/reference/react-hooks/agent-provider.mdx
+++ b/docs/src/content/docs/reference/react-hooks/agent-provider.mdx
@@ -3,13 +3,16 @@ title: "AgentProvider API Reference"
description: "Complete API documentation for AgentProvider - shared connections and configuration management"
---
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+import ParamField from '../../../../components/ParamField.astro';
+
The `AgentProvider` is a React context provider that enables **shared WebSocket connections** and **centralized configuration** across your entire AgentKit application. It significantly improves performance and simplifies setup.
-
- Using AgentProvider can reduce WebSocket connections from N (one per hook) to
- 1 (shared across all components), improving performance by 3-5x and reducing
- server load substantially.
-
+:::note
+Using AgentProvider can reduce WebSocket connections from N (one per hook) to
+1 (shared across all components), improving performance by 3-5x and reducing
+server load substantially.
+:::
## Import
@@ -911,22 +914,27 @@ const transport = useMemo(() =>
## Next Steps
-
-
- Recommended hook that builds on AgentProvider for complete chat apps
-
-
- Complete transport configuration and customization guide
-
-
- Best practices and optimization strategies for AgentProvider
-
-
+
+
+
+
- Scale AgentKit applications for production workloads
-
-
+ description="Scale AgentKit applications for production workloads"
+ />
+
AgentProvider is the foundation that makes AgentKit's React hooks both powerful and efficient. By centralizing configuration and enabling connection sharing, it transforms individual hooks into a cohesive, high-performance system for building production-scale AI applications.
diff --git a/docs/reference/react-hooks/overview.mdx b/docs/src/content/docs/reference/react-hooks/overview.mdx
similarity index 84%
rename from docs/reference/react-hooks/overview.mdx
rename to docs/src/content/docs/reference/react-hooks/overview.mdx
index bca18ee3..7445d388 100644
--- a/docs/reference/react-hooks/overview.mdx
+++ b/docs/src/content/docs/reference/react-hooks/overview.mdx
@@ -3,6 +3,8 @@ title: "React Hooks API Reference"
description: "Complete API documentation for @inngest/use-agent React hooks"
---
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+
The `@inngest/use-agent` package provides a comprehensive set of React hooks for building AI chat interfaces with AgentKit networks. This reference section documents every hook, component, and utility in detail.
## Package Overview
@@ -13,86 +15,69 @@ npm install @inngest/use-agent
npm install react @inngest/realtime uuid
```
-
-
+
- View package details, versions, and installation stats
-
-
+
- Source code, issues, and contributions
-
-
+ description="Source code, issues, and contributions"
+ />
+
## Core Hooks
These hooks provide the primary functionality for building AI chat applications:
-
-
+
- **Recommended**: Unified hook for complete chat applications with streaming,
- threads, and persistence
-
-
- **Advanced**: Low-level hook for real-time streaming and multi-thread
- management
-
-
+
+
- **Specialized**: Thread management, pagination, and persistence operations
-
-
+ description="Specialized: Thread management, pagination, and persistence operations"
+ />
+
## Infrastructure Components
Essential components for connection management and configuration:
-
-
+
- Context provider for shared connections, configuration, and performance
- optimization
-
-
+
- Configurable API layer for customizing endpoints, authentication, and
- request handling
-
-
+ description="Configurable API layer for customizing endpoints, authentication, and request handling"
+ />
+
## Utility Hooks
Specialized hooks for specific features and UI patterns:
-
-
+
- useMessageActions, useEditMessage, useEphemeralThreads, useSidebar,
- useIsMobile, and more
-
-
+ description="useMessageActions, useEditMessage, useEphemeralThreads, useSidebar, useIsMobile, and more"
+ />
+
## Package Architecture
@@ -409,28 +394,27 @@ import { useChat, AgentProvider } from "@inngest/use-agent";
## Next Steps
-
-
+
- Full API documentation for the primary chat hook
-
-
+
- Configuration and optimization guide for the provider
-
-
+
- Customize API communication and authentication
-
-
- Get started building with the hooks in 5 minutes
-
-
+ description="Customize API communication and authentication"
+ />
+
+
This reference section provides the definitive documentation for every aspect of the `@inngest/use-agent` package. Whether you're just getting started or building advanced custom implementations, you'll find the complete API documentation and guidance you need here.
diff --git a/docs/reference/react-hooks/use-agent.mdx b/docs/src/content/docs/reference/react-hooks/use-agent.mdx
similarity index 95%
rename from docs/reference/react-hooks/use-agent.mdx
rename to docs/src/content/docs/reference/react-hooks/use-agent.mdx
index 58e73d1d..12affaed 100644
--- a/docs/reference/react-hooks/use-agent.mdx
+++ b/docs/src/content/docs/reference/react-hooks/use-agent.mdx
@@ -3,14 +3,17 @@ title: "useAgent API Reference"
description: "Complete API documentation for the useAgent hook - advanced streaming and multi-thread control"
---
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+import ParamField from '../../../../components/ParamField.astro';
+
The `useAgent` hook provides **advanced, low-level control** over AgentKit's real-time streaming system. It manages WebSocket connections, processes streaming events, and maintains conversation state across multiple threads simultaneously.
-
- Use `useAgent` for custom implementations requiring fine control over
- streaming events. For most applications,
- [`useChat`](/reference/react-hooks/use-chat) is recommended as it provides the
- same functionality with automatic coordination.
-
+:::caution
+Use `useAgent` for custom implementations requiring fine control over
+streaming events. For most applications,
+[`useChat`](/reference/react-hooks/use-chat) is recommended as it provides the
+same functionality with automatic coordination.
+:::
## Import
@@ -228,7 +231,7 @@ switch (status) {
Name of the agent currently processing requests for the active thread.
```typescript
-
+
{currentAgent ? `${currentAgent} is responding...` : 'Assistant'}
```
@@ -298,7 +301,7 @@ WebSocket connection status to the real-time event stream.
```typescript
// Show connection indicator
-
+
{isConnected ? '🟢 Connected' : '🔴 Disconnected'}
```
@@ -563,7 +566,7 @@ function MultiThreadChat() {
setCurrentThread(threadId)}
- className={threadState.hasNewMessages ? 'unread' : ''}
+ class={threadState.hasNewMessages ? 'unread' : ''}
>
{threadId}: {threadState.messages.length} messages
{threadState.hasNewMessages && ' 🔴'}
@@ -715,11 +718,11 @@ function MultiAgentInterface() {
};
return (
-
-
+
+
-
@@ -1073,19 +1076,19 @@ function EmbeddedChatWidget({ containerId, config }) {
// Minimal UI suitable for embedding
return (
-