Assistant UI LangGraph FastAPI

https://github.com/yonom/assistant-ui-langgraph-fastapi
Admin
Assistant UI LangGraph FastAPI is a demonstration project that combines LangGraph, assistant-stream,...
Tokens:25,146
Snippets:369
Trust Score:8.5
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Setup Frontend Environment

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Commands to install dependencies and start the frontend development server.

```bash
cd frontend
yarn install
yarn dev
# Runs on http://localhost:3000
```

--------------------------------

### Setup Backend Environment

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Commands to initialize the backend environment and start the server.

```bash
cd backend
cp .env.example .env
# Edit .env: OPENAI_API_KEY=sk_...
poetry install
poetry run python -m app.server
# Runs on http://localhost:8000
```

--------------------------------

### Frontend Initialization

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/README.md

Commands to install dependencies and start the Next.js development server.

```bash
cd frontend
yarn install
yarn dev
```

--------------------------------

### Backend Initialization

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/README.md

Commands to install dependencies and start the FastAPI backend server.

```bash
cd backend
poetry install
poetry run python -m app.server
```

--------------------------------

### Frontend Development Start Command

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Commands to navigate to the frontend directory and start the development server.

```bash
cd frontend
yarn dev
```

--------------------------------

### Instantiate LanguageModelFilePart

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Example of creating a file part using a URL.

```python
part = LanguageModelFilePart(
    type="file",
    data="https://example.com/document.pdf",
    mimeType="application/pdf"
)
```

--------------------------------

### Production Build Commands

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Commands to build the application for production and start the server.

```bash
yarn build
yarn start
```

--------------------------------

### Instantiate LanguageModelTextPart

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Example usage of the LanguageModelTextPart class.

```python
part = LanguageModelTextPart(
    type="text",
    text="Hello, how are you?"
)
```

--------------------------------

### Instantiate FrontendToolCall

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Examples of defining tools with and without parameter schemas.

```python
tool = FrontendToolCall(
    name="refresh_page",
    description="Refresh the page",
    parameters={}
)

tool = FrontendToolCall(
    name="open_settings",
    description="Open application settings",
    parameters={
        "type": "object",
        "properties": {
            "section": {
                "type": "string",
                "description": "Settings section to open"
            }
        },
        "required": ["section"]
    }
)
```

--------------------------------

### Start Server via CLI

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/server.md

Launch the Uvicorn server using the poetry environment.

```bash
cd backend
poetry run python -m app.server
```

--------------------------------

### Full Example Response Stream

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

A complete example of a response stream containing text, tool calls, arguments, and results.

```text
event: text
data: {"text": "I'll check the current stock price for Apple."}

event: tool_call
data: {"toolCallId": "call_123", "toolName": "get_stock_price"}

event: tool_call_args
data: {"toolCallId": "call_123", "args": "{"}

event: tool_call_args
data: {"toolCallId": "call_123", "args": "\"stock_symbol\": \"AAPL\""}

event: tool_call_args
data: {"toolCallId": "call_123", "args": "}"}

event: tool_result
data: {"toolCallId": "call_123", "result": "{\"symbol\": \"AAPL\", ...}"}

event: text
data: {"text": "Apple (AAPL) is currently trading at $173.50"}
```

--------------------------------

### Instantiate LanguageModelToolResultContentPart

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Examples for creating text and image result parts.

```python
# Text result
part = LanguageModelToolResultContentPart(
    type="text",
    text="Stock price is $173.50"
)

# Image result
part = LanguageModelToolResultContentPart(
    type="image",
    data="data:image/png;base64,iVBORw0KGgo...",
    mimeType="image/png"
)
```

--------------------------------

### Install Testing Dependencies

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Add testing frameworks for both backend and frontend environments.

```bash
# Backend
poetry add pytest pytest-asyncio -G dev

# Frontend
yarn add -D jest @testing-library/react
```

--------------------------------

### Instantiate LanguageModelSystemMessage

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Example usage for creating a system message instance.

```python
msg = LanguageModelSystemMessage(
    role="system",
    content="You are a helpful financial assistant."
)
```

--------------------------------

### Instantiate FrontendTool

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Example of creating a tool instance that signals the frontend to handle execution.

```python
# Frontend tool that refreshes the page
frontend_tool = FrontendTool("refresh_page")

# Model can call this, but execution raises NodeInterrupt
# to signal the frontend to handle it
```

--------------------------------

### Instantiate LanguageModelImagePart

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Examples of creating an image part using a URL or base64-encoded data.

```python
part = LanguageModelImagePart(
    type="image",
    image="https://example.com/image.png",
    mimeType="image/png"
)

# Or base64-encoded
part = LanguageModelImagePart(
    type="image",
    image="data:image/png;base64,iVBORw0KGgo...",
    mimeType="image/png"
)
```

--------------------------------

### Agent Interaction Example

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-tools.md

Demonstrates how the agent interacts with the tool during a user conversation.

```text
User: "What's the current price of Apple stock?"

Agent invokes: get_stock_price("AAPL")

Agent receives: {
    "symbol": "AAPL",
    "company_name": "Apple Inc.",
    "current_price": 173.50,
    ...
}

Agent responds with the information to the user.
```

--------------------------------

### Instantiate LanguageModelToolResultPart

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Examples of creating tool result parts for successful and error scenarios.

```python
part = LanguageModelToolResultPart(
    type="tool-result",
    toolCallId="call_abc123",
    toolName="get_stock_price",
    result={"symbol": "AAPL", "price": 173.50, "timestamp": "2024-01-15T14:30:00Z"},
    isError=False
)

# Error result
part = LanguageModelToolResultPart(
    type="tool-result",
    toolCallId="call_xyz789",
    toolName="get_stock_price",
    result={"error": "Invalid stock symbol"},
    isError=True
)
```

--------------------------------

### Instantiate LanguageModelToolCallPart

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Example usage for creating a tool call part instance.

```python
part = LanguageModelToolCallPart(
    type="tool-call",
    toolCallId="call_abc123",
    toolName="get_stock_price",
    args={"stock_symbol": "AAPL"}
)
```

--------------------------------

### Instantiate ChatRequest

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Example of creating a ChatRequest instance with system prompt, tools, and message history.

```python
request = ChatRequest(
    system="You are a helpful financial assistant.",
    tools=[
        FrontendToolCall(
            name="refresh_page",
            description="Refresh the page",
            parameters={}
        )
    ],
    messages=[
        LanguageModelUserMessage(
            role="user",
            content=[
                LanguageModelTextPart(
                    type="text",
                    text="What's the AAPL stock price?"
                )
            ]
        )
    ]
)
```

--------------------------------

### Configure Uvicorn Server Parameters

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Examples for running the FastAPI application with default or custom server settings.

```python
uvicorn.run(app, host="0.0.0.0", port=8000)
```

```python
import uvicorn

# Custom configuration
uvicorn.run(
    app,
    host="127.0.0.1",      # Only local connections
    port=5000,              # Different port
    reload=True,            # Auto-reload on code changes
    workers=4               # Multiple worker processes
)
```

--------------------------------

### Start Server Programmatically

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/server.md

Launch the Uvicorn server directly within a Python script.

```python
import uvicorn
from app.server import app

uvicorn.run(app, host="0.0.0.0", port=8000)
```

--------------------------------

### Instantiate LanguageModelAssistantMessage

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Example usage of the assistant message class with text and a tool call.

```python
msg = LanguageModelAssistantMessage(
    role="assistant",
    content=[
        LanguageModelTextPart(type="text", text="I'll check the price."),
        LanguageModelToolCallPart(
            type="tool-call",
            toolCallId="call_123",
            toolName="get_stock_price",
            args={"stock_symbol": "AAPL"}
        )
    ]
)
```

--------------------------------

### Frontend Runtime Configuration

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Example of initializing the edge runtime for handling backend tool events.

```typescript
// Frontend automatically handles NodeInterrupt
const runtime = useEdgeRuntime({
  api: "http://localhost:8000/api/chat"
});

// When NodeInterrupt is raised:
// 1. Tool call event received
// 2. useAssistantTool's execute() is called
// 3. Result sent back to backend
```

--------------------------------

### Instantiate LanguageModelToolMessage

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Example usage of the LanguageModelToolMessage class with a tool result.

```python
msg = LanguageModelToolMessage(
    role="tool",
    content=[
        LanguageModelToolResultPart(
            type="tool-result",
            toolCallId="call_123",
            toolName="get_stock_price",
            result={"symbol": "AAPL", "price": 173.50}
        )
    ]
)
```

--------------------------------

### Instantiate LanguageModelUserMessage

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/types.md

Example usage of the user message class with text and image content.

```python
msg = LanguageModelUserMessage(
    role="user",
    content=[
        LanguageModelTextPart(type="text", text="What's AAPL?"),
        LanguageModelImagePart(type="image", image="data:image/png;base64,...")
    ]
)
```

--------------------------------

### MyAssistant Usage Example

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Demonstrates how to import and render the MyAssistant component within a Next.js page.

```typescript
import { MyAssistant } from "@/components/MyAssistant";

export default function Home() {
  return (
    <main>
      <MyAssistant />
    </main>
  );
}
```

--------------------------------

### System Message Format

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Example of a system-role message defining agent behavior.

```json
{
  "role": "system",
  "content": "You are a helpful financial assistant."
}
```

--------------------------------

### Agent State Evolution Example

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-state.md

Demonstrates how the messages list accumulates different message types throughout the agent's execution cycle.

```python
# Initial state
state = {"messages": []}

# After user input
state = {"messages": [HumanMessage(content="What's AAPL?")]}

# After agent responds
state = {
    "messages": [
        HumanMessage(content="What's AAPL?"),
        AIMessage(content="I'll check the stock price.", tool_calls=[...])
    ]
}

# After tool execution
state = {
    "messages": [
        HumanMessage(content="What's AAPL?"),
        AIMessage(content="I'll check the stock price.", tool_calls=[...]),
        ToolMessage(content="{'symbol': 'AAPL', 'price': 173.50}", tool_call_id="...")
    ]
}

# After agent final response
state = {
    "messages": [
        HumanMessage(content="What's AAPL?"),
        AIMessage(content="I'll check the stock price.", tool_calls=[...]),
        ToolMessage(content="{'symbol': 'AAPL', 'price': 173.50}", tool_call_id="..."),
        AIMessage(content="Apple stock (AAPL) is currently trading at $173.50...")
    ]
}
```

--------------------------------

### 400 Bad Request JSON Examples

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Examples of malformed JSON request bodies that trigger a 400 error.

```json
{"system": "text", "messages": [}  // Missing ]
```

```json
{"system": "text", "tools": []}
// Missing required "messages" field
```

```json
{
  "messages": [
    {"role": "invalid", "content": "..."}
  ]
}
```

```json
{
  "messages": [
    {
      "role": "user",
      "content": "string instead of array"  // User messages require array
    }
  ]
}
```

--------------------------------

### User Message Format

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Example of a user-role message containing text content.

```json
{
  "role": "user",
  "content": [
    {
      "type": "text",
      "text": "What is AAPL?"
    }
  ]
}
```

--------------------------------

### Registering a chat route in FastAPI

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/add-langgraph-route.md

Example of initializing a FastAPI app and registering a LangGraph workflow to a specific endpoint path.

```python
from fastapi import FastAPI
from app.langgraph.agent import assistant_ui_graph
from app.add_langgraph_route import add_langgraph_route

app = FastAPI()

# Register the chat route
add_langgraph_route(app, assistant_ui_graph, "/api/chat")

# Now POST /api/chat accepts chat requests
```

--------------------------------

### Example Chat Request

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

A cURL command demonstrating how to send a chat request to the /api/chat endpoint.

```bash
curl -X POST http://localhost:8000/api/chat \
  -H "Content-Type: application/json" \
  -d '{
    "system": "You are a helpful financial assistant. Your name is assistant-ui.",
    "tools": [
      {
        "name": "refresh_page",
        "description": "Refresh the page",
        "parameters": {}
      }
    ],
    "messages": [
      {
        "role": "user",
        "content": [
          {
            "type": "text",
            "text": "What is the current stock price for Apple?"
          }
        ]
      }
    ]
  }'
```

--------------------------------

### Assistant Message Format

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Example of an assistant-role message containing both text and a tool call.

```json
{
  "role": "assistant",
  "content": [
    {
      "type": "text",
      "text": "I'll check the stock price."
    },
    {
      "type": "tool-call",
      "toolCallId": "call_123",
      "toolName": "get_stock_price",
      "args": {"stock_symbol": "AAPL"}
    }
  ]
}
```

--------------------------------

### Invoking get_stock_price Directly

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-tools.md

Example of calling the tool function directly and viewing the output.

```python
from app.langgraph.tools import get_stock_price

# Direct invocation
result = get_stock_price("AAPL")
print(result)
# Output:
# {
#     "symbol": "AAPL",
#     "company_name": "Apple Inc.",
#     "current_price": 173.50,
#     "change": 2.35,
#     "change_percent": 1.37,
#     "volume": 52436789,
#     "market_cap": "2.73T",
#     "pe_ratio": 28.5,
#     "fifty_two_week_high": 198.23,
#     "fifty_two_week_low": 124.17,
#     "timestamp": "2024-01-15T14:30:45Z"
# }
```

--------------------------------

### Tool Message Format

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Example of a tool-role message containing the result of a tool execution.

```json
{
  "role": "tool",
  "content": [
    {
      "type": "tool-result",
      "toolCallId": "call_123",
      "toolName": "get_stock_price",
      "result": {"symbol": "AAPL", "price": 173.50}
    }
  ]
}
```

--------------------------------

### Extending get_stock_price with Real Data

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-tools.md

Example implementation for replacing mock data with a real API call.

```python
@tool(return_direct=True)
def get_stock_price(stock_symbol: str) -> dict[str, Any]:
    """Get current stock price..."""
    # Replace mock implementation with real API call
    response = requests.get(f"https://api.example.com/quote/{stock_symbol}")
    data = response.json()
    return {
        "symbol": data["symbol"],
        "company_name": data["name"],
        "current_price": float(data["price"]),
        # ... map other fields
    }
```

--------------------------------

### Streaming Protocol Events

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Example of Server-Sent Events (SSE) using the assistant-stream format.

```text
event: text
data: {"text": "Response text chunk"}

event: tool_call
data: {"toolCallId": "call_123", "toolName": "get_stock_price"}

event: tool_call_args
data: {"toolCallId": "call_123", "args": '{"symbol":"AAPL"}'}

event: tool_result
data: {"toolCallId": "call_123", "result": "..."}
```

--------------------------------

### Execute Chat Completion Request via cURL

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/add-langgraph-route.md

Example request to the /api/chat endpoint to initiate a streaming chat session.

```bash
curl -X POST http://localhost:8000/api/chat \
  -H "Content-Type: application/json" \
  -d '{
    "system": "You are helpful.",
    "tools": [],
    "messages": [
      {
        "role": "user",
        "content": [{"type": "text", "text": "Hello"}]
      }
    ]
  }'
```

--------------------------------

### 500 Internal Server Error Scenarios

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Examples of code that may trigger internal server errors.

```python
# OpenAI API error
# Error: AuthenticationError: Invalid API key provided

# Tool error
def get_stock_price(stock_symbol: str):
    # Raises uncaught exception
    return bad_function_call()

# Graph error
async def call_model(state, config):
    # Raises exception
    raise ValueError("Invalid state")
```

--------------------------------

### Backend Startup Output

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Expected console output upon successful backend server initialization.

```text
INFO:     Uvicorn running on http://0.0.0.0:8000
```

--------------------------------

### Frontend Startup Output

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Expected console output upon successful frontend development server initialization.

```text
▲ Next.js 15.0.3
- Local:        http://localhost:3000
```

--------------------------------

### 422 Unprocessable Entity Response

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Example of a Pydantic validation error response body.

```json
{
  "detail": [
    {
      "type": "value_error.missing",
      "loc": ["body", "messages"],
      "msg": "field required",
      "input": {}
    }
  ]
}
```

--------------------------------

### useAssistantTool

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Registers a tool with the assistant-ui framework, allowing the backend agent to trigger client-side execution.

```APIDOC
## useAssistantTool

### Description
Registers a tool that the LangGraph agent can invoke. When the agent calls the tool, the provided `execute` function runs on the client side.

### Parameters
- **toolName** (string) - Required - Unique identifier for the tool sent to the backend.
- **description** (string) - Required - A description of the tool's purpose for the agent.
- **parameters** (object) - Required - A JSON schema defining the arguments the tool accepts.
- **execute** (function) - Required - The asynchronous function to execute on the client when the tool is called.

### Example
```typescript
useAssistantTool({
  toolName: "open_settings",
  description: "Open application settings",
  parameters: {
    type: "object",
    properties: {
      section: { type: "string" }
    }
  },
  execute: async (args) => {
    navigate(`/settings/${args.section}`);
  }
});
```
```

--------------------------------

### Load Environment Variables

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Demonstrates accessing environment variables with fallback defaults.

```python
import os
from dotenv import load_dotenv

load_dotenv()

api_key = os.getenv("OPENAI_API_KEY")  # From environment or .env
model_name = os.getenv("MODEL_NAME", "gpt-3.5-turbo")  # Default if not set
```

--------------------------------

### Configure OpenAI API Key in Environment

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Add the API key to the .env file to resolve authentication errors.

```text
OPENAI_API_KEY=sk_test_...
```

--------------------------------

### Define a Frontend Tool

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Implement a tool on the client side using the useAssistantTool hook with a name, description, and execution callback.

```typescript
useAssistantTool({
  toolName: "action_name",
  description: "What it does",
  parameters: {/* JSON schema */},
  execute: async (args) => {
    // Implementation
  }
});
```

--------------------------------

### Trigger Pydantic Validation Errors

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Examples of invalid Pydantic model instantiations that trigger ValidationError.

```python
ChatRequest(messages=[])  # Missing required field
```

```python
LanguageModelUserMessage(role="invalid", content=[])
```

```python
LanguageModelTextPart(type="image", text="...")  # Wrong type
```

--------------------------------

### Configure OpenAI Model Instance

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Instantiate the ChatOpenAI model with default or custom parameters. Requires the OPENAI_API_KEY environment variable.

```python
model = ChatOpenAI()
```

```python
from langchain_openai import ChatOpenAI

model = ChatOpenAI(
    model="gpt-4",  # or gpt-3.5-turbo, etc.
    temperature=0.7,
    max_tokens=4096
)
```

--------------------------------

### Importing Backend Tools

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-tools.md

Import the tools list and specific tool functions from the application module.

```python
from app.langgraph.tools import tools, get_stock_price
```

--------------------------------

### Configure Assistant Instructions

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Sets the system prompt for the LangGraph agent, which is sent to the backend via the ChatRequest system field.

```typescript
// Current
useAssistantInstructions("Your name is assistant-ui.");

// Alternative examples
useAssistantInstructions("You are a helpful financial advisor.");
useAssistantInstructions("Answer questions concisely and provide sources.");
```

--------------------------------

### Import FastAPI Application

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/server.md

Import the pre-configured FastAPI application instance from the server module.

```python
from app.server import app
```

--------------------------------

### Reducer add_messages Behavior

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-state.md

Example of how the add_messages reducer processes returned dictionary updates into the existing state.

```python
# Example: Node returns new messages
returned = {"messages": [AIMessage(content="Hello")]}

# Reducer applies this to state
state["messages"].extend([AIMessage(content="Hello")])
# Or merges if sequential same-type chunks
```

--------------------------------

### Configure Production Backend

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Settings for production deployment including reload status, worker count, CORS, and API keys.

```python
uvicorn.run(app, host="0.0.0.0", port=8000, reload=False)
```

```python
uvicorn.run(app, host="0.0.0.0", port=8000, workers=4)
```

```python
allow_origins=["https://yourdomain.com"]
```

```bash
export OPENAI_API_KEY=sk_...
```

--------------------------------

### Register a tool with parameters

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Demonstrates defining a tool that accepts arguments, such as a navigation target, using a JSON schema for parameter validation.

```typescript
useAssistantTool({
  toolName: "open_settings",
  description: "Open application settings",
  parameters: {
    type: "object",
    properties: {
      section: { type: "string" }
    }
  },
  execute: async (args) => {
    // Navigate to settings
    navigate(`/settings/${args.section}`);
  }
});
```

--------------------------------

### Initialize OpenAI Model

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Basic initialization of the ChatOpenAI model instance.

```python
model = ChatOpenAI()
```

--------------------------------

### Common Pydantic Validation Patterns

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Examples of common schema violations including missing fields, incorrect types, and invalid literal values.

```python
# Missing required field
ChatRequest(
    system="test",
    tools=[],
    # messages is missing
)
# ValidationError: field required at 'messages'

# Wrong type
ChatRequest(
    system="test",
    tools="not_a_list",  # Should be list
    messages=[]
)
# ValidationError: value is not a valid list

# Invalid literal value
LanguageModelUserMessage(
    role="invalid_role",  # Must be "user"
    content=[]
)
# ValidationError: Input should be 'user' at 'role'
```

--------------------------------

### get_tools(config: Dict[str, Any])

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Retrieves executable tool instances, wrapping frontend tools into FrontendTool objects.

```APIDOC
## get_tools

### Description
Retrieves executable tool instances. Wraps frontend tools in `FrontendTool` instances so the tool node can handle their execution appropriately.

### Parameters
- **config** (Dict) - Required - Runnable config with `configurable.frontend_tools`

### Return Value
- **List[BaseTool]** - Combined list of backend and frontend `BaseTool` instances.
```

--------------------------------

### Define Home Page Component

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

The root page component initializes assistant instructions and tools before rendering the chat interface.

```typescript
export default function Home() {
  useAssistantInstructions("Your name is assistant-ui.");
  useAssistantTool({
    toolName: "refresh_page",
    description: "Refresh the page",
    parameters: {},
    execute: async () => {
      window.location.reload();
    },
  });

  return (
    <main className="h-dvh">
      <MyAssistant />
    </main>
  );
}
```

--------------------------------

### Update System Instructions

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Set the assistant's persona or behavior using the useAssistantInstructions hook.

```typescript
useAssistantInstructions("Your name is ...");
```

--------------------------------

### Configure Uvicorn for Development

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Enable hot reloading for the backend server during development.

```python
uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)
```

--------------------------------

### useAssistantInstructions

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Sets the system prompt that will be sent to the LangGraph agent. This instruction is communicated to the backend via the ChatRequest.system field.

```APIDOC
## useAssistantInstructions

### Description
Sets the system prompt that will be sent to the LangGraph agent. This instruction is managed by the assistant-ui runtime and prepended to messages in the backend.

### Signature
`useAssistantInstructions(instructions: string)`

### Parameters
- **instructions** (string) - Required - System instructions for the agent.

### Example
```typescript
useAssistantInstructions("Your name is assistant-ui.");
```
```

--------------------------------

### Configure Production Frontend

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Build commands, API endpoint configuration, and caching settings for the frontend.

```bash
yarn build
yarn start
```

```bash
NEXT_PUBLIC_API_URL=https://api.yourdomain.com
```

```typescript
const nextConfig = {
  experimental: {
    isrMemoryCacheSize: 52 * 1024 * 1024,
  },
};
```

--------------------------------

### Verify API Key Environment Variable

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Check the format of the API key in the .env file and verify it is correctly exported in the terminal.

```bash
OPENAI_API_KEY=sk_...
```

```bash
echo $OPENAI_API_KEY
```

--------------------------------

### Execute a Frontend Tool with Error Handling

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Uses useAssistantTool to execute a client-side function, returning an error object if the execution fails.

```typescript
useAssistantTool({
  toolName: "refresh_page",
  description: "Refresh the page",
  parameters: {},
  execute: async () => {
    try {
      window.location.reload();
    } catch (e) {
      // Report error back to agent
      return { error: e.message };
    }
  }
});
```

--------------------------------

### Wrap Frontend Tools

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Converts frontend tools into FrontendTool instances for execution handling.

```python
tools + [
    FrontendTool(tool.name)
    for tool in config["configurable"]["frontend_tools"]
]
```

--------------------------------

### Enable Python Logging

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Configures the standard logging module to output debug information and capture exception stack traces.

```python
import logging

logging.basicConfig(level=logging.DEBUG)
logger = logging.getLogger(__name__)

logger.debug("Received request", extra={"request": request})
logger.error("Tool execution failed", exc_info=True)
```

--------------------------------

### Handle 400 Bad Request in Python

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Demonstrates catching and inspecting 400 errors using httpx.

```python
import httpx
import json

try:
    response = await client.post(
        "http://localhost:8000/api/chat",
        json=request
    )
    response.raise_for_status()
except httpx.HTTPStatusError as e:
    if e.response.status_code == 400:
        print("Invalid request format:", e.response.text)
```

--------------------------------

### Tool Arguments Event

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Format for streaming tool arguments incrementally.

```text
event: tool_call_args
data: {"toolCallId": "call_123", "args": "{\"stock_symbol\""}

event: tool_call_args
data: {"toolCallId": "call_123", "args": ": \"AAPL\"}"}
```

--------------------------------

### Display Project Documentation Structure

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/MANIFEST.md

Visual representation of the project's documentation directory hierarchy.

```text
output/
├── README.md                          (Index & Quick Reference)
├── MANIFEST.md                        (This file)
├── architecture.md                    (System Design)
├── endpoints.md                       (HTTP API)
├── errors.md                          (Error Handling)
├── types.md                           (Type Definitions)
├── configuration.md                   (Configuration)
└── api-reference/
    ├── server.md                      (FastAPI Setup)
    ├── add-langgraph-route.md         (Endpoint Handler)
    ├── langgraph-agent.md             (Agent Workflow)
    ├── langgraph-tools.md             (Tool Definitions)
    ├── langgraph-state.md             (State Schema)
    └── frontend-components.md         (React Components)
```

--------------------------------

### Backend Tool Execution Flow

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/architecture.md

Visual representation of the backend tool execution lifecycle for functions like get_stock_price.

```text
Agent calls: get_stock_price("AAPL")
   ↓
ToolNode executes: tools.py: get_stock_price()
   ↓
Returns: dict with stock data
   ↓
ToolMessage created with result
   ↓
Agent receives result in message history
   ↓
Agent can reason about the result
```

--------------------------------

### Project Directory Structure

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/README.md

Visual representation of the project's root directory layout.

```text
assistant-ui-langgraph-fastapi/
├── backend/         # FastAPI + assistant-stream + LangGraph server
└── frontend/        # Next.js + assistant-ui client
```

--------------------------------

### Project Directory Structure

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Visual representation of the project file hierarchy, separating backend Python logic from frontend React components.

```text
.
├── backend/
│   ├── app/
│   │   ├── __init__.py
│   │   ├── server.py                 # FastAPI app
│   │   ├── add_langgraph_route.py    # Route handler
│   │   └── langgraph/
│   │       ├── agent.py              # Agent workflow
│   │       ├── state.py              # State schema
│   │       └── tools.py              # Tool definitions
│   ├── pyproject.toml                # Python dependencies
│   └── .env                          # Environment variables
│
├── frontend/
│   ├── app/
│   │   ├── layout.tsx                # Root layout
│   │   ├── page.tsx                  # Home page
│   │   └── globals.css               # Styles
│   ├── components/
│   │   └── MyAssistant.tsx           # Chat component
│   ├── package.json                  # Node dependencies
│   ├── next.config.ts                # Next.js config
│   └── tailwind.config.ts            # Tailwind config
│
└── output/
    ├── api-reference/                # API documentation
    │   ├── server.md
    │   ├── add-langgraph-route.md
    │   ├── langgraph-agent.md
    │   ├── langgraph-tools.md
    │   ├── langgraph-state.md
    │   └── frontend-components.md
    ├── endpoints.md                  # HTTP endpoints
    ├── types.md                      # Type definitions
    ├── configuration.md              # Configuration
    ├── errors.md                     # Error handling
    ├── architecture.md               # System design
    └── README.md                     # This file
```

--------------------------------

### Configure Application Metadata

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Standard Next.js metadata export for defining page title and description.

```typescript
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
```

--------------------------------

### Configure ChatOpenAI Parameters

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Adjust timeout settings or switch to a more performant model to resolve response issues.

```python
ChatOpenAI(timeout=60.0)
```

```python
ChatOpenAI(model="gpt-3.5-turbo")
```

--------------------------------

### Define and Register a New Tool

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-tools.md

Use the @tool decorator on a function with type hints and a descriptive docstring. Add the function to the tools list to make it available to the agent.

```python
@tool
def get_weather(city: str) -> dict[str, str]:
    """Get current weather for a given city."""
    # Implementation here
    return {
        "city": city,
        "temperature": 72,
        "condition": "Sunny"
    }

tools = [get_stock_price, get_weather]
```

--------------------------------

### Define a Backend Tool with Error Handling

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Demonstrates raising a ValueError within a tool function when required parameters are missing.

```python
@tool
def get_stock_price(stock_symbol: str):
    if not stock_symbol:
        raise ValueError("Stock symbol required")
    # ...
```

--------------------------------

### Initialize Thread Component

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Configures the Thread component with a runtime instance and custom markdown text rendering.

```typescript
<Thread
  runtime={runtime}
  assistantMessage={{ components: { Text: MarkdownText } }}
/>
```

--------------------------------

### Configure Uvicorn Server Timeouts

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Recommended Uvicorn configuration to manage keep-alive and notification timeouts.

```python
uvicorn.run(
    app,
    host="0.0.0.0",
    port=8000,
    timeout_keep_alive=30,
    timeout_notify=60
)
```

--------------------------------

### Backend API Endpoint Configuration

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Configures the runtime for the assistant, specifying the API endpoint and AI SDK compatibility.

```typescript
const runtime = useEdgeRuntime({
  api: "http://localhost:8000/api/chat",
  unstable_AISDKInterop: true,
});
```

```typescript
const runtime = useEdgeRuntime({
  api: "https://api.yourdomain.com/api/chat",
  unstable_AISDKInterop: true,
});
```

--------------------------------

### Configure LangGraph Agent Parameters

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Defines the structure for passing system prompts and frontend tool definitions to the graph configuration.

```python
{
    "configurable": {
        "system": "System prompt string",
        "frontend_tools": [
            {
                "name": "tool_name",
                "description": "Tool description",
                "parameters": {...}
            }
        ]
    }
}
```

--------------------------------

### Retrieve Tool Definitions

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Formats frontend tools as function tool definitions for model binding.

```python
tools + [
    {"type": "function", "function": tool}
    for tool in config["configurable"]["frontend_tools"]
]
```

--------------------------------

### Import AgentState

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-state.md

Import the AgentState class from the application module.

```python
from app.langgraph.state import AgentState
```

--------------------------------

### get_tool_defs(config: Dict[str, Any])

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Retrieves a combined list of backend and frontend tool definitions suitable for model binding.

```APIDOC
## get_tool_defs

### Description
Retrieves tool definitions for model binding. Formats frontend tools as function tool definitions.

### Parameters
- **config** (Dict) - Required - Runnable config with `configurable.frontend_tools`

### Return Value
- **List[Union[BaseTool, Dict[str, Any]]]** - Combined list of backend and frontend tool definitions.
```

--------------------------------

### Configure LangGraph Runtime

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Passes system prompts and frontend tools to the graph during execution via the config parameter.

```python
config = {
    "configurable": {
        "system": "System prompt text",
        "frontend_tools": [
            {
                "name": "tool_name",
                "description": "Tool description",
                "parameters": {}
            }
        ]
    }
}

async for msg, metadata in graph.astream(
    {"messages": inputs},
    config=config,
    stream_mode="messages"
):
    # Process streamed messages
    pass
```

--------------------------------

### Customize the LLM Model

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Configure the ChatOpenAI instance parameters within the agent definition file.

```python
model = ChatOpenAI(
    model="gpt-4",
    temperature=0.7,
    max_tokens=2048
)
```

--------------------------------

### Define a Backend Tool

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Register a new tool by applying the @tool decorator and adding it to the exported tools list.

```python
@tool
def new_tool(param: str) -> dict:
    """Description of tool."""
    return {"result": "value"}

tools = [get_stock_price, new_tool]
```

--------------------------------

### Register a basic frontend tool

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Defines a tool that performs a simple browser action without requiring input parameters.

```typescript
useAssistantTool({
  toolName: "refresh_page",
  description: "Refresh the page",
  parameters: {},
  execute: async () => {
    window.location.reload();
  },
});
```

--------------------------------

### Defining the get_stock_price Tool

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-tools.md

The tool definition using the @tool decorator with return_direct=True.

```python
@tool(return_direct=True)
def get_stock_price(stock_symbol: str) -> dict[str, Any]:
    """Call to get the current stock price and related information for a given stock symbol."""
    ...
```

--------------------------------

### Load OpenAI API Key with python-dotenv

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Use this pattern to load the required OPENAI_API_KEY from a .env file into the environment.

```python
from dotenv import load_dotenv
import os

load_dotenv()
api_key = os.getenv("OPENAI_API_KEY")
```

--------------------------------

### MyAssistant Component

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

The main chat interface component that configures the assistant-ui runtime and renders the thread UI.

```APIDOC
## MyAssistant

### Description
Main chat interface component that configures the assistant-ui runtime and renders the thread UI. Handles real-time communication with the LangGraph backend.

### Signature
`export function MyAssistant(): JSX.Element`

### Usage
```typescript
import { MyAssistant } from "@/components/MyAssistant";

export default function Home() {
  return (
    <main>
      <MyAssistant />
    </main>
  );
}
```
```

--------------------------------

### Create MarkdownText Component

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Instantiates the pre-configured markdown text renderer using the factory function.

```typescript
const MarkdownText = makeMarkdownText();
```

--------------------------------

### Define Environment Variable in .env

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Format for storing the OpenAI API key in the backend .env file.

```bash
OPENAI_API_KEY=sk_test_1234567890abcdefghijklmnop
```

--------------------------------

### Implement Authentication Middleware

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/architecture.md

Middleware to verify Authorization headers and return a 401 status code if validation fails.

```python
@app.middleware("http")
async def check_auth(request, call_next):
    token = request.headers.get("Authorization")
    if not verify_token(token):
        return JSONResponse(status_code=401)
```

--------------------------------

### POST /api/chat

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Sends a chat request containing system instructions, available tools, and message history to the agent.

```APIDOC
## POST /api/chat

### Description
Sends a chat request to the assistant, including conversation history and optional tool definitions, to receive an agent response.

### Method
POST

### Endpoint
/api/chat

### Request Body
- **system** (string) - Optional - System instructions sent to the agent.
- **tools** (array) - Optional - Frontend tools available to the agent.
- **messages** (array) - Required - Conversation message history following the LanguageModelV1 format.

### Request Example
{
  "system": "You are a helpful financial assistant. Your name is assistant-ui.",
  "tools": [
    {
      "name": "refresh_page",
      "description": "Refresh the page",
      "parameters": {}
    }
  ],
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "What is the current stock price for Apple?"
        }
      ]
    }
  ]
}
```

--------------------------------

### Verify OpenAI API Key Environment

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Use these shell commands to check if the environment variable is set and to validate the key against the OpenAI API.

```bash
# Verify key is set
echo $OPENAI_API_KEY

# Test key validity
curl https://api.openai.com/v1/models \
  -H "Authorization: Bearer $OPENAI_API_KEY"
```

--------------------------------

### Initialize Graph State

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-state.md

Provides the initial state input when invoking the graph via astream.

```python
initial_input = {
    "messages": [HumanMessage(content="What's AAPL?")]
}

async for msg, metadata in graph.astream(
    initial_input,
    config={"configurable": {...}}
):
    # Process streamed messages
    pass
```

--------------------------------

### Construct LangGraph Workflow

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Define the agent workflow by adding nodes and conditional edges to the StateGraph.

```python
workflow = StateGraph(AgentState)
workflow.add_node("agent", call_model)
workflow.add_node("tools", run_tools)
workflow.set_entry_point("agent")
workflow.add_conditional_edges("agent", should_continue, ["tools", END])
workflow.add_edge("tools", "agent")
assistant_ui_graph = workflow.compile()
```

--------------------------------

### Define Frontend Tool Call Model

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/add-langgraph-route.md

Represents tool definitions passed from the frontend to the backend.

```python
class FrontendToolCall(BaseModel):
    name: str
    description: Optional[str] = None
    parameters: dict[str, Any]
```

--------------------------------

### Define System Message Model

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/add-langgraph-route.md

Represents system-level instructions for the agent.

```python
class LanguageModelSystemMessage(BaseModel):
    role: Literal["system"]
    content: str
```

--------------------------------

### Frontend Tool Execution Flow

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/architecture.md

Visual representation of the frontend tool execution lifecycle, involving NodeInterrupt and event-based communication.

```text
Agent calls: refresh_page()
   ↓
FrontendTool._arun() raises: NodeInterrupt
   ↓
add_langgraph_route catches exception
   ↓
RunController.add_tool_call() emits event
   ↓
Frontend receives: tool_call event
   ↓
Runtime.execute() called: window.location.reload()
   ↓
Frontend reports result back
   ↓
Backend creates ToolMessage
   ↓
Agent receives result, continues
```

--------------------------------

### useEdgeRuntime Hook Configuration

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Initializes the runtime instance for managing backend communication with specific API and interoperability settings.

```typescript
const runtime = useEdgeRuntime({
  api: "http://localhost:8000/api/chat",
  unstable_AISDKInterop: true,
});
```

--------------------------------

### Binding Tools to an OpenAI Model

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-tools.md

Bind the exported tools list to an OpenAI model instance.

```python
from app.langgraph.tools import tools

# Bind tools to an OpenAI model
model_with_tools = model.bind_tools(tools)
```

--------------------------------

### Import LangGraph Agent

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Import the compiled state graph for use in the application.

```python
from app.langgraph.agent import assistant_ui_graph
```

--------------------------------

### call_model

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Invokes the OpenAI language model with system prompts, message history, and bound tools.

```APIDOC
## call_model

### Description
Calls the OpenAI language model using the current state and configuration. It binds available tools and returns the model's response as an AIMessage.

### Signature
`async def call_model(state: AgentState, config: Dict[str, Any]) -> Dict[str, Any]`

### Parameters
- **state** (AgentState) - Required - Current graph state with message history.
- **config** (Dict) - Required - Runnable config with `configurable.system` and `configurable.frontend_tools`.

### Return Value
- **Dict** - Dictionary with `messages` key containing the model's response.
```

--------------------------------

### Implement Authentication Middleware

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/README.md

Add an HTTP middleware function to verify authorization tokens in the FastAPI server.

```python
@app.middleware("http")
async def verify_token(request, call_next):
    token = request.headers.get("Authorization")
    if not is_valid(token):
        return JSONResponse(status_code=401)
    return await call_next(request)
```

--------------------------------

### Implement Graceful Degradation for Tools

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Allows the application to continue functioning even if specific tools fail to load.

```python
def get_tools(config):
    tools = []
    try:
        tools.append(get_stock_price)
    except Exception as e:
        logger.error(f"Failed to load stock tool: {e}")
    # Continue with other tools
    return tools
```

--------------------------------

### Frontend Environment Variables

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Configuration for environment variables and their usage within the frontend application.

```text
NEXT_PUBLIC_API_URL=http://localhost:8000
```

```typescript
const api = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
```

--------------------------------

### Check Backend Server Status

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Ensure the backend service is reachable at the default local address.

```text
http://localhost:8000
```

--------------------------------

### MarkdownText Component

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

A pre-configured markdown text renderer that converts markdown syntax into HTML for assistant messages.

```APIDOC
## MarkdownText Component

### Signature
`const MarkdownText = makeMarkdownText();`

### Description
Pre-configured markdown text renderer for displaying rich text in assistant messages. Converts markdown syntax to HTML.

### Supported Markdown Features
- Headers (# Heading)
- Bold (**text**)
- Italic (*text*)
- Code blocks (``)
- Links ([text](url))
- Lists
- Tables
```

--------------------------------

### Tool Call Event

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Format for signaling when the agent invokes a tool.

```text
event: tool_call
data: {"toolCallId": "call_123", "toolName": "get_stock_price"}
```

--------------------------------

### assistant_ui_graph.astream

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/langgraph-agent.md

Executes the compiled LangGraph agent workflow asynchronously, streaming messages and metadata back to the caller.

```APIDOC
## assistant_ui_graph.astream

### Description
Streams messages from the compiled LangGraph agent workflow. The agent processes input messages, performs tool execution if required, and streams the results.

### Signature
`assistant_ui_graph.astream(input, config, stream_mode="messages")`

### Parameters
- **input** (dict) - Required - A dictionary containing the state, typically `{"messages": [HumanMessage(...)]}`.
- **config** (dict) - Required - Configuration dictionary containing `configurable` keys such as `system` (prompt) and `frontend_tools` (list of tools).
- **stream_mode** (str) - Optional - The streaming mode, defaults to `"messages"`.

### Usage Example
```python
from app.langgraph.agent import assistant_ui_graph

async for msg, metadata in assistant_ui_graph.astream(
    {"messages": [HumanMessage(content="What's AAPL?")]},
    {
        "configurable": {
            "system": "You are a helpful assistant",
            "frontend_tools": []
        }
    },
    stream_mode="messages",
):
    print(msg)
```
```

--------------------------------

### Handle 500 Internal Server Error in Python

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/errors.md

Demonstrates handling server errors during streaming requests.

```python
try:
    async with client.stream(
        "POST",
        "http://localhost:8000/api/chat",
        json=request
    ) as response:
        if response.status_code >= 500:
            content = await response.aread()
            print("Server error:", content.decode())
except Exception as e:
    print("Connection error:", e)
```

--------------------------------

### Tool Result Event

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/endpoints.md

Format for returning the result after tool execution.

```text
event: tool_result
data: {"toolCallId": "call_123", "result": "..."}
```

--------------------------------

### Configure Assistant Message Rendering

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/api-reference/frontend-components.md

Defines the component mapping for assistant message text rendering.

```typescript
{
  components: {
    Text: MarkdownText  // Renders markdown in assistant responses
  }
}
```

--------------------------------

### Configure CORS Middleware

Source: https://github.com/yonom/assistant-ui-langgraph-fastapi/blob/main/_autodocs/configuration.md

Settings for handling Cross-Origin Resource Sharing, including development-wide access and restricted production configurations.

```python
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
```

```python
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "https://yourdomain.com",
        "https://app.yourdomain.com"
    ],
    allow_credentials=True,
    allow_methods=["POST"],
    allow_headers=["Content-Type"],
    max_age=3600,
)
```
Tokens:
Raw