feat(agent): connect ai agent to tools, update ai agent chat ui, improve mcp connection#316
Conversation
…cals and parameters checks
…creating, editing, and viewing agent details
- Introduced AgentsLandingPage for initiating conversations with AI agents. - Implemented AgentsChatPage for handling chat interactions and message streaming. - Created AgentConversationsPage to manage and display conversation history. - Added ChatHistory component for displaying and managing past conversations. - Enhanced ConfirmDialog for better user interaction when deleting conversations. - Updated routing to accommodate new agents and conversations structure. - Refactored agents service to support streaming messages and conversation management. - Added ProvidersSettings component for managing AI provider configurations in settings.
…ance agent landing page and providers connect title
…dd system prompt for improved context
…ated configurations and UI elements
…method to llmConfigRepository mock
…ance UI for agent details and forms
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new component library, ai-elements, built on top of shadcn/ui to facilitate the development of AI-native applications. It includes a wide range of components such as Agent, Artifact, Conversation, CodeBlock, Persona, and Terminal, along with their respective documentation and usage examples. My review identified a critical security vulnerability regarding the exposure of an OpenAI API key on the client-side, a major version update for lucide-react that requires verification, and several documentation improvements, including incomplete type definitions, missing imports, and minor typos.
| { | ||
| body: formData, | ||
| headers: { | ||
| Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`, |
There was a problem hiding this comment.
Exposing the OpenAI API key on the client-side is a critical security vulnerability. Environment variables prefixed with NEXT_PUBLIC_ are embedded into the client-side JavaScript bundle, making the key publicly accessible. This could lead to unauthorized use and significant financial loss. All API calls to OpenAI should be proxied through a backend API route to keep the key secure.
| "embla-carousel-react": "^8.6.0", | ||
| "framer-motion": "^12.23.12", | ||
| "lucide-react": "^0.545.0", | ||
| "lucide-react": "^1.7.0", |
There was a problem hiding this comment.
The version of lucide-react is being bumped from ^0.545.0 to ^1.7.0. This is a major version update and could introduce breaking changes. Please ensure that this update has been tested thoroughly and doesn't affect existing icons and components.
| | `...props` | `React.ComponentProps<` | - | Any props are spread to the root div. | | ||
|
|
||
| ### `<AgentHeader />` | ||
|
|
||
| | Prop | Type | Default | Description | | ||
| |------|------|---------|-------------| | ||
| | `name` | `string` | Required | The name of the agent. | | ||
| | `model` | `string` | - | The model identifier (e.g. | | ||
| | `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. | |
There was a problem hiding this comment.
The props table for <Agent /> and <AgentHeader /> has some incomplete type definitions and descriptions. For example:
- The type for
...propsis incomplete (React.ComponentProps<). It should specify the HTML element, likeReact.ComponentProps<'div'>. - The description for the
modelprop is missing its example.
This pattern of incomplete types and descriptions appears in many of the new documentation files. Please review all the props tables in the new markdown files to ensure they are complete and accurate.
|
|
||
| const createCheckpoint = (messageIndex: number) => { | ||
| const checkpoint: CheckpointType = { | ||
| id: nanoid(), |
There was a problem hiding this comment.
The nanoid function is used here but it's not imported in the code example. Please add import { nanoid } from 'nanoid'; at the top of the file to make the example complete and runnable.
| | `className` | `string` | - | Additional CSS classes to apply to the dropdown content. | | ||
| | `...props` | `React.ComponentProps<typeof DropdownMenuContent>` | - | Props to spread to the underlying DropdownMenuContent component. | | ||
|
|
||
| ### `<OpenInChatGPT />`, `<OpenInClaude />`, `<OpenInT3 />`, `<OpenInScira />`, `<OpenInv0 />`, `<OpenInCursor />` |
There was a problem hiding this comment.
There seems to be a typo in the component name. It should probably be <OpenInV0 /> to match the platform name v0.
| ### `<OpenInChatGPT />`, `<OpenInClaude />`, `<OpenInT3 />`, `<OpenInScira />`, `<OpenInv0 />`, `<OpenInCursor />` | |
| ### `<OpenInChatGPT />`, `<OpenInClaude />`, `<OpenInT3 />`, `<OpenInScira />`, `<OpenInV0 />`, `<OpenInCursor />` |
|
|
||
| Add the following route to your backend: | ||
|
|
||
| ```tsx title="api/chat/route.ts" |
There was a problem hiding this comment.
The file path for the backend route example (api/chat/route.ts) seems inconsistent with the API endpoint used in the frontend example (/api/sources). To avoid confusion, please update the file path to match the endpoint, for example: api/sources/route.ts.
| ```tsx title="api/chat/route.ts" | |
| ```tsx title="api/sources/route.ts" |
|
|
||
| // Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline | ||
| // oxlint-disable-next-line eslint(no-bitwise) | ||
| const isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1; |
There was a problem hiding this comment.
This function uses a bitwise operation which returns a number (0 or 1), not a boolean. While this works in JavaScript due to type coercion, it's more explicit and type-safe to ensure it returns a boolean by using !!.
This applies to isBold and isUnderline as well.
| const isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1; | |
| const isItalic = (fontStyle: number | undefined) => !!(fontStyle && fontStyle & 1); |
…e pool Replace static quick suggestions with a randomized selection of 5 from a larger pool of 15 attack-surface-focused security prompts. This provides users with more varied and relevant suggestions on each page load instead of the same fixed set.
l1ttps
changed the title
2 participants
No description provided.