feat: Add drawing tool #213
Conversation
This commit introduces a new `drawingTool` that allows me to draw GeoJSON features on the map. The changes include: - A new Zod schema for validating GeoJSON data. - The `drawingTool` definition. - Integration of the new tool. - Updates to my actions to handle the tool's output. - Modifications to the Mapbox component to render the GeoJSON data I generate on the map.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
WalkthroughAdds a drawing tool and GeoJSON validation schema, wires the tool into the tools registry, updates AI action handling to recognize DRAWING outputs (without persisting chat), and renders AI-provided GeoJSON as Mapbox sources/layers. Also adds a local Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Agent
participant drawingTool
participant AIState
participant MapboxMap
User->>Agent: Request a drawing
Agent->>drawingTool: execute({ geojson })
drawingTool-->>Agent: { type: "DRAWING", geojson }
Agent-->>AIState: append tool message (name: "drawing", content: geojson)
AIState-->>MapboxMap: state update / message visible
MapboxMap->>MapboxMap: parse geojson, add/update sources and layers
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code Graph Analysis (2)components/map/mapbox-map.tsx (4)
lib/schema/drawing.ts (2)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||||||
PR Code Suggestions ✨Explore these optional code suggestions:
|
||||||||||||||
This commit introduces a new `drawingTool` that allows me to draw GeoJSON features on the map. The changes include: - A new Zod schema for validating GeoJSON data. - The `drawingTool` definition, which adds to my capabilities. - Integration of this new capability so I can use it. - Updates to my internal logic to handle the drawing output. - Modifications to the Mapbox component to render the GeoJSON data I generate on the map.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🔭 Outside diff range comments (1)
app/actions.tsx (1)
423-431: Fix type mismatch: isCollapsed should be a StreamableValue, not a booleanThe UIState type defines isCollapsed?: StreamableValue. Returning a raw boolean here breaks the contract and can cause runtime/type issues.
Apply this diff:
- return { - id, // message id - component: <MapQueryHandler toolOutput={toolOutput} />, - isCollapsed: false, // Allow handler to be active - }; + const collapsed = createStreamableValue<boolean>(); + collapsed.done(false); // Allow handler to be active + return { + id, // message id + component: <MapQueryHandler toolOutput={toolOutput} />, + isCollapsed: collapsed.value, + };
🧹 Nitpick comments (5)
lib/agents/tools/index.tsx (1)
15-33: Clean up leftover mcp comment and consider typing the tools map
- There’s a stale commented-out argument in geospatialQueryTool’s call. Remove it to avoid confusion.
- tools is typed as any. Consider defining a ToolMap type (if available from your AI tooling) or at least Record<string, unknown> to keep the surface typed.
Apply this minimal cleanup:
geospatialQueryTool: geospatialTool({ - uiStream - // mcp: mcp || null // Removed mcp argument + uiStream }), drawing: drawingTool({ uiStream })Optional typing idea (outside this hunk):
// e.g., import type { ToolDefinition } from 'ai' (if such type exists) // type ToolMap = Record<string, ToolDefinition>; const tools: any = { ... } // -> const tools: ToolMap = { ... }lib/schema/drawing.ts (2)
9-22: Allow foreign members and bbox on geometriesGeoJSON allows foreign members and optional bbox. Passing through unknown keys increases interoperability.
Apply this diff:
-const PointGeometrySchema = z.object({ +const PointGeometrySchema = z.object({ type: z.literal('Point'), - coordinates: PointSchema, -}); + coordinates: PositionSchema, + bbox: z.array(z.number()).length(4).optional(), +}).passthrough(); -const LineStringGeometrySchema = z.object({ +const LineStringGeometrySchema = z.object({ type: z.literal('LineString'), coordinates: LineStringSchema, -}); + bbox: z.array(z.number()).length(4).optional(), +}).passthrough(); -const PolygonGeometrySchema = z.object({ +const PolygonGeometrySchema = z.object({ type: z.literal('Polygon'), coordinates: PolygonSchema, -}); + bbox: z.array(z.number()).length(4).optional(), +}).passthrough();
38-46: FeatureCollection: add bbox and passthrough; keep schema descriptiveAdd bbox at the collection level and allow foreign members.
Apply this diff:
-const FeatureCollectionSchema = z.object({ +const FeatureCollectionSchema = z.object({ type: z.literal('FeatureCollection'), features: z.array(FeatureSchema), -}); + bbox: z.array(z.number()).length(4).optional(), +}).passthrough(); export const drawingSchema = z.object({ geojson: FeatureCollectionSchema.describe("A valid GeoJSON FeatureCollection object to be drawn on the map."), });components/map/mapbox-map.tsx (2)
14-15: Import AIState as a type-only import to avoid unnecessary bundlingThis keeps the client bundle lean and avoids pulling server-only types into the client graph.
-import { AIState } from '@/app/actions'; +import type { AIState } from '@/app/actions';
37-37: Minor: Consider typing the hook to avoid later type castsIf
useAIStatesupports generics, preferconst [aiState] = useAIState<AIState>()and remove downstreamas AIStatecasts. If it doesn't, current usage is fine.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.env(1 hunks)app/actions.tsx(2 hunks)components/map/mapbox-map.tsx(3 hunks)lib/agents/tools/drawing.tsx(1 hunks)lib/agents/tools/index.tsx(2 hunks)lib/schema/drawing.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
.env (1)
lib/db/migrate.ts (1)
runMigrations(8-34)
lib/agents/tools/drawing.tsx (1)
lib/schema/drawing.ts (1)
drawingSchema(44-46)
lib/schema/drawing.ts (2)
components/map/map-data-context.tsx (1)
MapData(7-17)lib/actions/chat.ts (1)
updateDrawingContext(165-205)
lib/agents/tools/index.tsx (2)
lib/agents/tools/drawing.tsx (1)
drawingTool(4-17)lib/agents/tools/geospatial.tsx (2)
uiStream(146-306)query(159-305)
components/map/mapbox-map.tsx (3)
app/actions.tsx (1)
AIState(251-255)components/chat.tsx (2)
Chat(20-123)id(67-72)components/map/map-data-context.tsx (1)
MapData(7-17)
🪛 dotenv-linter (3.3.0)
.env
[warning] 1-1: [QuoteCharacter] The value has quote characters (', ")
(QuoteCharacter)
🔇 Additional comments (1)
lib/agents/tools/index.tsx (1)
6-6: Wiring the drawing tool looks goodImporting and exposing the drawing tool aligns with the new schema and map rendering flow.
| @@ -0,0 +1 @@ | |||
| DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres" | |||
There was a problem hiding this comment.
Do not commit .env with credentials; replace with .env.example and ignore .env
Committing environment files with secrets (even local defaults) is a security risk and makes accidental leaks likely. Also, dotenv-linter flags the quoted value. Recommended:
- Remove .env from version control and add it to .gitignore.
- Add a .env.example with placeholders for developers to copy locally.
Proposed changes:
Delete the committed secret (leaves the file empty if you don’t remove the file outright):
-DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"Add a .env.example (outside this hunk) with placeholders:
# .env.example
# Copy to .env and fill real credentials locally
DATABASE_URL=postgresql://USER:PASSWORD@HOST:5432/DBNAME
And ignore .env (outside this hunk):
# .gitignore
.env
If, for some reason, this file must stay, at minimum remove quotes to satisfy dotenv-linter:
-DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgresI can open a follow-up PR to codify this workflow (add .env.example, update docs).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres" |
🧰 Tools
🪛 dotenv-linter (3.3.0)
[warning] 1-1: [QuoteCharacter] The value has quote characters (', ")
(QuoteCharacter)
🤖 Prompt for AI Agents
In .env around lines 1 to 1, the repository contains a committed environment
file with hardcoded DB credentials and quoted value (security and dotenv-linter
issues); remove the sensitive .env from version control (git rm --cached if you
need to keep locally), add .env to .gitignore, create a .env.example with
placeholder values for DATABASE_URL for developers to copy, and if you must keep
a .env file in the repo temporarily remove the quotes around the value to
satisfy dotenv-linter (preferred: delete committed secret and replace with
.env.example).
| description: 'Draw GeoJSON features on the map. Use this tool to draw points, lines, and polygons.', | ||
| parameters: drawingSchema, | ||
| execute: async ({ geojson }: { geojson: any }) => { | ||
| return { | ||
| type: 'DRAWING', | ||
| geojson, | ||
| }; | ||
| }, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Type the execute input and validate at runtime as a safety net
parameters uses drawingSchema for LLM tool calling, but adding an explicit runtime parse inside execute makes the tool robust against malformed inputs and keeps TypeScript happy.
Apply this diff:
-import { drawingSchema } from '@/lib/schema/drawing';
+import { drawingSchema } from '@/lib/schema/drawing';
+import type { z } from 'zod';
@@
- execute: async ({ geojson }: { geojson: any }) => {
- return {
- type: 'DRAWING',
- geojson,
- };
- },
+ execute: async (input: z.infer<typeof drawingSchema>) => {
+ // Safety net: validate again at runtime
+ const parsed = drawingSchema.parse(input);
+ return {
+ type: 'DRAWING' as const,
+ geojson: parsed.geojson,
+ };
+ },If you prefer a softer failure mode, use safeParse and return an error to the UI stream instead of throwing.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| description: 'Draw GeoJSON features on the map. Use this tool to draw points, lines, and polygons.', | |
| parameters: drawingSchema, | |
| execute: async ({ geojson }: { geojson: any }) => { | |
| return { | |
| type: 'DRAWING', | |
| geojson, | |
| }; | |
| }, | |
| }); | |
| import { drawingSchema } from '@/lib/schema/drawing'; | |
| import type { z } from 'zod'; | |
| description: 'Draw GeoJSON features on the map. Use this tool to draw points, lines, and polygons.', | |
| parameters: drawingSchema, | |
| execute: async (input: z.infer<typeof drawingSchema>) => { | |
| // Safety net: validate again at runtime | |
| const parsed = drawingSchema.parse(input); | |
| return { | |
| type: 'DRAWING' as const, | |
| geojson: parsed.geojson, | |
| }; | |
| }, | |
| }); |
🤖 Prompt for AI Agents
In lib/agents/tools/drawing.tsx around lines 9 to 17, the execute handler
currently trusts the incoming { geojson } without runtime validation; update the
function signature to type the input explicitly (e.g., ({ geojson }: { geojson:
unknown }) or matching drawingSchema input type) and perform a runtime
validation using drawingSchema.parse or drawingSchema.safeParse before
proceeding; on successful parse return the existing DRAWING payload with the
validated geojson, and on failure either throw a clear error or (preferred
softer mode) return an error result that the UI can stream back to the user.
lib/schema/drawing.ts
Outdated
| const PointSchema = z.tuple([z.number(), z.number()]); | ||
| const LineStringSchema = z.array(PointSchema); | ||
| const PolygonSchema = z.array(LineStringSchema); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Support altitude and proper minimums for coordinates
Per RFC 7946, positions may include additional elements (e.g., altitude). Lines should have at least 2 positions; rings should have at least 4.
Apply this diff:
-const PointSchema = z.tuple([z.number(), z.number()]);
-const LineStringSchema = z.array(PointSchema);
-const PolygonSchema = z.array(LineStringSchema);
+// Position supports [lng, lat, ...extras], e.g., altitude
+const PositionSchema = z.tuple([z.number(), z.number()]).rest(z.number());
+const LineStringSchema = z.array(PositionSchema).min(2);
+// Polygon is an array of LinearRings (first is outer, subsequent are holes)
+const LinearRingSchema = z.array(PositionSchema).min(4);
+const PolygonSchema = z.array(LinearRingSchema);Optionally, enforce ring closure (first == last) via a superRefine on LinearRingSchema.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const PointSchema = z.tuple([z.number(), z.number()]); | |
| const LineStringSchema = z.array(PointSchema); | |
| const PolygonSchema = z.array(LineStringSchema); | |
| // Position supports [lng, lat, ...extras], e.g., altitude | |
| const PositionSchema = z.tuple([z.number(), z.number()]).rest(z.number()); | |
| const LineStringSchema = z.array(PositionSchema).min(2); | |
| // Polygon is an array of LinearRings (first is outer, subsequent are holes) | |
| const LinearRingSchema = z.array(PositionSchema).min(4); | |
| const PolygonSchema = z.array(LinearRingSchema); |
🤖 Prompt for AI Agents
In lib/schema/drawing.ts around lines 4 to 7, the coordinate schemas currently
only allow 2-element positions and don't enforce minimum lengths for LineStrings
and LinearRings; update PointSchema to accept z.tuple([z.number(),
z.number()]).rest(z.number().optional()) (or equivalent) so positions can
include optional altitude, change LineStringSchema to
z.array(PointSchema).min(2) to require at least two positions, and replace
PolygonSchema with z.array(LinearRingSchema) where LinearRingSchema is
z.array(PointSchema).min(4) (and optionally add a superRefine on
LinearRingSchema to assert the first and last position are equal to enforce ring
closure).
lib/schema/drawing.ts
Outdated
| // GeoJSON Feature Schema | ||
| const FeatureSchema = z.object({ | ||
| type: z.literal('Feature'), | ||
| geometry: GeometrySchema, | ||
| properties: z.record(z.any()).optional(), | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Feature schema: allow id, nullable properties, bbox, and foreign members
These are common in real-world GeoJSON and increase compatibility with external tools.
Apply this diff:
-const FeatureSchema = z.object({
+const FeatureSchema = z.object({
type: z.literal('Feature'),
geometry: GeometrySchema,
- properties: z.record(z.any()).optional(),
-});
+ properties: z.record(z.any()).nullable().optional(),
+ id: z.union([z.string(), z.number()]).optional(),
+ bbox: z.array(z.number()).length(4).optional(),
+}).passthrough();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // GeoJSON Feature Schema | |
| const FeatureSchema = z.object({ | |
| type: z.literal('Feature'), | |
| geometry: GeometrySchema, | |
| properties: z.record(z.any()).optional(), | |
| }); | |
| // GeoJSON Feature Schema | |
| const FeatureSchema = z.object({ | |
| type: z.literal('Feature'), | |
| geometry: GeometrySchema, | |
| properties: z.record(z.any()).nullable().optional(), | |
| id: z.union([z.string(), z.number()]).optional(), | |
| bbox: z.array(z.number()).length(4).optional(), | |
| }).passthrough(); |
🤖 Prompt for AI Agents
In lib/schema/drawing.ts around lines 30 to 35, the FeatureSchema is too strict
for real-world GeoJSON; update it to accept an optional id (string or number),
make properties optional and nullable, add an optional bbox (array of numbers),
and allow foreign members by letting the object accept additional unknown keys
(use passthrough/catchall). Concretely, extend the FeatureSchema to include id?:
string|number, properties?: Record<string, any> | null, bbox?: number[], and
enable passthrough or catchall(z.any()) on the object so extra GeoJSON members
are preserved.
I've been given a new `drawingTool` that allows me to draw GeoJSON features on the map. The changes include: - A new Zod schema for validating GeoJSON data. - The `drawingTool` definition that grants me this new ability. - Updates to handle the tool's output. - Modifications to the Mapbox component to render the GeoJSON data I generate on the map. Note: The `saveChat` function call in `app/actions.tsx` has been temporarily commented out to resolve a runtime issue where the application would hang due to a missing database connection. The `DATABASE_URL` environment variable needs to be properly configured for the chat history saving to work.
…mentation of the drawing tool:
1. **Revised Drawing Schema**: The schema in `lib/schema/drawing.ts` has been updated to be more comprehensive, including support for `MultiPoint`, `MultiLineString`, and `MultiPolygon` geometries, with stricter validation rules aligned with GeoJSON standards.
2. **Fixed Duplicate Handling**: The redundant `case 'drawing'` in `app/actions.tsx` has been removed to streamline the logic.
3. **Refactored Map Rendering**: The map rendering logic in `components/map/mapbox-map.tsx` has been completely refactored to:
- Ensure the map style is loaded before adding sources/layers.
- Update existing sources with new data instead of skipping them.
- Use a single layer per geometry type per message to prevent layer ID conflicts.
- Corrected the `useEffect` dependency array to remove linting warnings.
4. **Runtime Responsiveness Fix**: The `saveChat` function call in `app/actions.tsx` remains commented out to prevent the application from hanging due to a missing database connection. I included a note about this in the PR description for you.
2 participants
User description
This commit introduces a new
drawingToolthat allows me to draw GeoJSON features on the map.The changes include:
drawingTooldefinition.PR Type
Enhancement
Description
Add drawing tool for GeoJSON features on map
Create Zod schema for GeoJSON validation
Integrate drawing tool with AI state management
Render GeoJSON features on Mapbox map
Diagram Walkthrough
File Walkthrough
drawing.ts
Add GeoJSON validation schemaslib/schema/drawing.ts
actions.tsx
Integrate drawing tool with actionsapp/actions.tsx
mapbox-map.tsx
Render GeoJSON features on mapcomponents/map/mapbox-map.tsx
drawing.tsx
Implement drawing tool definitionlib/agents/tools/drawing.tsx
index.tsx
Register drawing tool in tools indexlib/agents/tools/index.tsx
Summary by CodeRabbit
New Features
Chores
Chores