[Docs] Add AI Chat API documentation and endpoint metadata #7828
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds AI Chat docs and a POST /ai/chat EndpointMetadata component, new SSE streaming response handling documentation with examples, a centralized AI sidebar and layout refactor, a shared secret-key header parameter, and adjustments to APIEndpoint types and UI rendering. Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant API as Thirdweb API (/ai/chat)
Client->>API: POST /ai/chat { messages, stream: true?, context?, headers: x-secret-key }
alt stream=true
API-->>Client: SSE event: init
API-->>Client: SSE event: presence
API-->>Client: SSE event: delta (content chunks)
API-->>Client: SSE event: action (e.g., sign_transaction, sign_swap)
API-->>Client: SSE event: image / context (optional)
API-->>Client: SSE event: error (on failure)
else stream=false
API-->>Client: 200 JSON { message, session_id, request_id, actions[] }
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (8)
🚧 Files skipped from review as they are similar to previous changes (8)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
the
Portal
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
size-limit report 📦
|
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| <ApiEndpoint | ||
| metadata={{ | ||
| description: | ||
| "Send requests to the thirdweb AI model and receive a responses.", |
There was a problem hiding this comment.
There's a grammatical error in the description text. It should be "Send requests to the thirdweb AI model and receive responses." (without the article "a" before the plural noun "responses").
| "Send requests to the thirdweb AI model and receive a responses.", | |
| "Send requests to the thirdweb AI model and receive responses.", |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
joaquim-verges
force-pushed
the
_Docs_Add_AI_Chat_API_documentation_and_endpoint_metadata
branch
from
559a578 to
acf6f38
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (2)
apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx (2)
212-220: Bug: null check references the wrong identifier in header handlingThe null check uses h instead of h.example, which is always truthy. This can produce incorrect serialization decisions.
- return `-H "${h.name}:${ - typeof h.example === "object" && h !== null - ? JSON.stringify(h.example) - : h.example - }"`; + return `-H "${h.name}:${ + typeof h.example === "object" && h.example !== null + ? JSON.stringify(h.example) + : h.example + }"`;
261-269: Generate valid fetch examples: stringify body and set Content-TypeCurrently the body is emitted as an object, which isn’t a valid fetch payload. Stringify JSON and ensure Content-Type is set when a body is present (unless already provided).
- if (Object.keys(bodyObj).length > 0) { - fetchOptions.body = bodyObj; - } + if (Object.keys(bodyObj).length > 0) { + const existingHeaders = + (fetchOptions.headers as Record<string, string | number | boolean | object>) || {}; + const headers: Record<string, string> = {}; + for (const [k, v] of Object.entries(existingHeaders)) { + headers[k] = typeof v === "string" ? v : JSON.stringify(v); + } + if (!headers["Content-Type"]) { + headers["Content-Type"] = "application/json"; + } + fetchOptions.headers = headers; + fetchOptions.body = JSON.stringify(bodyObj, null, 2); + }
🧹 Nitpick comments (5)
apps/portal/src/app/ai/chat/page.mdx (3)
20-21: Fix grammar in intro sentenceSmall wording tweak for clarity.
-You can use the API with the API directly, or with any OpenAI-compatible client library. +You can use the API directly, or with any OpenAI-compatible client library.
32-36: Cross-link streaming guidanceConsider linking to the new handling responses page here to help readers discover SSE streaming docs.
Example addition:
- See handling streaming responses for more details: /ai/chat/handling-responses
36-51: Consistent indentation in the Python snippetMinor consistency nit: replace the mix of tabs/spaces with spaces only.
- client = OpenAI( - base_url="https://api.thirdweb.com", - api_key="<your-project-secret-key>", -) +client = OpenAI( + base_url="https://api.thirdweb.com", + api_key="<your-project-secret-key>", +)apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx (2)
14-20: Harden APIParameter example type with a reusable aliasGood call expanding support to arrays. To improve type clarity and reuse, define a dedicated alias and use ReadonlyArray to cover readonly literals.
export type APIParameter = | { name: string; required: false; description: React.ReactNode; type?: string; - example?: - | string - | boolean - | number - | object - | Array<string | boolean | number | object>; + example?: ParameterExample; } | { name: string; required: true; - example: - | string - | boolean - | number - | object - | Array<string | boolean | number | object>; + example: ParameterExample; description: React.ReactNode; type?: string; }; + +type ParameterPrimitive = string | boolean | number; +type ParameterObject = Record<string, unknown>; +type ParameterExample = + | ParameterPrimitive + | ParameterObject + | ReadonlyArray<ParameterPrimitive | ParameterObject>;Also applies to: 24-30
152-206: Parameter sections removed — confirm intent or gate behind a propCommenting-out ParameterSection/ParameterItem removes discoverable docs for headers/path/body parameters. If simplification is intended, consider gating behind a prop (e.g., showParameters) so endpoints that need detailed parameter docs can enable it.
Example approach:
- Propagate a boolean flag from EndpointMetadata to ApiEndpoint to re-enable parameter sections when needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/portal/src/app/Header.tsx(1 hunks)apps/portal/src/app/ai/chat/EndpointMetadata.tsx(1 hunks)apps/portal/src/app/ai/chat/handling-responses/page.mdx(1 hunks)apps/portal/src/app/ai/chat/page.mdx(1 hunks)apps/portal/src/app/ai/layout.tsx(1 hunks)apps/portal/src/app/ai/sidebar.tsx(1 hunks)apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx(4 hunks)apps/portal/src/components/Document/APIEndpointMeta/common.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/portal/src/app/ai/chat/handling-responses/page.mdx
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/portal/src/app/ai/layout.tsx
- apps/portal/src/app/ai/sidebar.tsx
- apps/portal/src/components/Document/APIEndpointMeta/common.tsx
- apps/portal/src/app/ai/chat/EndpointMetadata.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Files:
apps/portal/src/app/Header.tsxapps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/portal/src/app/Header.tsxapps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Size
🔇 Additional comments (3)
apps/portal/src/app/Header.tsx (1)
145-148: Add Chat API link — looks goodNew AI link correctly wires the Chat API into both desktop dropdown and mobile menu via shared aiLinks.
apps/portal/src/app/ai/chat/page.mdx (1)
39-42: Verify OpenAI client base_url and auth expectationsPlease confirm:
- base_url is correct for your OpenAI-compatible route (the OpenAI Python SDK targets /v1/chat/completions under base_url).
- Using api_key will send Authorization: Bearer . Ensure your service accepts that in addition to x-secret-key for HTTP requests.
If the service expects the OpenAI path prefix, base_url should remain https://api.thirdweb.com (the SDK appends /v1/...). If it expects a different prefix (e.g. /ai), update base_url accordingly.
apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx (1)
77-79: Header styling changes — LGTMSimpler header (no border-bottom) and h2 level for title work well within the page hierarchy.
joaquim-verges
force-pushed
the
_Docs_Add_AI_Chat_API_documentation_and_endpoint_metadata
branch
from
acf6f38 to
0554be3
Compare
joaquim-verges
deleted the
_Docs_Add_AI_Chat_API_documentation_and_endpoint_metadata
branch
PR-Codex overview
This PR introduces enhancements to the
AIsection of the application, adding new API endpoints and refining the documentation for the chat API. It organizes sidebar links and improves the metadata and response handling for better user experience.Detailed summary
Chat APIandMCP Serverlinks in theHeader.secretKeyHeaderParameterfor API authentication.sidebarfor AI tools.Layoutto utilize the newsidebar.Chat APIdocumentation with examples and response handling.EndpointMetadatafor API details.Summary by CodeRabbit
New Features
Improvements
Documentation