feat(tiktok): add TikTok integration with Display API support #3110
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@BillLeoutsakosvl346 is attempting to deploy a commit to the Sim Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
Greptile OverviewGreptile SummaryThis PR adds TikTok integration with OAuth authentication and Display API support, implementing 3 tools (Get User Info, List Videos, Query Videos) and a block UI with operation dropdown and conditional fields. Key changes:
Code quality:
Confidence Score: 4.5/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant SimApp as Sim Application
participant Auth as Auth Provider (auth.ts)
participant TikTok as TikTok OAuth
participant TikTokAPI as TikTok Display API
participant Block as TikTok Block
participant Tool as TikTok Tool
User->>SimApp: Configure TikTok Block
SimApp->>Block: Load TikTok Block Config
Block->>User: Show OAuth credential field
User->>SimApp: Click "Connect TikTok Account"
SimApp->>Auth: Request TikTok OAuth
Auth->>TikTok: Redirect to authorization URL
Note over Auth,TikTok: Required scopes: user info,<br/>profile, stats, video list
TikTok->>User: Show authorization screen
User->>TikTok: Grant permissions
TikTok->>Auth: Send approval
Auth->>TikTok: Get credentials
TikTok->>Auth: Return credentials
Auth->>TikTokAPI: Fetch user info
TikTokAPI->>Auth: Return user profile
Auth->>SimApp: Save credential
User->>Block: Select operation & configure inputs
User->>SimApp: Execute workflow
SimApp->>Block: Get tool & params from operation
Block->>Tool: Call selected tool (get_user/list_videos/query_videos)
Tool->>TikTokAPI: API request
TikTokAPI->>Tool: Return data
Tool->>Block: Transform & return response
Block->>SimApp: Output results
SimApp->>User: Display workflow results
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| } | ||
| } | ||
|
|
||
| const videos: TikTokVideo[] = (data.data?.videos ?? []).map((video: any) => ({ |
Contributor
There was a problem hiding this comment.
use explicit type instead of any for video parameter
Suggested change
| const videos: TikTokVideo[] = (data.data?.videos ?? []).map((video: any) => ({ | |
| const videos: TikTokVideo[] = (data.data?.videos ?? []).map((video: unknown) => ({ |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/tools/tiktok/list_videos.ts
Line: 66:66
Comment:
use explicit type instead of `any` for video parameter
```suggestion
const videos: TikTokVideo[] = (data.data?.videos ?? []).map((video: unknown) => ({
```
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.| } | ||
| } | ||
|
|
||
| const videos: TikTokVideo[] = (data.data?.videos ?? []).map((video: any) => ({ |
Contributor
There was a problem hiding this comment.
use explicit type instead of any for video parameter
Suggested change
| const videos: TikTokVideo[] = (data.data?.videos ?? []).map((video: any) => ({ | |
| const videos: TikTokVideo[] = (data.data?.videos ?? []).map((video: unknown) => ({ |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/sim/tools/tiktok/query_videos.ts
Line: 63:63
Comment:
use explicit type instead of `any` for video parameter
```suggestion
const videos: TikTokVideo[] = (data.data?.videos ?? []).map((video: unknown) => ({
```
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Add TikTok integration with OAuth authentication and Display API support. Implements 3 tools (Get User Info, List Videos, Query Videos) and a block UI with operation dropdown and conditional fields.
Type of Change
Testing
bun run type-check- passesbun run build(sim package) - succeedsbun run test- all 3696 tests passbun run lint- passesNote: Full API testing requires TikTok Developer approval (Display API access takes several days).
Checklist
Screenshots/Videos
Changes
New files:
tools/tiktok/- Types and 3 tool implementationsblocks/blocks/tiktok.ts- Block UI configurationModified files:
lib/oauth/types.ts- Added 'tiktok' provider typelib/oauth/oauth.ts- Added TikTok OAuth configurationlib/auth/auth.ts- Added TikTok auth providerlib/core/config/env.ts- Added TIKTOK_CLIENT_ID/SECRET env varscomponents/icons.tsx- Added TikTokIcontools/registry.ts- Registered TikTok toolsblocks/registry.ts- Registered TikTok block